Okay, so today we will cover CSS cascading style sheets. Usually this is a lesson that follows up an introduction to HTML, hypertext markup language. Whereas in HTML, we define the structure of a document. We use CSS to make it pretty. So color, spacing between things, and so on. So today I will work on replicating an existing website that I have a screenshot for. And I'll just focus on this area here. Because the other rest might be too complicated for just one lesson for beginners. So cover basic styles and how to change the document, visuals. So let's jump to it. So I'm going to start off how did you have to change the background color of things in HTML. Let's suppose we have a generic container that's a div like this. So we got an open tag and a closing tag. And the element div is just a generic container or box has no particular semantic meaning. And we can place whatever inside. So let's play some text. Lauren Ipsum. And if I click run. In this environment here, js.fetal.net that I am using can click run in the top left and see the result in the bottom right. If you're using the classic layout. If you click settings in the top right, you can change the layout to your heart's content. I will stick to classic. For the behavior section, I use the auto close HTML tags. I turned that off and I turned off auto close brackets in the beginner class. Otherwise it will auto complete and it might not be. So it's better to manually type everything yourself and you're starting out. So that you can remember that you have to do things and later you can leverage that useful feature. So you can type less. But anyway, click and run. You can see in the bottom right, Lauren Ipsum appears. Now how can we change the background color of the container with Lauren Ipsum? So we're going to the CSS panel here. So the way it works is you write what's called a style sheet. You have to define which elements in the page will be styled and what their styles are. In this case, if I want to style all the divs, all the elements whose name is div in the page, I can start off with the selector being the name of the element. And then I follow with curly braces opening and then type my styles definitions. And then I close it with a curly brace. That's just a syntax for CSS. Now between the open and closing curly brace, by the way, it can do everything in one line. It doesn't have to be in multiple lines, but one liner is going to get really messy and hard to read. So we always like to break a line and write things here in a new line. So how CSS works is you have a property name and we have a value. In this case, I want to change the background color of the container div here to be a different color other than white. So the property name is background dash color. You would write that. And then you have to follow the colon to separate the property name from the value. The value, for example, let's make it yellow. And then to finish off a semicolon. Now you notice I have some space in the beginning of the line. That's not really necessary, but it's usually added. It's called indentation. In programming languages in general, every time you open a curly brace and you break a line, it usually adds two spaces. So we can better visualize, okay, this code here is part of this block for these curly braces. So every time you see the closing one, it will go back to where it was before vertically to the left. In any case, if you click run, you can see the background color with a container here becomes yellow. And if you notice, it doesn't only stop at the end of the text, it goes beyond to the end of the screen on the right. And that's because the div is like a generic container box that occupies the whole row. And we will learn later on that's just a property in CSS called display whose value is block by default for the div element. So every browser, in my case, I'm using Firefox. You might be using a Chromium based browser, but they're all very similar. Every browser has some default visual styles. And this is the default visual style for the div. It occupies the whole row. Now, with that said, this code here could have been written in one line like that. It will be the same thing. Like I said, we usually break a line adding the additions, at least two spaces to the left. Something I also like to add is a space after the selector. This thing here before the opening curly brace is called a selector, which defines what thing we're selecting the document to style with the styles defined between the curly braces. I usually like to add a space between them just for the visuals and style coding style. And for the colon here that separates the property name and the value, I also add a space. So you'll see that a lot, but it's not really necessary. If you click run is the same thing. So CSS keep going forward. You just have to figure out, okay, what's my selector going to be like so that I can select specific things on my document. And then you have to figure out what are the properties that I want to apply to achieve my goal. Do I want to have background certain color, a text color or certain color? Do I want to add space around my element? Space within my element. All that is controlled by CSS properties. Now I know this by memory that to change the background color is background dash color, and I can change the value to any color name here. But if you don't know that there are different ways of going about finding out what CSS properties you should use. One of the ways is just making a search in your favorite search engine. For example, how to change background color CSS. And then you type that and you can see some results like W3 schools or MDN and then click that and see the example. And this W3 schools website is very nice that you can click try it for yourself. And it brings you to a page where the left hand side you can change it and click run and the right hand side will change your currently. For example, if I change the background color here or the body selector, if I change that to yellow and click run, you see the background color for the whole screen, the page became yellow. By the way, the body selector here is basically the whole document, the whole content of the page. And it just happens so that in HTML, we have the body element and that's the part that we actually see. So that's why the background color yellow applied to the selector body covers everything. In any case, that's one way of finding out what CSS property you should use. Another way is via the dev tools. And then let me demonstrate it right now. If you go to your browser press F12, the key F12, it will bring up a panel either usually at the bottom, but it could be to the right to the left or even in a separate window. And that's called the developer tools. I'm using Firefox. This is how it appears, but every browser has a similar feature. If you cannot figure out how to open it with the F12 key, just right click anywhere in the screen, click inspect, and it should also appear. In my case, I'm in Firefox, I should see the inspector tab with the document object model, that is the document tree. If you're in Chromium based, you should see elements as the tab name, but it's the same feature. On the right hand side, I see some style stuff that we'll leverage today. For Firefox, it's called rules tab, but in Chromium based, it's probably going to say styles, but it's the same thing. Okay, so in the left hand side, I can actually move my mouse pointer and hover over things. For example, if I want to, I'm interested in finding out or how to style certain things. In my case, it's the div with the Laura Ipsen text. I can click that and it will highlight for me permanently. And on the right hand side, I can see that it says div, the selector, and color braces background color yellow. That's exactly what we wrote in the CSS tab here for JS Viral. For the person who just arrived, we are doing some CSS. The website we're using is jsvirtal.net. We created a div element and put some text Laura Ipsen inside. Then in the CSS panel, I put a selector called div so that all the div elements in the document will be selected so that their background color is yellow. So background color, we've separated the dash as the name of the property and then we separate the colon and then the value yellow and then finish off a semicolon. And then we're just talking about the dev tools. That's one of the ways we can debug or figure out what properties to use in CSS. To bring up the dev tools, press F12 or right click anywhere on the screen, inspect. Anyway, continuing, I'm going to go back and you see I kind of lost myself because I clicked something else. If you lose yourself and you want to actually highlight Laura Ipsen here, you can right click and inspect. Or if you see this pointer over a kind of rectangle square, click that and bring it to the element you want to analyze, click that and it will highlight it for you here. Okay, so I got clicked the div on the right hand side. I'm going to see the background color yellow. That's what we wrote here. Now this DevTools is very nice in that if I see this check mark, I can uncheck to see what it looks like before applying that style. This is before background color yellow and this is after. So it's very neat. I can see things in real time. Now something interesting about colors is, okay, I can click this color circle and choose a color and it will show me in real time what it looks like. So this is very neat. If you don't know exactly what color you want to choose, you can just pick from the color picker. Now this second part here is called the alpha, which means it's going to be transparent to the left and opaque to the right. So you have noticed some value there changed. That's why. But in any case, we're going to make it opaque by sliding all the way to the right. You might have noticed that the value changed here from a color name to this hash followed by six digits or letter. And this is called the hex notation for colors. And what it means is when you start the hash, it means it's using hexadecimal values instead of base 10, it's base 16. So on the computer, usually you can compose colors with three values, one for red, one for green, one for blue. So the first characters here, the first two, they're for red and then the middle two are for green and the right hand side two are for blue. So if I put them all 00000, that means zero value for red, zero value for green and then for blue, which in practice, the manifestation is the black color. So if I run red color, that means I have to change the first two. For example, ff, that would change it to red. The name of this color would be red in CSS. And this is the hex representation of that specific color. Now, because this is hacks, the digits is like zero through nine and then after nights like a, b, c, d, e, and then f. So f is like the maximum digit. So if I put ff, that's like the maximum value for red. So if you kind of decrease it, for example, if you put dd, that's less red and it can keep going like four, four, and then all the way to 00. Now, if you want to find out about it, what's the equivalent in decimal, you can Google it yourself and find out hacks to decimal conversion, something like that. But suffice it to say if the values here go from zero to 255 for red or for green or for blue. So ff is actually 255. Okay. How have everybody been so far? All right. Thank you. All right, so that's nice. We learned how to set one property. What about other properties? Like the text here is kind of hard to see. Can we make it white to have a better contrast? So one nice thing about the DevTools is I can go here and try things out before I jump to my actual code. So if you see this element thing, I can click between the color versus. And let's say I want to change the color of the text to something else, but I don't know the property. Like I said before, we can Google it or we can use the DevTools. How do we use DevTools? Well, we click here and then start typing some name that might be relevant. For example, maybe I want to start with text and then it gives me suggestions for all the properties related to text. Now it just so happens that this specific color of the text does not serve a text that I know. But if you just type color here, that's the actual property. And then you can try out the different values. I pressed enter, by the way, and it automatically brings me to the value section after the colon. And if I want to try out different colors in sequence, I can press the down key in my keyboard. I can see the things changing, the color of the text changes in real time as my choices go down. And then I can figure out which one I like the best. But again, this is not a very good one if you want to find very, very specific colors outside these specific names. Like I said, the color spectrum is very wide. It's pretty much, there's no way, well, there is a way, but by me too many words to describe every single possible color. So what you want to do is if you're unsure, just click whatever and then click the color circle and figure out which color you want using the color wheel here. Now what's also nice about this color picker in the DevTools is in the bottom here, you have this number and then if you hover over it, it says does not meet WCAG standards for accessible text. What this means is it's comparing the text color with the background color and defining the contrast ratio. The contrast ratio will tell you if it's good to read or not. You know, the higher it is, the better it is for you to read the text in that background color. Right now it's 1.02, that's pretty bad. So you want to strive for a higher level so that it can match or surpass this standard for accessibility. So usually for a red, I think the best contrast ratio is with a white color for text. So if I click that, oops, it went out. Something like that would usually be good. Now I see it's still not so great. Let's see, if I go here, okay, it seems like black is better. So you can try things out and figure out what's the best one. Let's try a different background. Let's see, black background and then white color. You can see the black background with white color text is 21 contrast ratio. It passes AA and AAA standards. That's really, really good. But if you kind of make the text more and more black, it's decreasing all the way. You cannot discern, right? You cannot tell what's the text, what's the background. So that's why you want to increase it, make it really contrast. In any case, that's a really good tool. Make sure your text reads good with your background color. In any case, once we're done doing this in the DevTools, you have to be careful because the DevTools, whatever you change here is not permanent. So if I refresh, I lose all my work. So you want to take care to copy this back into your existing code here. So make sure to highlight and control C or command C in Mac and put it back there. Otherwise, you'll lose your work. In a click, run, there you go. If I inspect it again, it's now permanent. Okay, let's see. So as you noticed, I can have multiple properties. I just need to separate them. Once I finish semicolon, it just follows. In this case, I put a new line, but I don't have to. As long as there is a semicolon, you can start off a new property, value pair, finish semicolon, and so on. Okay, I actually break a line. So you can add before or after. It doesn't matter. Now let's try to do this part here of the card. Let's call this a card. And we have some text in color is white, and then the background is this kind of gray, but it's not entirely black. So if you want to find out what that color is, again, you can leverage the DevTools or if you have a color pick a tool program, you can do that. But in the DevTools, simply open the DevTools. And then in my case for Firefox, there's this icon here to grab a color from the page. I don't know if Chrome has it specifically at this location. Let me know. And you can click that and select anywhere on the screen. So it will copy automatically save to your clipboard the hex code of that color. In this case is 28, 28, 28. Remember, 28 hacks for red, 28 for green, 28 for blue. See when I click, it copies for me. Now if you don't have this in your browser, let me know if you have it or not. You can always go here, click element, type background color, any color you want. Let's say black, click outside, click the color circle, and then click that icon to grab the color. Same thing. And then it will tell you the color here so you can click and copy. Anyway, it's 28 all the way. So going back to JS Fiddle, I'll change the background color to 28, 28, 28, preceded with a hash. Let me close the DevTools here. So it looks like that. And let's see what else here. So we have some artist name and then have the image. We can add that. Let's try before Lauren Ibsen at IMG, which is an image tag. We have after, have some other text. Let's just say the lore. By the way, Lauren Ibsen, whatever, that's like random gibberish text. If you go to this website, livesome.com, you can click to generate random text. If you need it and copy them from here. Okay, do the same for images. So let's pick, grab on a random image. This website called pixum.photos, aka Lauren Pixum. If you scroll down here, they have different ways of grabbing the random image. If you want a 200 by 200 square, you can click this link, pixum.photos, slash 200. And you can open that and it's like this. So I generated different images every time. So you can click the address bar, copy that URL, go back to JS Fiddle. And you can use that for the source attribute for the image. So you can have something. There you go. How's everybody doing so far? I'll keep going if no questions. Okay. So let's build that card. Remember this card here, the Proclaimers Artist and there's a circular image. Let's start off the circular image here. So a way we can target an element in the page, like I said, is if I use the selector name of the element. But that's a huge problem in an actual real world document because the document will have so many images, so many divs, so many paragraphs. So not every single one of them will have the same style. So in order for us to avoid that problem, there are different ways we can target this image element. One way is via ID attribute. But the ID attribute is only good if you have one and only one thing you want to style a certain way. So let's try that out. If I give this image an ID, actually before I do that, I want to demonstrate why we're doing this. Like I said, I said in text, I wanted you to actually see it. So I'm going to copy this image and I'm just going to paste three, have three of them separately, like that. Now let's say I go here. If I want to define another selector rule to select a different thing, I can go outside the prints either before this one or after, okay? And I would like to add a blank line in between. Now let's do after. So if I say IMG for the selector, that means all IMG elements in the document will have the following styles between the curly braces. If I say the width, that's the property to change the width. If I say that's 50 pixels, pixels PX is the unit we usually use, and that's 50 here. If I do that, you see all of them change to 50 pixels, like smaller, right? What if I didn't want that? I only wanted the first one to be changed to 50 pixels and all the other ones should remain as they were before. So this is the problem we have using the element name for the selector. It's not really good in practice, so you want to avoid this. Now a slightly better way, like I said, you add an ID attribute to the first image and then give it a unique name. ID is an attribute that you can assign to an HTML element. That's unique. That is, no other element should have the same ID name. So let's say a first-image. Then I can go here. Instead of IMG, I can say, now be careful here. I've got to say, okay, I want to target an element whose ID. Now whose ID is hash. You have to put a hash prefix here. And then follow by first-image. That's the same thing you type for the value here. So if I click run, only the first one is small. You can see here the first one's small on the left and then the following ones are bigger. Now hash here means I want to target an element whose ID is what follows the hash. First-image, exactly what I wrote for the ID value here. Okay, now understanding that, I'm going to delete the other images. So now I'm safe with this specific style. I'm sure that no other images on the document will be affected by my style change. And let's change the width to 100. Maybe that's closer to what they're doing here in this square. By the way, the image is a square, so I didn't set the height, but you could also set the height here. Height 100 to make it precisely a square. Of course, we can also do HTML attribute width here. That's also possible. But since we're doing CSS, let's stick to CSS. Now you notice how the image is circular. How do we do that in CSS? Well, let's try something out in the DevTools. I click run, F12 to open the DevTools, click this pointer, point to what you want to inspect, the image itself. And this one might be a little bit weird, but let's try border. You know, border is the line that you can have surrounding the element. And let's try border radius. That's one property to change the radius of the border, meaning you can round the borders of the container. And this could be like, if I type 1px and I press up, I can increase the border and see what it looks like. You see, if I scroll up here, see the borders getting rounded and rounded? You see that as I press the up key? So what happens if I go so far as to become a circle? That's the point here. You have to go so far, so far that it becomes a circle. But that's usually not the only pixels. We do it with percent, 50%. If you want to have a circle for an image, just put border radius 50%. Maybe this one, you've got to commit to memory. But like you, as you saw, I just started from 1px, so increased it and eventually became a circle. Okay, remember, adapt tools, you lose it. So make sure to copy this, highlight, control C or command C in Mac. Go to the selector that refers to this element. Be careful. It's not this one, right? It's not to do. Some people with beginners usually don't know exactly where they are, so they end up copying and pasting to the wrong place. So it's the selector for hash first image. That's the block, right? The code block here with the curly grace. Paste it there. In fact, click run is now permanent. Close the depth tools. So that's how you make it circular. Any questions so far? All right, I'm going to keep going then. So we've made it circular. Now, you see, we go small step by step, right? Development, software development. We cannot just do everything at once. You know, some people have, start doing everything, trying to do everything at once. That doesn't work for any problem you're solving when I break it down to smaller parts and start one step at a time. So the first thing we did was the image. We learned how to put an image. We learned how to make it circular, okay? Gotta go step by step. Now, are we done with the image? Well, we are kind of done, but the positioning is kind of weird because you see the text is next to the image. Now, there are different ways to solve the same problem. A easy way to make the image occupy the whole row and not let anything next to it take space is using the display property. So if I set this display property for the image by default, it's inline, which means allows things next to it. If you remember the div, like I said in the beginning of the lecture, that has display block, meaning that it occupies the whole row. You see the content here goes beyond its own contents. Do the same for the first image. If you say display block, let's see what happens. You see the text got pushed to the next line. That's the effect of display block here. It wants to push everything to the next line. I don't want anybody next to me horizontally. Display block. Now, if you like having somebody next to it, that's inline. If you click inline, now they're back. Okay, so I want to make it display block so that the text is pushed down. Great. Now, we have Laura Ibsen. We have another text. If you notice, we have the one text here in both and then the other. Now, they're together in our thing. We can do the same trick, either CSS or actually HTML. I think HTML would be the easiest here. If you really want to separate this text from the other, you can make them their own component. Close one in the div because div by default has display block, so it will push the dollar text down. Usually, when you have isolated text, you want to also enclose them in some sort of element. If you're unsure what element to use, always start with div. Div everything if you're unsure and then later you can change the div to something more meaningful like semantic element in HTML. You can put a div in the dollar as well. That's fine. Now, the opposite of div in the sense of default HTML style for display if it's either block or inline, that's actually span. It might have seen span. That's for inline text. If you want to make this Laura Ibsen, whatever, inline, display inline, just using HTML, you can make that a span. Obviously, here is not going to make any change. Let me remove the div. You're going to see dollar is next to it. If I make it div, it pushes it down because div is display block and span is display inline. Now, all of this said, you still want to confirm that what I said is true. You can always open the dev tools, click this pointer and point to the thing you're analyzing, the span here. Now, it doesn't say anything about display here, but it's actually using the default. If you want to see the default, usually there's a tab here. In the case of Firefox, I think if I click computed, in Chrome, it might be a different tab name, but basically it's the same functionality. You can click to show the browser style here, and it will show all the default styles in CSS. You see all of these are CSS property names and their corresponding values that are applied right now. The one we're interested in is display, so I click the filter bar, type display, and I can see the values indeed inline. If I change that to a div, watch what happens. In this left-hand side here, I can actually modify the code. If I right-click, add it as HTML, or you can double-click the thing here. Either way, I can change the span to a div for the open and close tag, and click outside, and you see the display became block automatically when I change the div. That's how you can confirm and see what the default styles are for each of the elements in your document. In any case, you can just click to remove the filter, and when you're done with this, just click X. You got the point of a display block, display inline. With that in mind, I'll change back to div, so I want to push the text down, and then close the lowering div as well. Let's try to move a little bit faster to implement this. We got the image, push down the text, push down the text. The first text is kind of bold, and the one is a little smaller than the first if I'm not mistaken. Let's do that. Now, I taught you about IDs, but that's not actually the best way to apply styles in CSS. The best way is via classes, so you're going to hear that a lot, class, attribute. If you want to style anything in CSS, the best way to go is just add a class attribute and define the class. The benefit of the class is you can target multiple elements, not just one, multiple specific elements to change the style. What's the benefit? You don't target everything on the page, like the element name selector, and you don't target this one, like the ID. You target whatever you want, as long as the class name is written on each as an attribute to each of these elements. Let's write a class name for the lowering ifs and thaks here. Class, and then you give it any name you want. Let's say, let's call it bold. Let's suppose that every element that has the class bold will add here to bold text. Let's define it here in the CSS. If you want to define a selector for a class, you have to start with a dot. Remember, hash is ID, dot is class. Class attribute, bold. What this means is go through the document, find the element whose class attribute includes bold, the name bold. I said include because you can have an element with multiple class names. That's also possible. You just separate them of a space like this. If you have a space, that's a different class name. There are three classes here, bold, like, and this. Be careful of that. In any case, I just want to have one class. To change the font size, sorry, to change it, the font to be bold, the property is font weight. Since we already know how to research what proper names to use, I'm not going to tell you much. I'm going to go faster now. The font weight you can use bold. If you want to find out more about the different values, just look it up yourself later after the class. You can see that now the text is bold and the color duller there. What if I want to make duller also bold? The same style here, for some reason. All I have to do is add a class with the same name so that duller will also become bold. That's the benefit of class. Whatever you want to become bold or any other style, you make it that way. This is all nice, but I want to rename this to let's call it title and the other one subtitle. That way you can style it differently. For the title, I want the font text to be bold. Make sure the dot title here corresponds to this one. Then I'm going to add another one outside subtitle. I think the font size was smaller. If you want to find out the font size, you can use the dev tools. Right-click, inspect, and you can always see what's the computer font size. Click to see the default browser. It starts at 16px, the default. I can make it maybe 14, something like that, smaller. You can go here in the dev tools, try it out for yourself, font-size. Then you can start off with, let's try 20px. It's like that. It can go up with the up arrow key, or it can go down. It's 16 by default. If you want to make it like 18. Anyway, I want to actually change the other text, not this one. I want to keep this 16, and I want to click on the lower one and change font-size. Let's try 14. This is what it looks like. It's slightly smaller. Let's add that to our code, 14 pixels. I think the font is a little bit different. It looks like some sans-serif font. I don't know specifically which one, but to make it a little bit better, we can go here and change font-family. That's how you change the font. You give the name of the font, like Arial. Or you can give, if you want, Burdenna and so on. But if you have a different name, you have a front name with multiple names, like Times, New Roman, make sure to add quotes. Otherwise, the computer is going to think you have different things. That's why I have quotes saying, hey, this is one thing, not different thing. That's not Times and New and Roman, three separate things. Always put quotes there, if you're unsure. But in any case, if you want a generic, any font will do. You can just do something like sans-serif. This means use whatever sans-serif type of font you have here. If you want the serif, it's just serif. And if you try to use whatever, it's probably going to use Times and New Roman. In any case, I think that font looks like sans-serif. I don't know. Anyway, we don't have time to find out specifically what font they're using, but you can take this here. Now, you might have noticed that it uses font size for this and that. So you could either make a different class and apply it here, or you could target the whole container div to have the same font. Let me teach you how to do another class here, so that you can learn that an element can have more than one class. So let's call this dot card text. How about that? And whoever has the class card dash text will get font family sans-serif. So if I want these two divs to have that sans-serif, I go here, add another class, put a space between card dash text. So that way this element will adopt font family sans-serif. And if I want the same for Dolor here, put a space after that class name, say card dash text. So as you can see, this element has two class names, title and card dash text. Notice how I put a dash separating the names? That's because if I have a space, it will interpret as different class names. Card is not the same as text, two different class names. So you want to make sure to add a dash to make sure this is one thing, not two separate things. And yeah, click run, it'll be like that. Now to add the space around the card or the container, we have to talk about the box model. So let's do that very quick. Open DevTools, I will inspect this box. Let me make this bigger for you. And I'm going to click this tab layout and Firefox. It might be different in Chrome. So just click there until you scroll down. If you see a box, that's the right place, box model. Let me know if it's a different name in Chrome. Anyway, this box model will tell you if you ever forget how to, what each space type is. So we have the content of the element here. And then we have some space surrounding it. That's the padding, space inside. And then we have the border. And then we have the margin, that's the space outside. Okay, so margin is space outside. Then we've got a border and then padding the space inside. And then the content. Now if you ever forget, just go here, box model in your search engine. That's the keyword. Anyway, you can play around. Here, let's add a border. Border, 2px, solid yellow. I'm going fast because we've got to finish this. Let me put red. Now you notice this property name has multiple values separated by space. So that's also possible in CSS. So this is like a shorthand value that comprises of multiple properties being applied at the same time. In this case, it's the border dash width, border dash style, and the border dash color, all in one here. So 2px for the width, you can increase with up and down arrow. And then the solid for the type of border, and then the color red. And click outside. So that's color, you understand that. That's border, right? You understand border. Now what about padding? If I click and say padding and start up 1px and keep increasing, this is the space around the element but inside. Okay, space inside. If I increase it, there's more and more space inside from the border to the element content. So this applies to top, right, bottom, and left. Okay. There are actually CSS properties that are separate for each of these. And this padding property is a shorthand. That's actually changing the padding top, padding right, padding bottom, and padding left all at the same time. Okay. Now I think maybe 16 would be kind of similar to what they're doing there. There in this card here for the doper claimers artist. So I think 16 for the padding. All right. Now the margin is the space outside. So if I put margin here, 1px and keep increasing, you can see it's getting squeezed inward because that's the space surrounding outside. It's increasing. That's called the margin. All right. Now the margin that I see here is between two cards. So actually you could have a margin to the right of maybe, I think it's 16, the same as the padding here. So if you want that, you can actually change this to just having a margin on the right by making in the margin right property. Now it's hard to see if you uncheck, you see I added some space to the right. This is before, this is after. So that's what they're doing. I think it's 16 if my eyes are not mistaken. Anyway, they don't have border, right? So I just put a border here. So you understand the difference between margin outside and padding inside. So I'm actually going to remove the border. But before I do that, you notice there are, the card is a little bit rounded at the edges. So that's because they have a border radius despite having no border. So we can do start 1px and increase it. Remember if increase it gets more like a circle. And I think that's too much. We have only subtle 4px. I don't know if you can see it here. It's like maybe eight between four and eight. I don't know. You could try it out and see if it's similar. This is eight. And if I remove this thing here, that's what it looks like. Maybe less. You tell me about four, maybe six. Anyway, you get the point of border radius to round it. Let's copy all of this into our CSS. Now that's for the div, right? That's the card. So make sure you go to the div selector body here and paste it there. Okay, div. Now click run to save it. And this is like that. Now, why is there a space here between them? Oh, you see what happened? Why? Why is there space? Because the problem of using selectors of the element name is every single div will have the same style here. So that's the problem I was talking about. If I use, we should try to avoid using element name for the selector. Now I made a bug, right? So to change that, I do use a class or an ID for the first one. So if I use class, let's change it to this dot. Let's call it card. So for the div here, I add a class, make it card. Click run. Now I fix the problem. You can see the other text now is like before. Now something you notice, there's too much space to the right inside. I don't like that. So to control that, we can change the width of the card. So you can go here and say width and specify any way if you want. I think it looks like it might be, I don't know, 200 less than 300. Let's try 300. Oh, that's actually not. Let's try on 50. That's what it looks like on 50. So maybe 150 or a little less, 120. I don't know. This text is probably going to be longer if you have an artist name and if a song name. So you probably want to leave room for that and make it bigger. Now they also make it, what else? We have that some space between the text, right? There's a little bit of space between one of the other. And also the image is not so close to the text. So you can use a margin bottom for the image. There's also always different ways to go about the spacing. You can use the image and put margin at the bottom or you can use a text and put margin at the top at different ways. So if you go by the image here with the hash first image, you can add some margin to the bottom. Let's try 8px and the text won't be so close in the bottom. You can see it pushed down a little bit. And then you can do the same for this text, Lauren Ipsen. Remember, that's the title. That's the class we use specifically for that. So you can add a margin bottom as well of 8 pixels. And I'll push the lower a little bit down. Now one thing I noticed is maybe the image is kind of centered. So if you want to do that, there are different ways to go about doing that. The image by itself here by default is inline. So if you make that a block and use text align center, maybe it changes center. Or you can enclose it in a div and then center the thing. So there are different ways. Let's try this. Click the image here. And if you go computed, browser style, display, it's actually a block here. Did we make a block? Yeah, we made a block, sorry. Let's try, we already made a block because we wrote display block here. Let's try text align on this. I was wondering if it would change. No, it wouldn't. Let's see. If we put a container, maybe it would. I don't want to get ahead. There's a way to do it very easily with what's called display flex. If you ever heard of flex box. But basically, let me show you here. Let's do just a bonus, but it might be too much for you. If I put in a div here, enclosing the image. And I will call this at a class, call it hard image container. And then I go here and define that dot, dot means class, hard image container. And then I make that display flex like this. And the display would be changed to flex. What did I do here? I made a mistake. I forgot to close the quotes. Click run. Now it's back there. Nothing happens. But if I do here and add another property called this justify content to center, I can put the image there. So display flex changes it to flex box instead of display block. And then just find content to control the alignment on the main axis. Main axis in this case, it flows from left to right because the flex direction is row. So if you do that, it centers it. You can try other values. If I delete this and press down, you could try the other ones like and flex and start and so on. But the one I'm interested in is center. So with that said, I can copy this into card image container. So that's center like that. Okay. And we're kind of out of time. So I think I will leave you at that and open for questions.