As I said, we'll be practicing the examples in this website, jsphoto.net, and we'll talk about CSS today, Cascading Style Sheets. Last session I talked about HTML, hypertext markup language. That's how we build websites, the document structure, and everything. Today is more about the styles, the visuals, so Cascading Style Sheets is what we use to modify the styles of a document. Any website you see today in the browser, be it in your phone or computer, is going to be written in HTML, CSS, and some JavaScript. So let's start off with a paragraph in the HTML. If you don't know about jsphoto, we have the HTML panel, where you can write the code in HTML. You have the CSS panel here on the right-hand side, where you can type CSS, you can type JavaScript, and then to see the result, you click Run on the top left, and you can see in the bottom right the result. You can change this layout clicking Settings if you want to like, choose a different layout for you. I'm going to keep classic. Okay, so we got a paragraph here. You remember French HTML, we could create elements with tags. We have an opening tag, a closing tag, and in between the tags we want to show for the paragraph. Always the opening tag has the name of the element within the angle brackets, and then the closing tag, the same thing except we have the slash before the element name. In this case, the element name is P, which stands for paragraph. Now let's say I want to style this paragraph and change its color. So what I would do is first I need to go to the CSS tab here, start writing some code, but I need to say, okay, what do you want to style? So I have to use a selector. So if I say P like this, that means I want to target all of the P elements in this document. Now you have to specify the styles within the curly braces. So you're going to write some curly braces there, and we're going to type some code between the opening and the closing. Now I added some space after the P, that's just for style, you don't need that. And I added a new line, also don't need that. But usually we like to make it more readable. That's why I do that. So the proper CSS always works the same way. We have the selector, what we want to target, and then we have the styles, which are pairs of property, colon, value, semicolon, and you can separate, you can add multiple ones. So the property for the text color is just called color. And the syntax, you have to have a colon there, and then the value, for example, red. And then you finish it off with a semicolon. Now the property is color, the value is red. The colon and the semicolon are because of syntax, you always have to have them. I usually like to place a space after the colon just to better visualize it, but it's not necessary. So when I click run in the top left, I can see, if you can see colors, that the paragraph change color from black to red. So you can play around and change when you call it like, make it green, like that. Okay, now I'm going to talk about background color. We learned how to change the color of the text. What about the background? Now that's easy. Just say background dash color. So to add another property to target all the piece, you can just type it here next to it or before. So if you type background color, colon, remember, it's always the same thing. Name of the property, colon, type of value and semicolon. I can say, let's say the background color, let's do black, semicolon, by click run, you can see the background's turned black. So you know, paragraph, background color is now black. Now this is okay to have it next to each other, but it's a little bit harder for us to see. So for styling purposes, the computer doesn't care. It's more for us when we read the code. I like to always have one property pair per line. So I'm going to break a line there. And like I told you before, I always like to have a space after the colon. It works the same way. We will not have any effect on what we see, the outcome. Okay, so summarizing again, first you need to target something in the document. When you say the name of the element, that means all of the elements that are P in this document will have the following property specified between the opening or closing curly braces. We always write the property name colon value semicolon, and then repeat as needed. Let's talk about other properties. Let's align this text here in the center, and it might be hard for you to see, let me change the color to red. So to align the text, the name of the properties text dash align. And then the value is several values, one of them is center. So notice when we write CSS properties, we separate the words by a dash, and they're always lowercase, that's a naming convention, they'll always be like that in CSS. Now click run, you can see now that the paragraph is centered about this whole line. So the paragraph itself, it takes space of the whole row, the line. And if you want to align at the center, you use that property. Now you might be asking, okay, how do I know what CSS property to use? So there are several ways you can find out. One way is simply going and doing a search. For example, how to align text CSS in your favorite search engine. And then you can find out, okay, let's look at this. And you can figure out how, okay, they use text align here. So that's the property. Another way is using DevTools. So every browser has what's called the developer tools, in short DevTools. To open that's usually the key F12 in your keyboard. If you press F12, it will open up. If you don't know where F12 is, another way is you can right click anywhere in the browser like inspect, and it should also bring up the DevTools. Now you want to be in the elements tab or inspector. I'm using Firefox. That's why it's a little bit different from Chrome based browsers. And you can highlight the elements here. Let me make it a little bit. You can change the size here, resize the panel so I can better see. So in this left hand side, I can see the whole document structure in HTML. And then you can highlight or click the paragraph, the element I'm working on. On the right hand side, I will see under styles or rules in Firefox. That's the CSS I wrote is now here. You can see color red, background color black, and text align center. So what's nice about DevTools is I can change these properties in real time and see what it looks like right away. For example, what does it look like if I change the color of the paragraph? I can click this color and I can choose from the color palette here. Let's say I like white better. Oh, that looks better, a lot better. And then once you're satisfied with that, make sure to change your original code. Because just changing the DevTools does not actually change the document, the original thing. So make sure to always go back. Okay, I want to change the white here, all right. Now as I was saying, how to find out the property. So if you want to try out different properties, you can always go here. See this, what's where it says element? You can click there between the opening and closing and start typing properties to see if there's anything related. It will give you some suggestions. For example, I don't know how to align text. Maybe I'll search for align or maybe it's text, something, oh, text align. So there are many text dash properties. That's usually about the text. So okay, text align, that's the one. I press tab in your keyboard, tab. Now it asks for a value. So you can select from these values. That's how you find out what values are available. For example, center is right at the first, so I can choose that. Or I can choose end, what happens if I choose end? Oh, it aligns to the right, okay. So I can go here and keep choosing. You see, as I press the keyboard down arrow, I can see how it changes for every property, okay? So I can always do also the following. I can click this checkbox to see what it looks like without this property. And with that property, okay? And if you notice, this is the same property I had written. So that's, it's overriding what I wrote here. So you can see the strike through. So without is the original and then with, that is like that. Now let me see some questions. Someone said, I clicked on F12 and nothing showed up. Somebody says plus FN, F12. Yeah, so that depends on what computer you have, usually desktop. Or if you're using external keyboard, there's the F12 key. You can just press it. If you're using a laptop keyboard, you usually have to hold the key FN and then press F12. And I don't know if Max, you have the same, I think it might have the same thing. You have to press FN. Yeah, like I said, if you cannot figure that out, you can always right click anywhere in the browser. Let me show you again, right click anywhere, click inspect. And that will also bring up the dev tools. By the way, this inspect is useful because, okay, let's say I want to inspect this paragraph and see what's going on with its styles. I can right click that specific element and click inspect. And it will select it for me right here automatically. So I can see on the right hand side the styles. Okay, so that's the dev tools. Anybody have any more questions? Can you go to a particular line like a debugger? Like, okay, to just stop on a line that's causing a problem. Um, are you talking about JavaScript or? Yeah, basically. Yeah, so we're doing CSS. We're not doing JavaScript today. So, but yeah, you can do it with JavaScript. If you open the dev tools and you click debugger or whatever. Which you know of for how to debug using Google Chrome or I guess I'll Google that. Can you, can you say it again? I was wondering if there's a good tutorial for debugging using Google Chrome. And I said, I guess I can Google that. That depends on what you're debugging, right? So is it HTML, is it CSS, is it JavaScript? So every case is kind of a little bit different. So, but I showed you how can debug CSS. Simply, you go to the element you want to find out about, right click, inspect. And you can see it's highlighted here. And you can see on the right hand side, it's properties. So if you're having trouble, maybe, okay, I want to center this, but I don't know how. Or maybe it's wrong, it should be centered. So you can inspect here, see, oh, okay, there's no text aligned center here. That's why it's not centered. So if I have that here, or type it here. It will make it centered. That's the way we go about debugging CSS in real time. Okay. Any more questions? Mina asked, sad, when I inspect, I don't find the inspector. What do you mean? When you inspect, you should see the dev tools open up in the bottom or right or whatever you're aligned. But you can change if you click here. There's a way you can dock to the right. Or you can to the left or whatever. There should be an icon there. So you can change where the dev tool goes. All right. Thank you so much. It's just for some reason, I can only see elements, console, sources. But yeah, it's the same thing. So I'm using Firefox. That's why it says inspector in the tab. But for you, if you use Chrome base, it should say elements. Oh, my bad. All right. I appreciate it. Thank you. So as long as you see all the document structure and you can highlight them, it's the same thing. And the right hand side, you should see the styles. Okay. If you're using right hand, right aligned dev tools, it's probably at the bottom, the style thing. So that depends on how you like the things. You can even have a separate window. Anyway, let's keep going. I'll close the dev tools for now. Now let's talk about fonts. And for that, I'll add a new paragraph here, another paragraph. If you notice, I added another paragraph and it has the same style. So that's because I use the name of the element to target it. When you use the name of the element, all the elements in the document of the p will be targeted. Now in practice in the real world, this is really bad. Why? Because you're going to change every single element. Let's say there's new paragraph. I didn't want it to have the same style. So we're going to talk a little bit more about that later. For now, let's just talk about fonts. Let's say I want to increase the size of this text. So usually the CSS properties always start with font dash something. So in this case, it's the size. So if I say font size and we're going to use the unit pixels px. So if I say 24 px semicolon, click run, you can see now the text increases size. Okay. So you can right click that inspect again, DevTools. If you don't like that size, you can always go here. One way of doing it that I like to do is in real time, I click the 24 px. I use my keyboard down and up arrow to calibrate how big I want it. So I can go down or I can go up. And I choose the value that's most suitable to me. Once I find out the value, okay, I go back to my code and I change it here. Make sure to always change the original because the DevTools is always temporary. Okay. Let's say I like a little smaller, maybe 20. So I write it there. Let me click run again so it resets. Okay. Now let's talk about font family. The font family is basically a way for you to change the font. You know when you wrote a Word document, you can have Ario times DOOM Roman, all these different kinds of fonts. So if you want to change the font here, you can always type its name. For example, if I write Ario, it's going to change to Ario. I don't know if you noticed, but it did change the font. So usually when you have font family, I advise you to always put quotes here, double quotes. Because some font names have multiple names and the space might throw off the CSS. So if you have like Times New Roman, which has a space between the words, it makes sure to put double quotes before the name and after. So it doesn't mistake it for something different. So it doesn't mistake it for something different. I advise you to think, okay, what is Times? What is New? What is Roman? It's a separate thing. So always put double quotes there. Now you can see it changed. Let's try Comic Sans. I don't know if you know this classic kind of children like font. Comic Sans a mess. So you can play around, choose your own fonts there. Now let's talk about making something bold. And for that, I'm actually, let me, so remove this. Let me make the background color white, the color black. So it's easier for us to see and 12 px. So maybe 14. I want to make it bold. How do I do that? Now it's called a font weight. So font dash weight. Column. And now the values here, better me. You can type bold. That's one way. But it's very, you notice we can type like names, like for the colors and everything. But actually there's a more precise way of changing this. You can have like different kinds of bold. For example, it can have 600, 700. So you can write that value here. So 600 like that. Let's see 500. 500 is pretty much no bold, right? 700. Okay. So that's the point of the font. You know, some fonts have different levels of boldness. But I think 600 is like the same thing as saying bold, as a word. Okay. Now that we're on this topic, I just want to point out, there's a different way of specifying colors here. I said the name black, but there's so many colors. The spectrum is huge. There's no way we can have every single variant of a color in a name. So that's why we use what's called hex values. So let me show you here. So you always start with a pound sign, and then you're going to specify two characters for the red, two for the green, and two for the blue. RGB, if you ever heard that term RGB, that's what it means. Red, green, blue. So how red do you want this? Let's say I want very red. So I have to use hexadecimal values. If you don't know about that, I suggest you Google hexadecimal values. So basically, usually we have base tan, which we count zero through nine. And then we go back to zero as we change the digits. So hex is like zero through nine, and then it goes to A, B, C, D, E, F. So the last value is like F. So I can type FF here, which means the full red. And then if I don't want any more colors, I can say zero, zero for green. Zero, zero for blue. And if I click run, it's going to be all red. So basically, zero, zero is like zero in decimal. Basically, no such thing, no value for the color. And FF is like the maximum, in this case, maximum red. Okay, so let's say I change the first to zero, zero, and then FF. So red, green, green is the middle two. So this will be green, full green. And then finally, if I just do zero, zero, zero, zero, and then red, green, blue, blue is the last two, FF, that means fully blue. Okay, so that's the hex value for colors. You're also going to see that as well as another alternative to not having to say a specific name. Now, if you want to find out the hex color values, you can always use dev tools. Again, right click, inspect, and then go here. You see the color, click that, and you can see as you change the color here, it changes the values of the hex. So you can copy this value. Let's say you like this kind of cyan or teal. Okay, click outside, and then you copy this value, hex, and you paste it here, and then you click run. And then you have that for yourself. Basically, it's like a combination of red, green, and blue, with red being 41, green being D3, and blue D3. And you can use a calculator if you don't know hex value, like FF2, decimal. Basically, F is like, I think it's 256. Yeah, 255. You can have 256 values if you do zero through 255. So that's FF is basically 255 if you were to do decimal, which leads me to another way of satisfying the color, which is RGB. Like you can say here, RGB, and then you can specify what's the R versus the G. That's blue. The difference here is you can do decimal. Like if I do 255 comma zero comma zero, and that's going to be red, because the red, the R is just 255, which is the same as FF. Okay, and then green is zero, and then blue is zero. If you find this easier to see than hex, then you can use this. These are the decimal values. So similarly, the green would be just zero for red 255, which is the maximum value for green, and then zero for blue, and that's green. And then finally for blue is zero comma zero comma 255, and that's blue. Now the space between the comma is not necessary. I just put it to better visualizing myself. I hope that was not too much. A little bit of decimal. So this is some base 10, base 16, different ways of specifying the value of the color that you might see, but it's always RGB, red, green, blue. Somebody asked about what about EM for bold, which is about EM or font weight. So EM is another way, another unit you can specify for the size of a font. Yeah, I don't talk about it much today, but you know, we can use pixels, but there's another way called EM. It's just like a way of specifying it relative to the parent element. So H, CSS, EM, if you look it up here, find out more about it. You can look at this tutorial, for example, and it had different ways, different units. One of them is called EM and relative to the font size of the element. So two EM is like two times the size of the current. Okay, we can try it out. Like if I say two EM here, what does that look like? Looks like that. Okay. And then one EM, just like that. And then you can try it out. Okay, 1.5. Okay, it's relative unit, but I prefer have a pixel unit for out because we're beginners. So somebody asked, do you memorize all of this? You get to have a Google buddy of you everywhere. So as you do this more and more, you're going to keep some things to mind, but you might forget a few things from now and then. Like as long as you understand the concepts, you can always figure out everything else. For example, if I don't remember, I've worked with this before, but I don't remember the property name, so I can always look it up or use the DevTools like I told you. There's many ways you can refresh your memory. Even if you use like a text editor, your text editor might have some plugins that show you as you type the give suggestions to what properties might be. So that's how you remember. But the more you do it, the more you easily remember it. Like as I was saying a while ago, I have two paragraphs and all of them have the same style. But I don't want the second paragraph to have the same style as the first. How can we go about that? Now the problem with that has to do with my selector here in my CSS. When I write P, it means all the paragraphs in this document have the following styles. So in order to make only the first paragraph have these styles, I have to do a few things. So if you only have one thing that you need to change, you can assign an ID attribute to that element and then use the ID as the selector. Let me show you. Let's say the first paragraph will get those styles. So I add an ID attribute. Remember to add attributes to an element, go to the opening tag, add a space after its name, and then start typing the name of the attribute in the CSS ID. Then type equals and then double quotes, double quotes, and type the value within the quotes. In this case, I can write any unique identifier. If you give an ID has to be unique, another element cannot have the same ID. So let's say first dash paragraph, that's the ID. Now I can use this to target in CSS. So if I want to target an element by ID, I start typing a hash and then the ID, first dash paragraph. And I'm going to click run in the top left. Now you can see only the first paragraph has those styles. The second one does not adopt it. Okay, so make sure this ID is the same thing you typed for the value of the ID attribute for the paragraph here. Always start with a hash. The hash means target by ID ID. Okay, now let's say I have a third paragraph. And for some reason, I want to target the second and the third paragraph to have a different kind of style. Maybe the color is red. So I would go here, write some selector. I'm going to write like this, but I'm going to replace that later. Okay, it's not what you should write. And I want the color to be red, but only for the second and the third. Well, if I do by ID, I have to add an ID to the P here and to the P there. So that's two different separate IDs. So I'd have to type it here. So I don't want to do that. Instead, isn't there a way I can apply the same style to any element I want? Like as long as they share something common, yes, we can do classes. Okay, class name. So if I add a class attribute to the second, let's say in red. And then the class to the third P also called in red. Let's say all the elements that have the class in red will adopt the color red for its text color. So I can go here and start typing for the selector dot dot means class and then the class name in red. So this means I define a class called in red that any element that uses this class will get the color red. So that way I can choose what elements I want to be in color red. So the second and the third. So if I click run, I see only the second and third have red. Okay, so that way you can select more than one element and you can choose which ones will adopt a specific style. In practice, in the real world, we always use classes most of the time. Okay, rarely we use selector for the element name or even the ID. So most of the time just classes. And that has to do with a lot of, if you ever see websites kind of share the similar style today, that's because they use the same class since that were written by someone. Someone can come in and figure out a design system. Like okay, I want the buttons to look like this and the forms will look like this and they can write all the classes for all those styles and all you have to do is use those class names to adopt the same style in your own website. One famous framework for that is called Bootstrap. If you use Bootstrap, you're adopting the Bootstrap style, let me show you. Bootstrap, this website here and click the docs or examples. Let me show you the button one. Let's see. Components, buttons. Yeah, as I was saying, if you choose to adopt Bootstrap styles, you can include this in your website and all you have to do is use their class because there's somebody, they already wrote all the definitions for the styles in CSS. So all you have to do is use the class. So if you want something to look like maybe this blue button here, all you have to do is use the class btn followed by the other class called btn primary. Basically, they have like a base class for all buttons called btn. And if you want to change the colors, you can use a different class, additional class for primary is like blue, secondary is like this gray, and success is green, danger is red, and so on. Okay, so basically it's very useful. You don't have to write your own thing from scratch. All you have to do is copy the class name and you're good to go. All your buttons will be like that as long as you use the class. Okay, going back to Fiddle, so that's all about class. Anybody have any questions? What site are you using right now to show us this demo? What site, jsfiddle.net? Amina asks, which part do we copy and paste out of the variance on Get Bootstrap? Usually, I don't know especially what you're asking, but usually after you kind of install Bootstrap, all you have to do is assign the class. For example, if you want your buttons to look like the primary, all you have to do is add the attribute class to your element and use btn followed by btn primary. As long as you use these two, it will appear like this. Now to install Bootstrap, that's another matter. You've got to look at their documentation, introduction. They tell you how to do it. The easiest way is just copy this link. You see this one here? Copy this link element to the input it in the end of your head right before the end. But that's a little bit too advanced for this introduction. Yeah, I was like, what is this? Yeah, so you can read their guide here, follow line by line and you can do it. Maybe I'm going to close that. All right, let's give you some bonus because we were kind of at the end. Yeah, no problem. Some fun properties like text shadow. This is a cool one. You can add a shadow to the text and this one is special because if you've seen so far, the values is usually just one thing, but actually CSS properties, the value can be multiple things so long they're separated by space each. So this property takes can take several values and I'm going to write them for you here. So let's say 1px, space, 1px, space, 1px, and then I'm going to say it's black. We're going to understand what they are in a moment, but this is like a multi-value property. Meaning you can type the first value and then space. I always have a space between the values and then second, third, and then the fourth. Now, what do they mean? Let's have a look here. You see it added some sort of shadow. Let me make the text barrier on size, say 16. Say 16 pixels, better for you to see. Say 20, run. Okay, I'm going to right click that second paragraph, inspect, and let's play around it to have tools to understand what the values are. Oops. So we got the element highlighted there. So I click here and I'm going to click in each one, the first one. Okay, I'm going to press the up arrow in my keyboard and understand what that does. Okay, I'm pressing up. So the higher that value, you see the thing is moving to the right. Right, so the shadow is moving to the right. The more I have shadow, the first. So you can adjust it here. So this is like the X offset. So if you want it to the left, just make it negative. You can go down, down, down, see? Negative value. Okay, let's make it, I don't know, to the left by three. Nice. Now what's the second one? You can go use the keyboard or I'm pressing right arrow to move in my cursor to go to the second value there. And it can increase that and understand what it means. Oh, if I increase it, it goes down, the shadow, the black shadow. If I decrease it, it goes up. So if it's negative, it's like it goes up from the original. Okay, maybe I like it down by three like that. Now the third value here, if you move there, is like the blur. You can see if I increase it, it's more, it's blurred. You see, you can barely understand what it's saying in the shadow. The more you have, okay, so that's the blur. So you can calibrate it. If you decrease it, it'll be clearer for you to see what the text is. No blur is zero. If you increase to one, it's a little blurry and then it keeps going. Maybe I like it like this. Maybe I like it like this, or I can barely understand what the shadow is, but that looks cool. And finally, the last value is for the color. If I click outside and you can click the color thing circle, I can try different colors to see how it looks like. So you can pick whatever you want, what do you think looks good for you, your use case. Okay, green. That's like green. And always remember, once you're done with this, you like this, copy the value here, or the whole property. You can highlight the whole thing, actually, and control C to copy or right click to copy. So make sure to copy this and go back to your code and paste that. Don't forget, because depth tool is always temporary, if you refresh, it's gone. Okay, so that stacks shadow. Now there's also box shadow. And can you guess what it does? Let's do that for the first paragraph. I'm going to go to the first paragraph. I'm going to add a new property here called box shadow. Let me decrease this so you can see the text. So similarly, we can do the same here, box shadow. You can have offset x and then add y, the blur and the color. Let's try just one pixel each and then we can calibrate and click run. Because there's some line there, it's a bit weird, but let's see. So if I inspect that, another way you can inspect something when the depth tool is already open is you can click this mouse pointer that's on a square, usually on the top left. And then you click the element that you want to select and then it will highlight it for you here under the elements tab in the Chrome or Inspector Firefox. And I can go here on the right hand side, scroll down to my box shadow, and I can play around the first one of my mouse. So the first one, like I said, it's x offset. I don't know if you see if I make this bigger here. Actually, it doesn't matter because the thing is taking over the whole line. So it's the offset there. Maybe it's easier for you to see when the element doesn't occupy the whole line. So let me just do something real quick. I'll change the display to inline block. So it doesn't occupy the whole line, so it's better for us to see. Okay, now go back to box shadow here. I'm going to change the first one is the x. If you want the shadow, the box shadow to go to the right to increase it. If you want the y there, let's do 10 for x offset and then 10 for y. And then the third is like the blur, same thing as text shadow. It kind of blurs the thing the more I have it. And it doesn't become like a zero is like a real rectangle. A box. And then as you increase it, it becomes a little bit blurry. So that looks cooler, more interesting. And then you can choose the color here. Now this one looks weird because I add a background color white instead of transparent. So let me remove that. And you can see it will look better. Maybe. Oh, you see every fresh without copying my property. So I lost them. I'm like, let me type it here. So don't forget to copy them over before you refresh. Then 10 three like that. Okay. And then you can choose the color like we did for text shadow. We could play around and make it better than what I have here. All right. Anybody have any questions? That's text shadow box shadow. And again, if you don't remember them, just look it up how to make text shadow, how to make box shadow. And then good website is MDN. I like to reference this a lot. MDN Mozilla developer network. You always find something useful there. Usually when you search for something, it probably on the top results. Like if I see back shadow, it'll give me lots of examples to try and click here and see what it looks like. And this is what the code looks like. And then I can go down for the syntax. What, what do these all property means? Like I told you offset X, Y, learn color if you do it this way. You realize it can give different values, not just for it can be different ways. And this is what it means. And scroll down, it'll talk more about in depth about the values, what they are, what they mean, and then more documentation here. And you can see some simple examples with the code and everything. I think you can change the code like play or something.