[MUSIC] So you're doing really well with the CSS here. We can now control fonts and colors, and we can customize our links, and we're really gaining control over how our page looks in the web browser. What we're going to do now is just take a step back and consider how we can actually change the layout of the document a little bit by using margins and borders and so on. Because often you might want to add some more elaborate design elements to your page and, so this is how we're gonna do it. We're gonna actually introduce a new type of construct in CSS called Coder Class. So let's just see how that works. So instead of writing the name of a tag here what we can do is we can write anything we like. And I'm gonna call this one indent. And so you notice I've got a full stop and then name so we can basically put anything here. But, as I said, I'm gonna put .indent here, but as long as it hasn't got spaces in. And my .indent is gonna say margin-left:10px; okay? So you might be guessing already what that's gonna do. Margin-left, ten pixels, right. So it's probably gonna have a margin on the left which is ten pixels in size, right? Let's see how we can use it. I'm gonna go down into this index file here, which we're looking at on the left, and actually see if I can create some paragraphs with an indent. And this is how I do it. So if I've specified a class, now I just need to do this. Inside my p tag I've added a bit of code to tell it which class I'm gonna use. And you can see, when I reloaded the page, that actually now I have an indent in the paragraph. And let's just say we had some more text in there. And we reload. You can see that the whole of that paragraph is now indented. This might be a slightly unusual way to do it. Normally, you'd maybe indent the first line, and then after that, stop indenting. Well, we can do that too. So we can actually just specify that maybe the indent is only on here. So span class="indent" and /span. Let's see what that does. So now, I've just, sort of wrapped up the word "The" in a special indent. So did you see that? So now only the first word is indented but then the indent effects the rest of the line but then not the rest of the paragraph which is quite a neat trick. So that's kind of more how you would do typesetting in a book or something like that, you might have an indentation. It's a nice way of doing typesetting standard way. So that's using classes. And I could actually do all kinds of things and so you can imagien there's all kinds of margins you can specify. I'm gonna make a class called gap below, and that's gonna have margin-bottom:25px;. And so if I set my paragraph as being "gap_below" and I make sure I've saved both my files. Did you see that the second paragraph jumped down. So gap_below is this new class that has a margin at the bottom. So the margin is a really good way of shoving things around. And it can be really powerful. It's actually, as you'll see when we look at the bootstrap library in a later lesson, actually margins are really the way to control exactly where everything is on the page. Let's just see if we can mess around with navigation. So we can actually specify different classes of link, of course, as well. So you might want to, you don't just have to have one link type, you could actually have another link type. So we could call it greenlink. So when they hover over a green link, we do want that color, we'll do something else. So color is going to be green. So it's just to show you that you can have different types of links. And on your only selectors you can specify the hover thing as well. So let's say in my nav bar, class="green_link". And save that. Oh, no underscore, "greenlink", like that. Reload. So I've now got different types of links. You can use that maybe to differentiate the different areas of the site. So you can set classes on anything. And actually once you've defined the class, you can apply that class to a different tags. Whereas before we were just setting up the styles for say, the body tag. In which case, only the body tag can take on those styles. But with classes, with these dot class name things, we can set up styles for any bit of the text that we want. Especially when we use that span class, which allows us to cut in, put a style on just one bit of text to emphasize it or to indent it, as we saw. And we saw that we can use margins to kind of shove things around on the page. [MUSIC]
