- Hi, welcome back. In this demonstration, we'll be learning a new language to build Web pages, called CSS which stands for Cascading Style Sheets. As you may have guessed, CSS is used to add style to your Web pages. At the moment, our Web page doesn't look very exciting, in fact, I'll even go as far as to say it looks a bit boring. I've made some changes to the HTML example in the previous videos, but largely, it's the same. I've added another H2 heading, plus some text underneath. To start with CSS we need to return to the head of our page. Remember, this is where we put our useful tags which influence the rest of our Web page. When we add the Style tag here, we can now add the rules which can be rolled out across the Web page, be it fonts, shapes, or colors. A few spaces underneath, I'll add a forward slash Style tag so I know everything I enter will be rolled out. I'm going to start by changing the color of the H2 headings across the entire page. To do this, I type H2 followed by an open new shape bracket. It's curved with a point in the middle. A couple lines down, I'll put a closed shape bracket. Now the computer is waiting for me to tell it something. I can add our declarations. I'll now type color: and then the color I want. Let's go with blue as a test. Click Save and refresh. Great, but don't think blue works. Let's try green. Save and refresh. Right, that looks much better. A lot of Web pages you visit have different color backgrounds instead of plain white, so let's change ours. To start, we stay in the Style tag and then type body, followed by our new brackets. As we're changing our background color, that's what we need to type: background-color: and then the color we want. Let's see what blue looks like. Click Save and refresh. Wow, not very nice. Okay, I'll try teal now. Save and refresh, that looks much better. Our match is quite near to our logo. The H2 heading doesn't look very good now, so I'll change its color to something a bit brighter. Let's change from green to white. Save and refresh. Great, much clearer. Now we've played around with the H2s and our background, you can see that adding color is quite straightforward and the steps are the same if you want to change the color of your text. All we do is add a P in our Style tag to start. Remember, P represents our paragraphs or texts on the page. We follow the same approach, add our brackets followed by color and then whatever we want. Let's choose pink. Click Save and refresh. Okay, that didn't work. If we review our code, we can immediately see the issue. I've spelled color the British way, with a U. The program doesn't recognize this, so I'll need to remove the U in color. Now let's Save and refresh, again. There we have it, some nice pink text on our teal background. You may have noticed our list hasn't changed color. Well, that's because we've told the computer to only change the color of the text, not any lists. Our lists are in the OL tag, so we need to start with OL brackets color:pink. Let's Save and refresh. Great. We can see that the text changes to what we want. Easy. Our other list hasn't changed, that's because it's in the UL tag, so we'll need to do the same thing. I type UL brackets color:pink. Save and refresh and there we are. Let's consider if we want to change a block of text background color, not the whole Web page. This is useful if you have multiple pieces of information on a page you want to visually separate. Well, the same rules apply. We type P brackets background-color: and then gray, for an example. Click Save and refresh. There we go. I know it looks a bit crazy at the moment with a teal background, gray text background, and pink text, but this is just to show you how to use these tags. I'm sure you can create something much nicer. As you can see, we have multiple Ps on our page. What if we wanted to change a color of the text or background for just one of these? Well, we need to give CSS an ID to look for. To do this, I go to a P tag and type space ID = quotations, and then our ID. I'll put QA-information. You can't put a space in your ID so make sure you use something to break up your words, like I have. We return back to the top in the Style tag and put a hash symbol followed by our ID, QA-information followed by our brackets. Now we can add the background color. Let's go with white. Save and refresh to see what happens and there it is, a block of text with a different background color. You can use IDs in lots of tags, so be sure to experiment. Finally, we need to speak about classes. We use classes when we want something to be implemented across multiple parts of our Web page. For example, what if I wanted more than one paragraph to be colored? Well, we can't use an ID more than once, so this is where our class is useful. Creating a class is very similar to an ID. Let's remove the ID tag and type class- quotations and then what you need your class to be. I'm going to say QA-information. Now I need to go to all the paragraphs I want this update to be made on. I type the same class information in the P tags. Great, now we'll return to our Style tag at the top. First, let's remove the ID tag as we don't need this anymore. Next, we add a full stop, then the class name. So full stop, QA-information brackets. You can probably guess what happens next. And there we go. Our class attribute has ensured we only change the colors of certain paragraphs on the page. There we have it, some basic CSS skills to get your Web page looking the way you want it. Now I know this Web page doesn't look very appealing, but I hope you can see that with a bit of practice, you can master these skills to make the best Website possible. Be sure to give these a go. See you soon.