[MUSIC] Hi and welcome to the lesson. In the last lesson, we talked about the importance of testing our HTML. In this lesson, we'll talk about something new, adding style to our HTML. Adding style to HTML is usually referred to as Cascading Style Sheets, and it's abbreviated as CSS. There are three kinds of CSS. There's Inline, Internal, and External. Inline is the version we'll look at today, and it's actually the least desirable. It can be very messy, and hard to use and organize. External, which is usually considered the best form of CSS, is the sort that we'll look at starting in week four. So, here's a bit of HTML. It's from a previous lesson, our html2.html file. And we have here heading tag and a paragraph tag. And we'll practice adding a little style to each one of them. So the way to add an inline style is to type the word style, and notice that my editor actually recognizes style and colorizes it. After style I use an equals sign. An equals sign goes right after the word style with no spaces, and then we need double quotes. Now again, my editor fills them in for me but you can type those manually as needed. You'll need one at the start and one at the end, just like a quotation. So for this style we'll try color. And I'll use a colon, and then I'll try the color blue. And I'll finish it with a semicolon. So I have the word color, colon, and the word blue. Now we'll come back to this in a moment. Let's go look at this on the file system. And we can see here that this is turned blue and just to verify, I will remove this. So we can go back to no style, I'll save. And I'll refresh, and notice the blue color disappears. And then I'll return and I'll add that back, save. And we get a blue color for the heading. So, we can see that this style is doing that, it's adding the color. Now, let's try another one. This time we'll do one on the paragraph. So, again I'll type the word style equals, with no space and then, we'll try font-size=120. And, we'll use a percent. And, just as before, I'll finish it with a semicolon. And so now we can look at the size here. We'll take note of the size, and we'll save it. And we'll return to the browser and refresh. And we can see it got a little bigger. But just in case it wasn't dramatic enough to make the point, we can go back here and try something even larger, 200%. We'll save. And refresh, and now, actually, this is very large. So we can see with CSS, we have a way to change the color of things and a way to change the size of the font in our letters. Now we can use style to do many other things as well, including choose the kind of font and many other effects we might want for our pages. But in every case when we're using inline styles, we will use this approach that's called a key-value pair or a name-value pair where color is the name, or the key, and blue is the value. So we could, even if we wanted to, take this from here. And I'm just making a copy on my clipboard. And I'll bring this down here. So now notice for the paragraph I have one key-value or name-value pair, color:blue separated by a colon. And then end it with a semicolon and then another one, font-size as my key or name and the value is 200% with another semicolon, and I can have more of these with multiple semicolons. I'll save this and we'll go look at the effect. Notice now, that the paragraph has also turned blue. Now, of course, we don't have to use blue, we could use other colors, and we could use other sizes, and actually many other name-value pairs for the styles but these are good examples. Now you can't simply make these up. Well, of course our browsers will recognize certain name-value pairs and not others, and But the best place to get this information is on a site like W3 Schools. Occasionally you can get it from books. Or of course, you'll get lots of it from this course and to the best of my knowledge, no one knows all of the name-value pairs, and no one uses all of them in one single page. So, there are many options. You don't need to use them all, use a few to serve your purposes and now you know something about style for web pages. Now in week four, we'll be examining this in much more detail. But for our next lesson, we're going to be talking about dynamic web pages and why dynamic web pages are desirable and important for web developers.