In this video, I want to show an example, a practical example, on how we can use CSS to change our page. So here, we have some HTML that is already written, and what we have is basically, we have a head with a title, then we have a body, we have a div that is surrounding all my page, and this div has an id, that is window. So, we actually don't see the div there on the results, but it's there and we have the h1 that is my title, that is CSS, we have some paragraph and then down we have a list of items and some of those items has a class, named highlight on them. So, what we want to do is to use CSS to change this code. So, we won't touch HTML, we're going to change only CSS to change how the thing looks like. The first thing that we can do is actually add a style here on the top, that is my tag that I can use to write CSS. So, you see that style goes in the head section of your HTML, instead of going in the body section and here I can add my style freely. So, I can use for example h1, then I'm going to select my h1 element that is my CSS there and I'm going to change the color. So, I can do color red, and now I'm going to have a new color for my CSS. So, I didn't change the HTML, I just changed my CSS and I get a new color. So, this is one way to write your CSS. Another way would be instead of doing that, actually do directly on the h1. So, I can come here on my h1 and what I can do, is that I can add style as an attribute, and then inside style, I can add color red. So now, this should cause the same effect. Sorry, this an L, style. So, this will cause the same effect as typing on the top. There is a precedence case here, so if I have some style on the top and then I have some style here that conflicts with that, this one is going to take over the formats. So, this one is the highest priority on the format, and that's what we call inline CSS. There is a third option that is often used as well, that is what we do when we have a very long CSS, and we don't want to pollute our HTML. So, what we do is that we can add here on the top a reference to my CSS. So, I can do link and then I'm going to do rel="stylesheet", just to tell the type of things, and then I'm going to do href and type the name of my file. So, I have a file here called style.css that will contain my CSS. So now, what I can do is remove my style from here, from the h1 and then add this to my file. So, I can open my file here, and in this file I'm going to be able to type out my new CSS. So, you're gonna do the same thing that I had before h1, then I'm going to set my color to red. I'm going to save and that again, I didn't change anything, the only difference is that I specified the same thing in three different parts. So, once I have my file, I can start to add other things as well. So for example, if I want to format my window, so remember, I have a window here. I have a div with the id window, and if I want to format this div I can use the id for that. So, I can just use a pound, window, and then inside it, I can add my style. So for example, here I'm going to say that is going to have a border, and is going to be a solid border, the thickness of the line is going to be 1px and then finally, the color is going to be black. So, that's my format for my windows so I can save it. The other thing that I can do is I can move, so right now it's taking all the space that I have. So, I can add some padding to it so it doesn't touch the borders. So, first I'm going to add a margin, and it's going to be 10px. Let's save and see how it looks. So if you look at it, we see that we have the border that we just added. This is the margin, it's the distance between the element itself and the borders of my page. But what I can do as well, is changing the distance between the element itself, and the content and that's what we call padding. So, I can just come here and say that the padding is going to be 10px as well. We save and it's important to separate things by semicolon. So, CSS requires you to do that. So now, we have a distance between the border and also between the content. Another thing that I can do is that I can select my classes. So remember, that in my list of elements some of them has a class named highlight. So, I can use that to format them and we can change for example, the background color and here I'm going to use a type of color that is what we call hexadecimal. So in our case, we don't want to specify the color by name, but we want to specify the color by some code that's going to tell how much this color is going to have of red, blue, and green. So, it's a combination and we do that in hexadecimal numbers. For example, here the first number tells me how much red are going to have. So, decimal goes from 0 to F. So my case are going to have CC, that is an amount of red. So, the maximum value that I can have is FF, then I'm going to have DD of greens, and I'm going to have EE of blue, and let's see how this looks like. So I save and you see that now, I have a light blue highlighting those items that had the class highlight associated to them. So finally, I can also format my button here and right now for example, we can see that as I hover you get light bluish, but I can actually change that. So, I can use button to select any button that I have on my screen because I want all my buttons to behave similarly, and I'm going to say that when I'm over this button, so this is our selector, that's going to select this button only if the mouse is over and then I'm going to change the background of it, and you're going to make it grey. So, this is our R, G and B is going to have the exact same values and now, we can see that when i hover its light grey. So, let's make it red, so you can show off more. Now as I hover, I actually change the color of the button to red, instead of the lighter blue that I had before. So remember, CSS can be specified in three ways: one way, is the inline CSS where we and use the attribute style of the element, the other way, is on top of your HTML you can create a tag style, and write your style inside of it. Then finally, you can have a separated file where you have your CSS that's going to format your page the way you want, and you can use selectors to format the specific elements of your page using the CSS properties.
