[MUSIC] Hi and welcome to the lesson. In our last lesson, we talked about common CSS properties, and in this lesson, we'll talk about putting our CSS that we've used for various elements of our examples into one external page to see how it works. So here we have a version of a page that we've looked at a few times. We have a JavaScript function that we've used, we have our CSS starting on line seven. And you'll notice that I've removed the in line CSS from all the various elements. And I've added a table that we worked with in a previous example. So let's first look at how this page, Will appear without any CSS at all. Now this is the page without CSS. We've got our text all in the default color and default font. We've got our image at its natural size. And you probably remember seeing a number of these pieces before in other examples. Now let's look at the CSS we want to apply. I've placed it in to a file called together.css. So we have our body tag with a background color. An h1 with a color and a margin with 20 pixels. And you remember from previous lessons that pixels are the dots on your screen. So people with larger screens actually have more pixels. Then we've got a class called testClass. That mix, whatever it's applied to, have a red color and a three times normal font size. We've got a regular class for color blue and regular font size of 100%. And now we're adding CSS to our table from a previous example. Here we've got the border. We're giving it a fairly narrow border. It'll be solid and red. And we can set the width of the table, and when we set a table width, it's relative to the page. And so in this case, the table should be 90% of the page width. And returning to our example, we could see here that our table has no border and is much smaller than 90% of the page. We can apply styles specifically to the table data, which are the elements in the table, the cells. And for each of them, we're giving a border. We're making it black. We have some IDs output, Google and text on our page, which we'll go back and look at in a moment. Output will be green, with a font size that's double normal. Google will have float:left and its height specified to to 40 pixels. And finally text will have a color:blue, a font-size of 200% and it'll do clear:left. So let's look at some of these. Here our image has id of Google, And our table has no styles specified, but in the CSS, we have selectors for the table elements. Now let's see how it looks when we actually apply it. I'll give you one more look at the unstyled page. And now, go up and make sure that our file name is correct. Together.css. And we'll go to our page and refresh. And notice now, we have dramatic changes. Our image is much smaller now, so its new height changes it quite a bit, and we are using our float, and our table properties to make lots of differences. Notice that our table is now 90%. And the outside of the table has a red border, while the inside cells have a black border. So this gives you an idea of how dramatically our pages can change from plain HTML to those styled with CSS. That's all for this lesson. In our next lesson, we'll continue to look at CSS HTML and forms.