Today, I'll be talking about cascading style sheets. And we have so far learned about HTML, hypertech markup language to structure a document, a web page. But so far, it's very, you know, not so pretty. So we got to add some styles and make it colorful, like the websites we have today. So that's when we got cascading style sheets. That's going to allow us to do that. And the concept is very simple. We're going to tell through code what we want to select in the document to style in a specific way. And that specific way we got is determined by properties and their values. For example, if I want to change the color of the text, I'm going to say color is black. Or if I want to change the background color of an element, I'm going to say background color, say red color. So it's always like that. We have pairs of property names and values. So the property will change a certain aspect, feel and look of the document, of the specific elements that you select. And then the value will be the, for example, in the case of color, it could be black, yellow, and all the color spectrum. In the case of spacing, it's going to be the size or amount of spacing you're going to add, maybe surrounding the element to the right, to the left, top or bottom, and so on. Okay, enough of that. Like I said, this, we are picking up from the HTML code that we already wrote in the repository here, this one, post stack web dev 3 in the mdk attack world organization on github.com. So I'm going to share my visual studio code. Here I have open full stack web dev 3. And if you remember, got to read me, and we got the folder SRC, which stands for source code. And I organize on my index, my news and my signing page. And if I want to, let's go back to index. And if I want to preview, I click view command palette or type, control shift P, show preview internal browser. And I should have that on site. Or you can also open an external browser. And I'll probably do that later because it's more powerful for us to use the developer tools. Okay, so let's find something to style. Maybe the hello world. I want to change the text color about that. Something simple. Now, how do we go about doing that? There are different ways, okay? So I'll just tell you the different ways. And then at the end, we'll do the best practice is what people generally use. So the easiest way is through HTML attribute. So let's say I have this paragraph, hello world. And I want to make the text color red. So what I would do is go to the open tag and add an attribute called style, okay? And you can see here, a visual studio code. When I type style gives me some documentation pop over, which is really nice. That's one of the features has you can read about that. In any case, this attribute has a value. So we say equal sign, double quotes, and then type the value and then close the double quotes. Now the value here can see visual studio code is so nice that it lets me know what I can change in terms of style. So these are the CSS property names that we can use to modify the look and feel of this element. So that's why it's nice using visual studio code because you can find out all these properties without even looking it up. So there's there are suggestions. Anyway, the one we want is color. This property name will allow us to change the text color of an element. Now in CSS, we write the property name and then we have to follow with a colon, the two dots. And then we have to say a value, okay? As you can see, visual studio code also suggests a couple of color values. So one way you can specify a color is through a color name. And we got all of these and you can see conveniently it has all the color squares. So let me I just want red like this. And then when we finish the key colon value pair, we have to always finish off of the semicolon, okay, the point and the comma, semicolon, okay, don't forget that that's always the syntax for CSS. And then if you notice on the right hand side, it immediately made Hello World have the red color for the text. Okay, so what you're going to see is usually people like to add a space after the colon just for the sake of readability, but you don't have to have it. Okay. And by the way, this square thing is is a feature from visual studio code. If you use notepad or any plain text editor, you're not going to see that. Okay, it's not really part of the code. It's just a, a, a made, it's a color picker from visual studio code that's very convenient. So if you click that, it allows you to change the color without you having to remember its name or its code. So you can see if I pick this purple like it will already write the color code there for me. And this RGB just stands for red, green and blue. And we can talk more about that later. Okay, but I'm going to revert control Z to what we had before, which is this red. Okay. So style attribute is one way of changing the style or CSS properties. If you need to add more, you just start typing after the semicolon. Okay. So for example, if I want to change the background color of the hello world paragraph, I would just say background dash color. And then that's the property name. And if you notice, there's a dash between the words in CSS property names, we always name the words, they separate with a dash, but don't put space. Okay. In programming in general, we don't want to put space, otherwise the computer will think it's two separate things. So background dash color, it's always this pattern and all lowercase. It matters. Okay. So colon, now we need a value and let's say yellow and then semicolon to finish it off. Okay. Always like that property name, colon, value, semicolon, and then it can go on and on to keep typing more and more properties that will modify it and look and feel of this specific element. If you can see the color on the right hand side, the background is yellow and the text color is red. Now you might, somebody asked, can you put the hex color code? Yes. So if you're aware of typing hex color values, you can just type hash and then type the six digits. For example, for red, it would be FF00000. Okay. I didn't talk about this, but the person who was familiar with hex values, you can. Okay. So you noticed how the highlight yellow for the background color is going beyond the words, right? And the reason for that is because this element paragraph has a CSS property that it's called display and the value is block, which means it will try to take over the whole row or line. It doesn't matter. And then that's, remember yesterday we learned about forms and we learned how to put a div to make the kind of the second label and input go to a new line. That's precisely that. The div by default has the CSS property display set to the value block. That's why it behaves that way. So that's why you don't see the highlight ending at the word world. Of course, you can change that. That's very easy to do. You just say display property is in line, for example, and you can see the highlight is only for the words, but that has the side effect of having the link go to Yahoo, side by side, which is kind of might not be what you want. Okay. So there's that. Anyway, that is the display. We don't have to know much about that right now. So I'll just remove that. That was just a curiosity. Okay. Does that sound good so far? So you can go on and find your elements and style them. For example, the subsection here, I can add an attribute to the open tag style. Let's change the color of tags to green, semicolon, and now subsection is green, and on and on, okay? Now people don't usually, this is not the recommended way to add styles. We usually isolate them, okay, in what we call a style sheet. Now let's look at a second way of styling. So instead of having the style attribute here, we can actually go to the head of the document, and right before the ending of the head tag, we usually place what's called a style tag. And between the style tags, the open and close, we're going to write CSS, purely CSS. So for the purposes of this, I'm going to press stab to add some space in the image. And then in the case of style sheets, we have to let the browser know what we want to style, because obviously the way we did the style attribute, we knew that this is a paragraph, that's why it's associated the style with that. But if we were to isolate that in elsewhere, somewhere else, in this case, between these style tags, we have to use what's called a CSS selector. We have to write a selector. There are many different ways to select elements on the document for styling. A very simple way is just by using the element name. For example, if I say P here, that means my selector is P, therefore, all the P elements in this document will be styled in the following way. And the following is specified with the curly braces like this. So that's the syntax. We usually break a line and type one property per line. That's the visual standard for readability, but obviously you can type everything one line, but it's really hard to read. Okay, so we're going to take this code here for the paragraph, and I'm going to cut with control X, and I'm going to paste between the curly braces for the P selector there. And then I'm going to remove this style attribute, because we don't need it anymore. Now it's just P. Now you notice what's happening in the page. All the paragraphs became color red, background color yellow. And that's the problem with this selector. What you're saying here is I want all the elements whose name is P in this page or this document to have the following styles defined between the open and closing curly rays. So that's the general kind of selector, but let's make this better here. Usually we have, after we have semicolon, we break a line to make it better to visualize. So we have one property value pair per line. And usually people like to add a space after the selector, so it's better to read. Okay, and then let's try to do the same way with the other ones. And then we talk about the problem of selecting all paragraphs later. So the second one is the H2, right? So what I would do is, okay, I need to add a selector to select the H2. But keep in mind this will select all of the H2s in the page. So H2, curly braces, and then I'm going to go to line 24, cut the value for style, paste the back in H2 here, and I'll remove the style attribute. Now you can see all the H2s, subsection, right, this one. And another subsection, this one, are with color green. Before we only had the specific one, and before we only have the paragraph hello world, okay? So that's usually these kind of selectors that are simple. And they're kind of easy to use, but the problem is they're going to select everything on the page with that element name. And then you can imagine a real website, we have so many paragraphs in different sections, so many H2s in different sections, that if you use this, you're going to probably cause a regression error, a bug, you're going to break the style, make it ugly somewhere else that you intended, maybe you just focus on part of the website thinking, oh, there must be only one paragraph here, and I'm targeting them all, but it's actually there's paragraphs somewhere else, and then you change that as well. So that's why it's really bad to use these kind of selectors, so I don't recommend it. Unless you know what you're doing, it's a very simple page with small things. Anyway, that's the second way of defining the style. So typically, for every page, you would go to the head, and then before the ending tag, you add the style like this. Now let's talk about the third way of, and the best way of defining style, and that's by separating this in another file. So typically, we have HTML files for the structure, and we have CSS files for the styles, so we separate them, okay, that's the best practice. So what we're going to do here is the following, under the source folder, I'm going to create a file, right click, new file, let's call it index.css, okay, I like to name it the same name as my page that I'm styling, so that's intuitive, okay, this is the CSS file for the index page, the extensions.css, let me put this down, I'm going to right click here on the tab, and I'm going to split down so that we can see both files at the same time. So what it does is Visual Studio Code will open the file in the bottom panel, and then I can go click the top panel and then go back to index by clicking the index tab. That way I can see the index CSS in the bottom, index.html on the top, so what I'm going to do is going to take whatever is between style tags, I'm going to cut, control X, I'm going to paste into index.css here, and then I'm going to go back to index.html, remove the style tags. Now we need to, a way to link these two files, we need the way to take the CSS and inject into our page somehow, and to do that we use the link tag, okay, the same place right before the end of the head tag, we add the link tag like this. Now this link tag needs an attribute, one attribute is rl, and the value is style sheet like this, style sheet together. The second attribute is the href, which is, needs to point to the file of the style sheet, in this case it's the file index.css, and then you can close this. The link tag itself closing, which means you don't have to have a corresponding closing link tag, okay. You notice the styles of the right hand side are changed back accordingly, right, let me save both files, okay. So the best practice for defining CSS is isolating the separate file, CSS file, and linking through the link tag in the HTML document right before the end of the head tag with a link element here, with attributes rl for style sheet, style sheet, and href has to change the file name for the CSS. Okay, now let's talk about fixing the problem of targeting all the paragraphs, we don't want to do that. Let's say I only want the paragraph hello world to be targeted to have the styles changed. One way you can approach this is if you change the selector to something that's more specific, that's just one and only one thing. And the way we can do that is by selecting by the element id attribute. So you're going to go to the P in line 13 that has the hello world, go to the open tag, right hand side of its name, we're going to add an attribute, call it id. The id attribute is a unique identifier that only this element and only this element will have. There can be no other element with the same name. So you can find any arbitrary name that you want. I can say hello world paragraph, or it can be short as short as I want. And notice how I separate the words with a dash. If you put a space, don't do that because it's going to think there's two separate things. So never put spaces. So you can either put them all together, or if you like separating words put a dash, for example, underscore also works, I always recommend lower case and dashed. That's the simplest, okay. Now that we have an id, we can use that to target this element in CSS. So we're going to go back to the CSS file, line one, where we have the selector for all the p's. What you're going to say is hash, and the hash means I want to select an element whose id is the following, and we're going to say the same id, hello dash world dash paragraph. And what's doing it, it's only matching this paragraph for styling with the color red and background color yellow, okay. So that's the way you can style only one thing unique specific. If you have questions, let me know in a Zoom chat. If you're using Visual Studio Code, it has a very nice feature that if I get my mouse pointer, for example, you see this h2 selector here, I hover, I leave the pointer over the h2 selector. It tells me information about that. And what this is telling me is that this selector will target all the tags h2. So all elements h2 will have the following styles. And if I go hover over this hello world paragraph, you see what's saying now, it's saying this is going to target or select all the elements whose id attribute is hello dash world dash paragraph. So this is a really powerful feature in case you forget about selectors, or you are unsure, you don't know what this selector is doing. So just hover and understand what's doing. So there are many kinds of selectors, and it can become very complex and complicated. But this is the most simplest ways we can think about. Okay, now I'm going to talk about another way of selecting things, and that's pretty much the standard way that everybody does it. It's the safe way. If you ever forget about selectors, just remember this one that I'm going to teach you. And that's how to select by the class attribute. Let's suppose I have these two paragraphs, line 17, 18. I think there's these ones here under the subsection. I want both of them to have a color, let's say, color blue for the text. How would I do that? Well, I know it can target by selector P, but if I do P, all of the P's will change, not only these two. So that's not good. I just taught you how to select a specific one. So you could add an id to this one, and then an id to this one that's different. And then you would write the two things here. I don't think that's a good approach because you're repeating yourself in that sense that it's the same kind of generic style. So if you find yourself wanting to style more than one thing, an arbitrary thing, you're going to add what's called a class attribute. So what we're going to do is you go to the P, the first P, add a class. The class, you have to give it a descriptive name for what the style is going to do. It could either be the subsection paragraph, or you can think of the style as a generic class, like if you want a class to always add a color blue, you can call it a blue text, something like that. So there's two ways of naming, right? So let's do subsection paragraph. I know I'm typing really long text, but you don't have to type it long, okay? It's just I want to be descriptive. Okay, now let's do the same for the second one. We're going to add the same class. Subsection dash paragraph. Okay, now we got these two elements of the same class. Now we can target them here. Let's add outside the curly rays, a new selector. And to select my class is dot, subsection dash paragraph. And I want these to have following styles between the curly rays, and color is blue, color colon, blue semicolon. Now you can see the two paragraphs under subsection now have text color blue. And that's because remember the feature I taught you, hover over the mouse here, what does it tell you? Oh, this selector is saying, select the elements whose class is subsection dash paragraph, which is precisely these two. So class is pretty much the standard way of styling. If you want to practice best practice, you forget everything about selectors. The safest choice is just pretty much just add a class to the element, and then you define the class selector with a dot and then the name of the class. Just remember that if you forget everything, okay? And the reason for this is using classes is because it's really powerful, because you can write your own classes, definitions, and other people can use the class names to style their website. So you can write the whole design system thing, and the other person that wants to use it, all they have to do is add a class name to the elements. They don't have to write it themselves, so you don't have to write things from scratch. So that's why maybe, I don't know if you notice with, I don't know how long it's been using the internet, but there's some point where websites started to look very much alike, the buttons and everything. And the reason for that is because they're using the same design systems, the same style sheets that somebody else wrote. And one of the most popular ones is called Bootstrap. And I'll just show you just out of curiosity what it looks like. So Bootstrap, this one here, getbootstrap.com. So pretty much Bootstrap is CSS classes, the style sheet that somebody else already wrote. They wrote all the class definitions. So if you were, for example, I want a button for my website, but I don't want to write the CSS from scratch. And I just go here under components and look at this. All they have are these buttons that are colorful. How can I use this? Well, all you have to do is link the Bootstrap style sheet, that is, they have a file that they wrote, right? Remember, use the link tag to link to your HTML file. And then all you have to do is define the class attribute for whatever element you want. So the class has to be btn. And then there's another class for the specific coloring, okay? By the way, if you want to add multiple classes, that's totally possible and just add a space between them. That's why I'm always telling you, don't use space for ID because it treats the separate things. That's the case for classes. If you need to add multiple classes, you separate with a space here. So if you were to, I want this button danger for my website. All you have to do is add the class to your button called a btn and btn danger. These two classes will make it this styling, okay? I know somebody joined, if you're kind of lost, you don't know about where the search code is. Let me know. I can just recap for you. So basically, doing a recap, we are, let me show you here, we are working based off the code from this page. I paste in the Zoom chat if you don't have the code, and you can click source, and this is all the code that we're using. Click code and download here if you don't know how to use GitHub. And yeah, anywhere on Visual Studio Code right now. And I've been using the, I clicked the index file, I created index.css, and I put it here in the bottom, index.css, index.html at the top, and I click view command palette, and show preview. That's a live preview extension that I installed by clicking this extension, and then search for live preview here, and you install this from Microsoft. I'm going to go back to Explorer. Okay, I suppose everybody's on page, on the same page, so if not, let me know if I have any questions. Okay, learn, I'll select by the element names, but that's bad because select all of the elements. We learn select one specific one byte ID, but that can only be used for one. And then we learn the breast practice, which is just adding a class attribute and defining it. And remember, if you want to select by ID as hash, select by classes dot prefix. And there's always the hover feature from VS Code that allows you to remember what that's selecting. Okay. Now, let's see what we can do here. We got that. Oh, yeah, let's do some stuff here. How about we talk about fonts, how about that? Oh, or actually, I have to tell you about DevTools. Yeah. Let's talk about DevTools, and then fonts, I'll choose a different font and other stuff. So, I'm going to open an external browser. Let's use Chrome. Here's my Chrome, and I have to open that file index dot HTML. Let me copy the path to you. Here's the file. I'm in Chrome right now, and I have to zoom just so you can see better. So I zoomed in. Okay, so I'm going to open the DevTools by pressing F, the key F12. If you don't know how to press that, usually, if you're using a laptop, it's the FN and then F12. Or you can right-click anywhere, Inspect. Now, the DevTools is a way to debug your application, your website, and it's very powerful. As we're going to see, I need to refresh, save my files. Let's see. There you go. I refresh. I forget to save my file. So, let's debug or investigate the CSS properties of the Hello World paragraph. So let's see. I'm in a website. I want to find out how do they add these colors for the background, for the text. Let's assume I don't know, right? I right-click and Inspect. The DevTools in Chrome will show you the elements tab and then the styles on the right-hand side. If you're in Firefox, it's going to the different name, but it's the same function. So, you highlight this paragraph, click that. It's highlighted, selected. On the right-hand side, we see all the CSS properties. We can see that there's a selector with a hash, which means by ID. That's the one we typed, right? We wrote that. And then there's the default user agent style sheet. That's the default styles. Every browser has a default CSS style for all the elements. So by default, it has all these property value pairs. So let's talk about colors. Just like Visual Studio Code, you can go here. Let's say I don't like the red color. You can click here, this square or color wheel, and you can pick a different one. And you can see in real time that it's changing there in the content. So you can try out different colors. Oh, this is really bad. Oh, this is white. It's black. It's a really powerful feature. And then you pick the color. Oh, I like this. You can copy this code. There are different ways to represent colors. So I'll talk about that in a bit, but click outside and that's going to change it. Now, you want to make sure every time you change the DevTools to copy this back, so you can click this color code, Ctrl-C. Then you go back to your original code and you got to paste it there. I think here, right? Index.CSS, paste it there so it's blue. And the reason for that is the DevTools, everything is not, is impermanent. It will be wiped out. So if you refresh the page, you get it like it was originally. So be very careful. If you use DevTools, always remember to copy whatever you change back to your original source code. Back into DevTools here. So another powerful feature is this checkbox next to the property name. What it does is disables the property. So you can see what it looks like before the property and after the property is applied. So before the color is just black, the default. And with the colors blue, same thing for background color. If you uncheck that, there's no longer background color applied. And then you click back to see what it looks like after. So it's very useful to debug and calibrate and find out what colors you want to use for your website. So you just play around here and see what you like. Okay, so another powerful feature of the DevTools is you can try out new styles. You see this element.style you can click here and actually start typing properties. Let's say I want to change the font size to be bigger. So you might be asked, I don't know the name of the property. And that's the very common problem as we are beginners to CSS. We don't know the property name, so we have to find out and learn about them. One way is you can do a search, go to your favorite search engine, how to increase font size in CSS. Or you can do the same with artificial intelligence, AI, chat tool like chat GPT, or GitHub, co-pilot, whatever you use these days. Another way is for the DevTools, you can start guessing things. Maybe I want to change the font size, right? That's related to font. Maybe when I start typing font here, it will suggest me feature all these property names. And I know CSS is very, there's a pattern for everything. So if you want to change something related to the font, most likely the name will be font-something. So you can see here, it's letting me know size right away, right? So it really reads my mind. So that's the one, but if it didn't tell me that, I would have to go through all of these and try to guess the names by typing. But yeah, it's font-size. And then I press tab in my keyboard and to type the value. You can see I don't have to type the colon there. The value, you can try out these ones that are suggested. I can press my keyboard down arrow to sample through all these values. Or I can press up to go up. And it's very powerful because it allows me to see every single value what it does. Oh, okay, this is really, really large. Okay, but I don't want to use any of those. Actually, I want a size by the pixel. So we can specify a value. If you have to use Microsoft Word or any other word processor, there's the font size is the number, right? That's in pixels. So let's say 20, and then we have to always say px. That's the unit. You can see what it looks like there. If you don't like, if you think it's too small or too big, use your keyboard down and up to calibrate. For example, I want it bigger. Let's try 21. I press up in the keyboard, press up, press up, and keep going. Oh, okay, that's too big for me. Maybe I want it smaller. I press down. Okay, about 24. And then remember, copy this back into your original code. You can either remember to copy 24, or you can copy the whole thing by highlighting, like click and highlight, and then control C. On Mac, it might be command C, right? On Mac, if you're using Mac. Let's go back to visual studio code, and I will paste that back into, I think, which one was the hello world, right? And that's selected by the ID here. So make sure you always know which selector you're talking about. Don't go like blind and see whatever. You have to know, okay, it's this one that's selected hello world. So I have to type it here, like that. And I have it on the side. Now, if I be wondering, does the order of the properties here matter? Not really. You can kind of move this around and be the same. As long as you're always following the syntax, property name, colon, value, semicolon, everything will just come into place, no matter where they are. By the way, in visual studio code, if you want to move lines, it's alt, up or down error. That's the hot key. Alt, up or down. Some people, like ordering by the alphabetically, like B comes before C, F, and so on, you can do that. There's a nice feature in VS code that you can highlight these three lines, control, shift, B to bring up command palette, and it can type sort, and it will sort for you. It's a very nice feature. Okay, now let's talk about the color codes, right? Somebody mentioned the hacks before. So what's the deal with the color? I see color names, I see this hash, I see the RGB. So let's go back to Chrome. By the way, do you have to save the file and refresh if you want to see the actual thing that we typed? Let me save it. All my files, refresh, and I see on the side the swan size now there. Okay, what about color? So you see a color here. Let's click the color wheel. You can see the value here is in hacks. So if you click this up and down Chevron, there's different ways you can represent colors. The most popular way is hacks, this one, but you can do by the name, right? You can do red, and that's the color name, simple. The second way is hacks. We start with pound sign, and you have to type six digits. Now these six digits are written in base 16. We usually count numbers in base 10, right? We have 10 digits, 0, 1, 2, all the way through 9, right? The symbols. Now when you do hacks, it's going to be 16 of those symbols. But you might think, okay, what's after 9? There's no symbol for that number. They call it A. So after 9 is A, and then B, C, D, E, and F. So we have 16. So that's why the digits you're going to see letters as well. Now the digits are split into three parts. The first two is the red, the middle two is the green, and the last two is the blue. Remember RGB, have you ever heard of that RGB keyboard? It's just that red, green, and blue. You can build any color by combining the values of those. So let's try red. Red is basically you want the maximum value for red, which in hacks would be FF. Okay, that's the equivalent of base 10, 255. If you're confused about all of this, look it up later on your own. Base 10 versus base 16. It's just math, okay? Anyway, FF is just 255. The maximum value allowed for red. And then for blue, I don't want any. And then for green, I don't want any. Sorry, RGB, RGB, red. Green is zero, zero. I don't want any. And then blue is zero, zero. Okay, what if I want green? Well, I want red to be zero, zero. Green to be FF, the maximum, and blue to be zero, zero. And what if I want blue? Well, red is zero, zero. Green, zero, zero. And then blue is FF. And obviously if you want to combine all these colors, you can put whatever values here. For us humans, it's really hard to go by the number like two, two, three, three. What is that? Okay, that's the blue. That's why it's very nice to click here on this. And you can see the code changing for the red, green, and blue values. All right, so we don't want to be typing this stuff. Just choose from the color wheel. And that's hex. Now, you might think, hex is too complicated for me. Can we just do base 10? Yes. Let's go back, click here, and find RGB. See that RGB? Now it separates everything into RGB. And the A is for, it's called alpha for transparency. So red can go from zero to 255. So if you want full red, 255 red, zero green, zero blue. This is the equivalent of ff 0000 in hex, hexadecimal. Likewise, for red, zero, green, 255, zero blue is green. And then 00255 is blue. And then you click outside and it's going to write like this. And you can copy that. If you think it's easier to represent colors that way. You can see the RGB parentheses, the R value separated with the space. Red, red, green, and blue. Then you can copy that. I think sometimes you can put a, I think you can also put a comma separating them. Like zero, comma, zero, comma, 255. Okay, so that's colors. You can always look up more on your own. If it was a bit confusing. All right. So let's talk about fonts as a bonus. How do I change the font? Well, we're going to use font family here. So let's do the paragraph. Let's do this, some arbitrary thing just temporarily. Okay. Let's say this other paragraph that I don't have any class. So I can try out in the dev tools. Let's try font dash family. That's the one to change the font. And then you can specify for the value the name of the font. For example, aerial. And you can see a turn to aerial there. I don't know if you notice, but if I click the checkbox, that's before. That's after. See this one here before after. And if you don't, if you, you cannot specify family of fonts like sons dash serif, which means it will pick an arbitrary font that the system has. That's of a type son serif, like aerial. And then if you want serif, it will pick an arbitrary serif font like times new Roman. Okay. Let's copy this into our original code. Okay. But the problem is there's no class here for this paragraph. So we're going to create one. So let's go back to the code. Find your HTML file. Find that paragraph. This one line 15 at a class. Give it her name. Let's call it lower MP paragraph, whatever. Now go to the index.css file. You're going to say dot because we're targeting a class element starts with the following class name, Lauren dash paragraph, curly braces, they're going to paste font family serif. Somebody asked, can you input any font family or does it have to be saved in our font book? Yeah. So the person who is seeing your website, they have the fonts. They might not have the font. So if I say serif, it's their computer will pick an arbitrary font. That's default for serif. In most cases, it's times new Roman. Everybody has that times new Roman. If you do not sun serif, it will the system for the person who is seeing the website will pick whatever they have for sun serif, which most cases aerial. Okay. Now, if you want to be specific about the font, like let's say comic sons, you can type it like this type the name of the font with quotes. I always tell you to use double quotes to enclose the font name because the font name might have spaces. And if you have spaces that will be treated as separate things unless you put the quotes. So make sure there's also quotes surrounding the font name and put a comma here to separate with sun serif. What's doing here is there's a fallback. The person who's looking at the website, their system will look for the comic sons and mess font. If they have the font, great. It will show it in that font. Otherwise, they don't have the font. It will fall back to the right hand side of the comma, which is sun serif, which means pick any arbitrary sun serif font. Okay. So that's why it's important to always add a fallback here of a comma in case they don't have that font. I obviously have it because Laura Ibsen is kind of funky, the childish font. Okay. Now, if you want to add like a font and always make sure that the user will have that font, I'm going to teach you right now. And with Google Fonts. Let's go to the browser and go to Google Fonts. It's fonts.google.com and you can pick any of these fonts. As an example, I'm going to pick Montserrat. I scroll down Montserrat and I can click get font on the top right. And click get embed code. The first panel here, I'm going to copy the link tags. Okay. These are the link tags. I'm going to copy them, control C, or you can click copy code. Then I'm going to go back to my source code. What I'm going to do is go to the index HTML before my head. You see the head before my link style sheet here, I'll add those links based. So I have three. And what this is doing is it's linking to Google's fonts for Montserrat. Somebody else already wrote the CSS for this associating with the fonts and everything. So all I have to do is specify the font name as it sat in the Google website. So I would go here, let's say, let's add Montserrat under quotes and comma. So what this is doing is, okay, we included, we linked that Montserrat font. So it's available to this specific page, the index page only. So from the index page, I can use the name Montserrat for my font family. I can change it here accordingly. And that's how you always, anybody can always have that font because they will download from these links. And that's how you do fonts. If you link the font, you still need to put a backup. I would say so, yes, because I don't know, for some reason, Google servers go down or they remove the font. They will no longer be available. There's actually font file that's somewhere in somebody's computer that we are linking or downloading that. But if so, some reason that computer fails or is gone forever, that's why you always going to have fallback, no matter what. So here it's going to fall back. If there's no Montserrat, it's going to look for Comic Sans. If there's no Comic Sans, it's going to look for any Sans Serif the system has. Okay, now mind you, these fonts are only available to indexes.html. So if you try to do styling for news and sign in, they do not have it. You have to basically manually add to the head. It's kind of repetitive. So you have to add to the head as well. And if you want to add CSS, you've got to link it for these other pages. Okay, so if you want to use this for the other pages, copy the links, go to news, under the head, before the end, paste it, save, go to sign in and do it for every page you have. Under the head, before the end, paste it, save. Now you can use it if you're going to style anything on those pages. Also make sure you have to link another style sheet to those pages. You can either create a specific style sheet for each page, or you can reuse another one. Okay, it doesn't matter. Usually you don't want to be repeating yourself, writing the same styles over and over. So if you have some class that's kind of generic, you can link that CSS file to use it. Okay, to finish it off, I'll teach you a fun how to add icons, just for fun. And we're going to use what's called font awesome. Basically, somebody else wrote the CSS to build these icons, so you don't have to do it yourself. So that's why classes are very powerful. Writing classes, you can reuse somebody else's work, so you don't have to reinvent the wheel. So for font awesome, it's basically the same way. I'm going to be quick. Basically, you can go to font awesome website and look up the doctor's dish how to do it. I'll just teach you very quick. All we have to do is add this link. I pasted a Zoom chat. So here we're going to add the after the Google one before our custom. We're going to paste that link tag that's real style sheet to the font awesome CSS file, which is in this location. I paste the Zoom chat. And with this we have icons available in this web page. So how do we use them? Basically, we use the tag called I. Okay, so let's go here. Let's say we now add section one and one icon. I'm going to go section one. You see the H one right in the beginning when I add an icon. So I'm going to open the itag and I'm going to close it, but we have to add a class here. And this class, the first class is F a and then the second is a specific class for a specific icon. And we don't know the name because we got a little copy in the website. So but you can get something like car. We show a car. And let's see book. There's a book. So basically there's two classes. The first is F a, which is kind of the base class that all of them have to have. And the second class, you can add another class by separating it with a space is F a dash book, which is the specific one for the book icon. So it can be F a car F a book. I don't know if they have loading. Let's see. They don't have loading. Let me show you how I can find out these names. I'm using first you got to make sure I'm using version 4.7 of font awesome look in the href 4.7. And you have to look the documentation for 4.7. So going to the browser. Let's see. Let's go to font awesome.com. What are you going to do is click icons. I think this is version. I don't know if it's the version for I got to be careful. I got to be careful here. Let's see. Let me look version 4.7 icons just be more specific. I guess they are 4.7. Oh, this website here. Yeah, I got to say slash before slash icons. The reason I do this is because there's different versions of the same thing. And they might have different icons and different class names. So if you're using the different version is probably not going to work the same way. So you always want to make sure when you read a code documentation that you know your software version and that the documentation is the same version that you're using. Okay, this 4.7. I'm going to these are all the icons so you can just look up here can search maybe I want to find something about loading. Do I have an icon for loading? Oh, it's called spinner so I can click that f a dash spinner and it tells me how to write the code here like this. There's the class f a and f a spinner. They have this area hidden attribute that's for screen readers because screen readers you don't have to show the icon so they hide it from being read or something that. Okay, let's go back. And add f a. Where is it. If I put spinner it will show me like that. Obviously, it's not a good icon for that but you just use whatever I think book is better right but I was just giving you an example how you found out the name of the icon. Maybe book is better. And it can add space after. And by the way, if you had more than one space. It doesn't, it doesn't change it right because in usually HTML, a space is collapse if multiple spaces that collapse into one in the actual document that people see. So that's why that doesn't really work if I have multiple to add space there. Just one works. Okay, and that's it. I think we'll call it a lesson.