Today, I'll talk about cascading in style sheets, CSS, and what's the, why do we use CSS? Well, if you go on a browser today, your phone, your computer, you're accessing a website. A website is built on the core of HTML, hypertext markup language, and that was created to share scientific documents. And then some people wanted to make it pretty. How can we make the document pretty, change the colors, you know, move things around, position in different ways, add spacing between elements and text and image and so on. They created CSS. That's what we're going to talk about today. The third element that you need for a website or a web application today is JavaScript, and that's for another lecture, but JavaScript would allow you to manipulate the document and make it interactive and dynamic. So today, let's focus on the style. I'm using this environment here, JSfiddle.net. Maybe at the end, I'll teach you how you can copy this code to your local machine to run your own browser instead. So this environment, JSfiddle.net, make paste a link if you haven't, very simple. Click run at the top left, and you see the output in the bottom right. This is for the default layout. You don't like this layout for some reason, click settings in the top right, and choose a different one. You see how they change the background? Anyway, I'll keep classic. One thing I always like to do, if I am a beginner, I would uncheck auto-close HTML tags and auto-close brackets for the sake of teaching this beginner class, but if you like auto-completion and you're comfortable with that, you can keep it. Anyway, for those who are really beginner to HTML, maybe it's better to manually type everything, and then you get used to it and you can enable that. That's just my hint. You don't have to follow it. Anyway, we have the HTML panel here where we write the HTML, and let's say, all right, hello world, paragraph, and then I have another one. This is another paragraph. Click run at the top left, and you'll see it will manifest here. Then we write CSS in the CSS panel, and then JavaScript here in the bottom. We'll focus on HTML, CSS today. Okay, so CSS, make things pretty. Change colors, color of the text, color of the background, change the font size, all that stuff. Add some spacing around something, push some element to the side, push an element to another line. So let's start off with the most basic one. It's just changing the text color. Now, to change something in the document, you have to let CSS know, okay, this is the document HTML, what you want to change in this document. In the real world in practice, a website has so many elements, right? There's so much text, images, video, audio, it's everywhere. So you need to find a way to narrow it down to a specific thing that you want to change your style, or multiple similar things. And CSS, the most basic way is we start by writing what's called the selector. For example, if I want all these paragraphs to have color red, I'll type P, that's the name of the element. So this means I want all elements P, and then you have to determine what are the styles. And you do that with curly braces, open curly brace, and then you close it, and you type the rules between them. For example, the property is color, I know by memory, and colon, and then red, semicolon. So the anatomy is the following. You need the selector, and then curly brace, and then type all your property and value pairs. In this case, the property is color, and then by syntax, I need a colon, and then a value, and then finish off with a semicolon there. And then when you're done with all the definitions, you close the curly brace. Now if I click run, you're going to see all the paragraphs have turned red, if you can see the color red. Now notice I put this in a different line, but everything can be in one single line. Obviously that's very hard to read. So what people do is we usually add some spacing after the selector name, and then break a line and add an indentation, which is basically space to the beginning of the line, at least two. And then it's going to be a property colon space value, semicolon, and then if you need more, you add to a new line. And then you finish off with the curly brace, aligning with the selector here. Now let's say I want to change the background color of these paragraph elements. So I'll do basically either before or after I can add another definition, like background dash color. Let's make it yellow, semicolon. You can see the background is turning yellow, for every single paragraph. Let me know if you have any questions, I'm going to slow or to fast. I know some people might already know all this stuff, so okay, so this is pretty much how CSS goes. We have a selector, and we have all the property and values. And you pretty much do this, repeat the same pattern, you just got to remember the syntax of the curly brace colon after property name, and semicolon at the end. And then you can add more selector and curly braces outside. Now the selector can always change because it can narrow down to different elements, or in this case, you can see I target all the paragraphs. That's usually not a great practice, because in a real world, in a website, you're going to have maybe thousands of paragraphs, and if you target every single one of them to have the same style, you're probably going to break the styling of the website, meaning it's going to look ugly. So usually you want to target very specific elements. So there are different ways to target them, maybe we just want to target one element, or maybe just want to target specific multiple elements, but not all. So I'll talk about that next. If you just want to target, for example, the first paragraph here, one option is adding the id attribute to this paragraph. To add an attribute, go to the open tag, to the right hand side of its name, out of space, and say id, and id property here, or attribute, is something that uniquely identifies this. So there can be no other element with the same id. So you can give it a unique name and say, hello, paragraphs, dash paragraph, like that. So with that, we have a way of uniquely finding or identifying this paragraph on the page as the program is going to run through. So for the styling here, let's say I don't want all the paragraphs to be like that, just the first one. So what I would do is delete that selector, and I'm going to say start for the hash, because the hash means id. I want you to find the element whose id is the following, hello, dash, paragraph. And if I click run at the top left, you're going to see only the first paragraph has been changed. The other one is left as it was before without styling. Okay, so with the hash selector that targets, finds the element whose id is what follows the hash. And make sure you type the same characters exactly as you wrote for the value of id here in the HTML document. Now let's say I have another paragraph. Third paragraph. Lick run. For some reason, I want only the second and the third. Let me add another one, just for the sake of example. I want to style the second and third paragraph, the ones in the middle, but not the third one, not the last one and not the first one. To do that, you see I now have two things. Well, you could have added an id for the second one and id for the third one. That's one option. But that's kind of tedious to do the same thing for the similar things. So the use case for this is called using a class. So what we want to do here is add a class attribute that has the same class name. So let's say, I don't know what to call it. Let's say here, let's call it a cool paragraph. So I want the second and third. So what we're going to do is add a class called a cool paragraph separated by a dash. So I want this also to have the style of the other one. So I would add the same class name, full dash paragraph. So what I'm doing here, okay, I'm going to target all the elements that have the class cool paragraph and I want them to have the following style. So I would write in the CSS panel, I would say dot because dot means class, okay, dot is class. Find the element whose class is cool paragraph, the elements, because it could be more than one or none at all. And then curly brace and then we can define the style. Let's say, okay, let's learn a lot of property here. Maybe I want to increase the font size, you know, the font I wanted bigger. So the property here would be font dash size. And then colon, and then you can put the value like for example, 16 ex semicolon and click run. It's probably the same. So I want to increase that 21. Let me see. There you go. Now it's more. Let me make it even bigger 30 px. Now you can see it that the second and the third paragraph have changed their style. Okay, so px means pixels is the unit that we usually use to measure things. Now be asked, how do you know all these properties? Well, I know by memory because I have experience, but if you don't know, that's totally fine. There are different ways you can find out what they are. The very simple way is just go and make us do a search, right? I can open a new tab and go in my favorite search engine. How do I change text color in HTML or CSS? And then you can see the results here and click the first one and you're going to see text color. Okay, the color property is used to set the color of the text. So that's the one you would use. This particular website, W30 school is very good that you can click here, try for yourself, and the left-hand side is code that you can change, and the right-hand side is the manifestation of that. So if you click run, I'll see that. For example, if I change the color here to red, you're going to see the text change red there. So it's very nice. So that's one way of finding out property names in CSS. So pretty much CSS, most of the time, it's going to be found you trying to find out what properties you have to use to accomplish what you need to do, okay? And another way that I'm going to show you is using what's called the DevTools, the developer tools. That's very useful. So if you go on a browser, press F12 in your keyboard. If here is a laptop, you might have to press the FN function at the same time as F12. If you cannot figure that out for some reason, right click anywhere on the screen, click inspect. That also brings it up. Now what's nice about DevTools, let me show you here, make this better here, is I can inspect things and see what's going on. For example, we just changed these paragraphs, and I would like to know what made these change to this font to get bigger. Well I could go here, see this pointer, I can click that and point to that, click, and it's now going to be selected here under this tab, the document object model. This is like the live document view. If you're on a Chrome or on a Chromium base, it's going to say elements in the tab. Right now I'm using Firefox, so it says inspector. In this layout, my right hand side will have all the rules in Firefox or styles on Chrome, and I can see here that's this element that's selected. It has the class cool paragraph applied to it. So another way of finding out about what classes this has is obviously you can read it here, you can see the class here, or you can click this .cls and it will show you all the classes and you can even add new ones here if you type it and press enter. So what's cool about this is I can uncheck that to see what it looks like if I remove the class. You see, if I remove the class, the text becomes smaller there. So if I put it back, it's like that. Now if you can see, I'm going to hide that. .cool paragraph here, there's also the definition that we had written up there, so you can see font size 30 pixels. There are many functionalities here, let's go one by one. So like I said, the checkbox is if you want to see what looks like before and after the property is applied. So before is unchecked, no font size 30, yes font size 30. So you can see real time what it looks like. And another thing that's nice is, okay, what if I don't like this font size, what I just want to find the perfect font size. And what you can do is click the font size here, the value, and press in your keyboard in the upper down arrow. For example, if I think it's too big, I'm going to go down one, two, and keep going all the way until you think it looks nice. Okay, maybe I think 22 looks nice, so that's it. And remember, changes that I make on the dev tools are temporary. If you refresh the website, they're all lost, okay, and these are only for you, nobody else will see the effect of those changes in the dev tools. Make sure to copy this back into your original code, if you can highlight this, and Ctrl C on Windows or Command C on Mac, and you can paste it back in the code that we had. And make sure you also, you always copy back to the original, otherwise you're going to lose your dev tool experiments changes. Okay, so far, so good. Let me know if you have questions. All right, okay, so, like I said, I was talking about different ways of finding out what property names are, and one other way is using the dev tools. And I could go here, you see this element thing, I can click there between the curly braces, and I can actually start typing a CSS property, for example, if I start type font and dash, I'm going to see multiple things that's recommended. And these are all CSS properties, maybe I'm looking for something about maybe I want to make it bold, bold is usually called weight of the font, so maybe something weight, no, maybe because it's related to the font, you notice the pattern CSS, if something is related to fonts, probably it's going to start a font dash. And then what if it's font dash weight? That seems to be it for press tab, it will move to the value placeholder here. So you can press down on your keyboard to test out different property. This is inherit value, this is bold, okay, bold, maybe that's what I'm looking for, let's try the other ones, okay, lighter, they all seem the same to me, yes, I think bold might be the one, so press enter, and now I can get it, and this is before, remember after if I uncheck and check, okay, this is the property I want, I couldn't copy that into my code here, okay, you can see CSS is a lot of patterns, anything related to fonts is probably going to be font dash something, okay, so that's one way, obviously nowadays we have artificial intelligence AI chatbots, you can ask that as well, what's the CSS property to change, whatever, okay, nice, so let's talk about spacing box model, because it's very important to know that, let's see, so we talk about the selectors ID class, and then element name, let's talk about box model, so you notice here when I highlight in the dev tools, I highlight this paragraph, there's some space surrounding at the top, in the bottom, and you know the browser, every browser has some default CSS styles, so you're going to see this like that, that's because of the default, but what is that spacing, well, if I click in Firefox, computer is a computer or layout, I think, in Chrome, it's one of these tabs in Chrome, you're going to find this box model, let me know if you cannot find it, so under layout in Firefox, box model, if you scroll down, so when you have an element, you're going to have the space inside the border, and the space outside, now because this is a little bit harder for you to see, let's add a bar as to this paragraph, so I'm going to go to rules, and click here, temporarily just add border, now this border property is a shorthand for multiple properties at the same time, there's also this in CSS, as you can see there's so many bar properties, so if you don't want to type one by one separately, you can use the shorthand, which is this border, but the catch with that is you have to provide more than one value, because this needs to know, okay, what's the width of the border, what's the style, and what's the color, so first I got to tell what's the width, let's try two px, two pixels, and then if separate the values of the space, and then select the color, let's try that one, and then finally, you add the, oh sorry, the color is at the last, you have to put the style here, solid, and that color is not very good, let me put black, you have legs better there, okay, so this is a special shorthand, and it takes more than one value, so you're going to see that a lot in CSS, a property can not only take once, specific value could take two, three, or four, and they're all separated by space, so the first one would be the border width, so if I press up here, it goes increase, and down, and the second one is the type, it could be solid, it could be like dashed, for example, dashed is like that, put it back solid, and then the color, you can put any color you want, black, red, or whatever, notice here, when I clicked outside, there's a color circle here, that's another very nice feature of the dev tools, you can find out what colors you're looking for by clicking this, and it will bring out this color picker, and if you don't like that color, you can try it out in real time, see what it looks like, as you're changing here, maybe like the blue, you see in the background, the water is changing, maybe like that, and so on, okay, and you can also click this color picker, and if you want to pick any color on the screen, you can choose, maybe like this color, and I don't know what the name or code is, I can click there, you see that, on the top left, I click that, and it will pick the color for me, now I've noticed this color doesn't have a name, it's like a some sort of code, now if you see a hash, that's a color code in the hexadecimal, for short hex color code, and it's just a way to define the value for the color, now this is equivalent to the base 10, because this is like base 16, if you want to look into the math, look up hexadecimal, base 16, something like that, so what this means is the first two digits, it's just the red value, and then the next two is green, and the last two is blue, so if you ever heard of RGB, that's where it comes from, it's just a way to compose colors, you specify the value for red, for green, and for blue, and in the case of hacks, the values go from, it's like digits go from zero to nine, and then after nine is like A, B, C, all the way to F, so if you want like a full red here, you would have to say F, and then F, and then the other would be zero, zero, zero, zero, because F, F means the full value for red, if you translate this to base 10, it would be 255, because you could have a value from zero to 255, and this is red, and if you want just green, you would do basically zero, zero for red, and F, F for green, and you can see it's green, and then if you want blue, just basically zero, zero, zero, zero, and then F, F, which means full blue, now if you combine them, it's going to be different colors, right, if I put VD, and 13, it's some other color there. Anyway, I hope you understand this, there are different ways in CSS to specify color, first I started with the color name, but obviously the color spectrum is pretty much infinite, and if you want to, what if I want like this color, I don't have a name for it, so I have to have a code, and, okay, so let's keep going here. You have any questions, let me know. I was talking about the box model, going back to this layout here, if I highlight the second paragraph, you're going to see there's some, there might be some space inside, there's the border, and there's the space outside, now what you see if you can see the red, yellow color highlighted in the content, that's actually the margin, you can see on this side here, margin, it says 22 on the top, zero on the right, and then 22 on the bottom, and zero on the left, now you're going to see this a lot, this pattern of dash top, dash right, dash bottom, and dash left, okay, you're going to see that a lot, and if you look at the space inside, there's nothing right now, it's just zero for the padding, but that's called the padding. Now let's play around and add space, so if I want to add space inside the element between the border and the content, that's called padding, so I can say padding, and then for the value I can specify, let's start with one px, now what this does is it adds padding to the top, right, bottom, and left, so if I increase pressing up on the keyboard, you're going to see it increases right, the space inside, and if I press down it decreases, so this is called the padding, okay, the space inside the element between the content and the border, now obviously this property is changing all of them, if you just want to change, let me uncheck this, I just want padding on the top, I could use the property padding, dash top, and then I put one and I keep increasing to select the desired one, okay, so if you want on the right, padding right, and then the value, obviously here you're not seeing anything because there's no text line on the right, but if I highlight it, you can see the purple color there, it's the padding, so you can see there's some on the right, let me do padding left, and at 24 you can see that the text is pushed because I added padding to the left, some space there, and then finally padding bottom, and let's add 24, like that, so I added to the bottom, now you're going to see this pattern a lot, I'm good, I'm trying to repeat to you, dash top, dash right, dash left, that bottom, it's not only for padding, it's going to have it for margin, for border, and so on, always the same kind of terminology, anyway, so if you don't want to type them all at the same like separately, like I said, you can always use the padding shorthand, and this one can take one value, which means all of them, top, right, left, and bottom, or if you want just two, you can do that as well, let's see what it looks like, press 16, space 16, remember, when we have multiple values separated from space, what is this doing, let's see, if I change the first one, do you notice what's changing, that's the top and bottom, and then if you have the second one, if I decrease or increase, that's changing left and right, okay, so if you put two values for padding, the first one is top bottom, and the second one is left, right, okay, and so it goes on, if you don't remember these stuff, you can always do what I did here, and experiment, increase and decrease, and see what happens, and you can also look at the documentation, let me show you how, so let's go here, so that was the padding, right, so padding, CSS, I would search for that, and a very good resource is MDN, the Mozilla Developer Network, this is a very nice website, I'll paste it to you on the Zoom chat, it is a documentation that you can learn more about the property, and you can see there's one value, two values, three, four, what they all look like here, and there's an example, now if you scroll down, you can see this property is a shorthand for the following CSS properties, like I told you, padding top, right, bottom, and left, and then if you look at the syntax, this is where it tells you what each of the value means, for example, if I only have one value here, it means apply to all four sides, if I have two values like I just did, it means the first one is top and bottom, and then the second is left and right, and then so on, you have like three and have four, can read there, very useful website, if you have any trouble, want to learn more about CSS, just go here, and you can even search within the website or use your search engine, and I should point this to this website as the top results. Anyway, going back here, so that's padding, that's the space inside, let's learn about margin, that's the space outside, so let me add, let me actually decrease the padding, because it's just too much, let me put just eight, eight on the top and bottom, and maybe 16 on the sides, now what is margin, let's try it out, if you don't remember margin batting, just go on the dev tools and type it here, and see what happens, let's add one px, press up, and see what's going on, you see that it's getting squeezed, and that's because we're adding space outside, surrounding the element, so as they increase, increase, I'm going to have space surrounding it, so obviously I'm exaggerated here, so you can clearly see what's going on, so if I hover over the dev tools, I can see the yellow highlight, that's the margin, the space outside, okay, so the purple is the padding, yellow is the margin, always the outside, and like I said, you can use margin top, margin right, margin left, margin bottom, we just like padding, if you want to do them separately, or you can use different two values here, let's see what happens, if I have two values, the first one is likely going to be top and bottom, you want to guess, yes, top and bottom, and then the second is left and right, I suppose, yeah, there you go, just like padding, the same pattern, okay, so that's the box model, very useful if you want to add space, like you want to add space at the bottom of the element, between this element and the other, you can increase it, you can add a margin bottom to make space and so on, oh, now enough, that we have a basic understanding of CSS, I'd like to try this example here, so I found this website was browsing through and I think I want to do, try to imitate with CSS, how would we implement this card here, you know, and this is basically a container, a box, and then there's another box inside for the image, and then there's another box for the kind of the main content, and there's a bottom or footer box here, and then inside those boxes, we have like, maybe you can consider them small boxers inside, like that, you see, this is like how we split the user interface, you divide them into smaller and smaller parts, think of boxes, that's why I have box model, and then this box here is probably going to be split into inline elements, there are smaller side by side ones, like that, anyway, that's what I want to try to imitate, let's see how we can do that, let me remove this annotation, so let's go here, we have a box, we have the image, let's start off with that, I'm going to comment this out for the time being so you don't see it, but if you comment it out, comment is just something to make the computer ignore that, and it's with these characters, less than, explanation, dash, dash, and then dash, dash, greater than, anyway, let's put that to the side, click run, nothing happens, so we need a box, we can use any element we want, but if you want to just use generic container in HTML, that's called a div, so we can start a layout, you know, drafting everything just inside divs, that's totally fine, this is just a generic container without any particular default style, so I have a container div, meaning that whole box for the card, and inside that I have the top right, which is the image, so I'll put a div there, and open and close, and then I have the main content, I'll put a div, I hope you can see it, it's not too small, the font, see, and then the bottom is the footer, and then you see the main content, it can open up here, and it's going to be an image if you look back, so let me see, we can add an image with the image tag, last and AIMG, and then we need a source, let me give you that specific source, I'll paste it in the zoom chat, I think that's the computer source, and then close it, I should have the computer like that, if you have trouble typing all of that, I'll just paste the whole thing for you, anyway, all right, so we got the computer there, and then we have all this text, alienware, let me see, alienware 500 hertz gaming monitor, we don't have to type the same text, but for the sake of trying to look like the original, so we have this alienware gaming monitor, whatever, we can put that in a div if you want, and then we have I think Dell under it, something like that, and so on, so first we just build this structure of html, we don't care about style, and then lowest price in nine months, okay, put another div, lowest price in nine months, if you don't want to type out this text, you can put lauren ipson, you know, a random text, and then we got a dollar three nine nine nine nine, okay, nine nine nine nine, I'll just put it like this, and I'll complete the rest later if we need after discount, and I will go on, I think we have good enough draft to work with, now if you want to start on the card, you know, the outer card, right, there's a card, so pretty much what do we have here, we have, I think they have some sort of border, right, if I'm not mistaken, some sort of grayish border, and it's a little bit rounded, so let's do that, and I think the width is fixed, it's 400, I think, pixels, let's try that out, oops, so I want to style the outer div, so how will we do that, well I told you if you want to just style one thing, you can use the id, if you need multiple class, but in practice, in the real world, everybody just uses classes, okay, that's the truth, so if you need to style that, just make a class, so add a class here, let's call it card, how about that, so make a card here, and then let's write the definition here, so dot means class, right, when a target element that has elements that have the class card, so type card there, probably brace, and then you're going to say okay, remember I think the width is 400, so width is from the left to the right, for example, if I put 100 here, it's going to squeeze it, you can see the image kind of overflows, but the other things kind of squeezed, but I think it's 400, somebody asks, is it allowed to pull image source from any site, well you can do it, are you asking legally? I'm just using it for the sake of education, but I don't know about copyright or that stuff, but in HTML you can put anything, if the website doesn't want you to use their images, they can block it, there's a way of blocking it, so if this was blocked, I wouldn't be able to see it, anyway, if you don't like using this image, you can always use this website as well, Lauren, let me say pick some, or pick any image you want, this is a nice website that I find very nice when I'm working with development, you have a placeholder images, I use that, anyway, where were we? Yeah, the card, let me add a border here, remember border, let's do one pixel width, and then I want solid, and the color, I don't know color yet, we can just start black and semicolon, you can see the things surrounding it, and let's see, wonder if that width is too much, I wonder, what do you think, I think it might be too much, maybe 300, compared to that, yeah, maybe like that, or even smaller if you want, 200 pixels, maybe that's 250, anyway, just choose an arbitrary number, let's see, now you see this image kind of overflowing, that's not great, if you have problems and you don't know how to figure it out, right click, inspect, open DevTools, and try to use that to figure out what's going on, and I can see that the image is overflowing, so one way we can prevent this from happening is we can define the width and height of the image, or you can make the width just 100% to take the whole container width, that's one way, but then you would have to assume the images all have the same aspect ratio, so the image height will not be different from image to image, so you have to be careful about that, otherwise you would have cards with higher, tall, and short, tall, and short, so on, so that's not nice, so let's see if I put width here, you know for the width you can use pixels, you can decrease, or increase, or you can use 100%, like that's percent based, what it means is it takes the 100% width of the parent, of the parent, the parent is like the thing on the top here, this div contains the image, therefore the div is the parent of the image, okay, so it takes the width of the parent, it'll have 50%, it'll be 50% of the box for the parent, see, anyway I think maybe that's just go with 100 there, maybe that's all right, and make sure to copy this, now we have to copy and style that image, and we have to find a way of selecting that, let me see, what can we do, we could do ID, or we could use class, everybody just use class, let's add a class here, let's say card-image, how about that, and then we define it outside, so make sure you're outside the other one, dot card-image, and then you paste that width, now it's permanent, I can close the dev tools and finish my debugging, okay, nice, now I want to borrow some radius, so that would be on the card itself, remember, I'm targeting this outer container, that's the element of class card, so I'm using this one, make sure you're on the right selector's body here, so I want to say borrow-radius to make it rounded, so for example if I put 16px, it's really really rounded, so much so that it kind of clashes with the image background there, but the bottom is rounded, but I think this one is just six, around six, if I'm not mistaken, around six here, okay, and you see this problem, the image it's kind of, there's this problem with the image, the rounding is not being obeyed there, to fix that you can target the container of the image, I think if I add borrow-radius six, it might fix it, let me see, or if I do inside, I want to borrow radius six, yeah, I have to do on the image, so most of the time CSS, you have to trial in there, if you cannot figure out a problem, like this one that I just had, okay, why is the image background like going on top of the border, so my guess is I have to set the borrow-radius also for the things inside, so I tried first for the inner container, it didn't work, then I tried the image and it worked, so that you got to trial in there, now to make this permanent, I have card image, so I got to go there, but I think if you, I don't know if you noticed, but it's also going to add borrow-radius to the bottom of the image, so if you don't like that, you might have to do the more specific borrow-radius, I think there's, or is it borrow, there's a borrow property that you can remove that, I like this, borrow-bottom, left and right-radius, yeah, this one is background like white, you cannot see it, so it's hard for you to see, maybe if I put the background red, let me see, background red, do you see it now, the rounded in the bottom of the image, here, so if you don't like that, you have to go to the image, and like I said, add a borrow-bottom left-radius to zero to remove it, just from that corner, and then borrow-bottom right-radius is zero to remove from the right-hand side at the bottom, okay, so you can see before is uncheck, and then after, like that, okay, once you're comfortable with that, you can just go here, and copy the properties one by one, and like that, oops, oops, everything just went crazy, with the auto-complete here, that's why I usually don't like having it on, anyway, like that, so I click run, and it's like that, you see the depth tools red went away, like I told you, if you make changes to depth tools, it just goes away when you reload, and the background for the image, I don't know, it's kind of gray, but I'm not sure this image is transparent or not, I'm not sure, let me see, background red, yeah, the image is not transparent in this case, so let's leave it at is, and focus on the other things, cool, you can see there's a border at the bottom, separating the main content from the image, so we can do that as well, go here, border bottom, one px, if you go separately, it's going to be like that, and then I think I have to define border style, border bottom style, let me see, solid, maybe the color, there you go, if you want, shorthand is just border, like I said, and let's look at the content, so for the content, I see there's some space surrounding it, right, if you notice, remember there's this, if I put a box here, I think it's adding space inside the box, and that's the padding usually, right, because the outside is here, so I think which we have padding will push the content inward, so let's try that, I think that might be what, 12, 16 at most, okay, so this is the box, this div here is the main content, so I want a class there, line five, let's call it card content, you see I'm always descriptive about the things I'm naming, so it makes sense what I'm referring to, the padding is going to, let's try 16, that might be too much, maybe 12, yeah I don't know if you pick, what do you think, let me right click and inspect, this is what it looks like at 12, maybe eight, eight, I don't know, you gotta look at the drawing, sometimes you can use a ruler, or maybe usually when you do this in a company, you work with a designer, the designer comes up with the drawings and they have the measurements for you, so if you're unsure, they can help you out, or you can measure with a ruler program, usually on Mac, I think I would press command shift four and I can drag and see the width in pixels, something like that, I'll leave it at that, good enough, now you can see the text is bold right for Alienware, so we can add a class to that as well, and you keep adding classes to everything, let's call it card content title, and then define here outside, you can see CSS is just always like this, you're just adding classes and defining the class here, card content title, and finding good names to describe them, otherwise it's going to be a mess to understand, font weight, bold, I love that, like that, one thing you notice, so the font is not the same, obviously, I don't know exactly which font they're using, the typeface, and maybe you could use the software that you give a picture and it tries to identify the font, so you have to find a font that's similar to that, usually when you're working with a designer they already give you, oh you should use this font name, so here I don't really know what this font is, so we cannot change it, but if you were to change the font, we could change it, let's say I want to change the font for the whole main content, so I could go to the card content here, and the property would be font family, if I go card content, I put font family, dash family, I can put the name, for example, aerial, right, like this, and it would appear as aerial, and if you like Times New Roman, there's a cat, should add quotes around it, because there's multiple words, so usually computer thinks it's three separate words, three separate things, so I'll usually add a double quotes, so if you're unsure, I'll add the double quotes here, and this is Times New Roman, and if you don't know the font, you just want the family, like sans serif versus serif, you can add sans serif here, which is like the ones without the serif thing, like aerial, and serif would be Times New Roman family, anyway, that's how you would change the font, you notice the text is kind of wrapping to a new line, I think what they did here was put ellipses, if you want to do that, I think there's a property for that, obviously, so you have to find out what it is, so if you don't remember, again, you can do a search, how to wrap ellipses, CSS text, and then, oh, text overflow, maybe I'll try that property, let's go here and try it out, in the dev tools, I will select or point to this, and I put text overflow, I try the values, okay, let's say one, two, three, four, five, so it's not working, why is it not working? Well, let's read the docs again, maybe I have to combine with another one, this one is what we want, right, but why is it not working? Oh, look at this, to make text overflow, you have to set other CSS properties, overflow white space, so this one needs another property, this one, so that's why it's not working, so let's try it again, let me first add, maybe overflow, it in, does it work? No, it doesn't, what was the other one? White space, no wrap, maybe that's the one, white space, no wrap, oh, that's the one, let me remove overflow and see what's going on, so white space, no wrap means I don't want the text to break to a new line, so if I do that, it's going to be like that, you see, white space, no wrap, make it all appear in one line, but if I do that, there's no room, right, so it's going to overflow, meaning it's going to go beyond a container boundary, see that, now if you don't want to show that, you can hide it like that, overflow hidden, see now it's hidden, but you don't really want to hit it, you want to put a dot dot dot, you can put text overflow there, and then it puts a dot dot dot, okay, so you got to go one by one step by step to understand what's going on, so I think I like this, so I'm going to copy this, and I think what's the element here, let's see, it's the card content title, so we got to go to card content title inside, paste that, I'll paste it to you if you haven't followed, okay, click run, and nice, we solved that one, if you go back here, you notice there's some space slightly between Alienware and Dell, and to accomplish that, we can add a margin bottom, very slight margin bottom, and then between Dell and the other one, the same thing, I think it's even more, I don't know, do the same, so here if I go to point to Alienware, if I try here in the DevTools margin bottom, and I keep increasing, you see there's space between them, so that's how we space them out, I think it's very slight, maybe just four, or two, I don't know, let's do four, and I'll copy that, now that one needs to go to card content title again, and then you do the same for Dell, if I select Dell here in margin bottom, try one pixel, I think maybe a little more like six, or eight, let's try eight, now for this one, I don't have a class, so I'm going to go here where the Dev for Dell add a class, and maybe I'll call it, I don't know, brand or model, I don't know, I think this is brand, right, little card, what do you call it, content brand, or subtitle, I don't know, whatever, and here dot card content brand, paste that, and then run, you should have that, like that, and then you would follow the same pattern if you want to add space for the other ones, and we're almost out of time if you want to, if you allow me to go a little bit over so I can explain the other ones, yeah, let me just show you how to put this icon here, that's the fun part, right, this icon of the arrow going down, this is actually pretty easy, you know, there are different ways to show an icon, they could be just an image, tag, they could be a SVG element, scalable vector graphics, and for this particular one, let me see, I think it's just an image, basically what they did, they put an image and encoded it, and we can use that, I'll just paste the code for you, let me show you, it's just an image, so we go here, what was it, lowest price, before lowest price inside, right, let me break a line, we can add an image here, IMG, and the source is going to be this whole thing here, basically they created an SVG and encoded, I don't know if I give it a pass that to zoom, but that's the code for that, and if I click run, it's appearing like that, so let me see if I can close the dev tools, if we can show you, basically it's just an image with a source being this data image SVG, they have an image, they wrote with SVG, and then they encoded that in all these characters, but you can use that as a source, and it shows just like that, and if you want to set the width and height, you can do CSS or attribute HTML, if you do CSS, let's add a class here, let's call the class icon, so whenever you need to resize an icon, we add the class, and we call it dot icon here, let's do 16 pixels by 16 pixels height, so width is 16 pixels, height 16 looks like that, okay, let me know if you couldn't get the icon to work, but that's the way you do it okay, let's try to do this 399, so for the 399 there in red, we can go here, typically when we have multiple things in the same container, like 399, and there's a 6999, right, after that 699, 999, typically we put them inside span elements, this is like the generic container for inline, so I didn't explain inline versus block, but basically there's a property called display, and when you display block, it will push everything to the side, let me show you here, if I put div here, a div by default has display block, so what's going to happen is the 3999 is going to push the other one to a new line, because display is block, if you right click this inspect, you can see in the default properties, there are, if you click computed in Firefox, you click browser style and filter by display here, okay, I click computed and browser style, somewhere in Chrome is the same, but I don't know if it's the specific tab called computed, but you should click to see the browser default user agent styles, and you can filter here by display, you can see display is block, here, if I go to back to the styling here and change the display to inline, what happens, they are side by side now, okay, yeah, you're welcome, I'll try to wrap this up soon, let's just finish the 399 and that's be it, anyway, so display inline versus block, see that's the difference, display block, everything that's next to me, I don't want it pushed another line, and then display inline, you're okay to be next to me, okay, so span is by default inline, so that's why I want to use span for them, because I want everything to be on the same line, so I put span here to kind of like separate them because they're going to be styled differently, right, so this 399 is a bit weird, right, we have, I think we have to separate the 99, because we got to make them superscript, meaning the text is smaller and up there, so you likely want to separate them as well, so maybe I'll have another span, actually it could have a span inside span, that's fine, let me show you, you can have a span here for the part of 399 and then the span for the 99, if you find it hard to see, just break a line and make them separate like this, if you really find it hard to see, okay, let's style the, both of them need color red, right, so I would style the outer span, let's do, let's call it, I don't know, card content price, I would go here and say dot card content price, color red, and I would make them red, and I think I want to put the 99 at the top, so I'll style this last hard content, I don't know, superscript, and then card content superscript, and I think the property here be, let's try the dev tools, how would I style that to make it appear, like I choose 99, I think vertical align, let's try that, oh, maybe that's vertical aligned, but I need to change the font to be smaller, otherwise I cannot achieve that effect, so I can put the font size to be a little smaller than that, see that, I make it smaller, I think about 10, something like that, I don't know, what do you think, and then I change the vertical align here, let's, let's try the others, I keep pressing down, oh, this is the one super, right, so maybe super is the one that I want, like that, and this white space here is being added because I broke a line, it's kind of annoying, so probably to fix that you would have to put them in the same line, like that, anyway, I remembered what we did, so vertical align, super and what was the other thing, font size 10, so like that, see, it doesn't look quite the same, I think it's pushed down a little bit, so we'd have to do some work polishing that, but you got to adjust a bit, just separating things and breaking down, if you cannot solve a problem, break it down to smaller parts, and usually you want to structure the HTML and try to figure out all the smaller pieces, and then once you got the smaller pieces, you can style every single individual with CSS by using classes, okay, so we don't have time to do everything, but that's pretty much what we could accomplish out of that card, I hope you liked that, and with that I will finish this lecture.