4.7 A taste of CSS - Video Tutorials & Practice Problems

<v ->In this section, we'll get our first taste</v> of cascading style sheets or CSS, the design language of the web. In particular, we'll be looking at the inline styles for the navigation menu here home HTML tags, Moby Dick. You can see here that we have the two margin styles here on the anchor tags, and then the style on the overall div that align to the text to the right. So what we're going to do is take these styles and move them into what's called an internal style sheet. We'll then take the rules from the internal style sheet and move them into an external style sheet, which is how you actually do things in real life with an industrial grade website. Let's get started with the internal style sheet. The way to do this is to use a style tag in the head of the document. All right. So what we're going to do here is take these styles and move them into here. But we have to have some way of identifying which elements to apply those styles to. And the way we'll do it is with a really important idea called a CSS class. I'm gonna cut this here. And I'm gonna give this a class name. Let's call it nav spacing. Indicates what it's supposed to do. And then the same thing here. And then in the style section here, we can paste this in. And so the way these style rules work in CSS is we say the name of the class preceded with a dot, dot nav spacing, and then curly braces. And then the same rule that appears inside the style like this. So I'll get rid of this and paste that in. So this is the same thing that we had before. This is what's known as a refactoring. We're changing the form of our code or markup without changing its function. So what happens here is the browser will automatically apply this rule to any element that has a class nav spacing. Indicated by the dot. So let's save it and see if the page is the same is required for a refactoring. There we go. You can see here, you can comment it out, save it. Now the spacing is different. You can see here, it's being applied. There's only one other style, which is this here. Now that we know how to do it, we can cut this delete the style and to give it a class, let's call it nav menu. Because that's what this is. And then appear dot nav menu based in text line right. Good. It's exactly the same. Can see this do text line left, moves it to the left, center, and so on. Notice that we've eliminated the repetition but we've introduced some too, right? The class here is repeated, but now we can change all of the style rules at the same time by editing in just one place, say making this margin left 20 pixels. So this will move it to the right cause we did this here and the spacing will be bigger. See that make it really big, like that. Finally, we'll add one extra element which actually isn't going to do anything but I just wanna show you what it is. It's called an ID. Unlike classes which can be used as many times on a page as you want. An ID has to be unique per page. Among other things, IDs are really useful when writing JavaScript but they're also useful for a technique called deep linking which is covered in one of the exercises. So let's save it. Should it be exactly the same as required. Oops, let's change this back to 20 pixels. Was it 10 pixels? Yeah There we go. As a final step we'll move these style rules into an external style sheet. As mentioned before. Conventionally external style sheets go in a separate directory called something like style sheets or CSS. So let's make a CSS directory and let's just use the name main dot TSS. This is really simple. All we do is cut these things here paste them in and then eliminate the style tag here and replace it with a link tag. Not to be confused with the anchor tag used to make regular links. This is a special tag to include an external file into the current page. For some reason you're supposed to put rel equal style sheet and then you give it an href, a hyper text reference like with an anchor tag. And then we give it the path to main dot CSS which is in this case, CSS slash main dot CSS. All right, let's save the files. Looks like it worked, and we can see this really is necessary. We can comment it out like this. Aha, the styling disappears. And now it's back. So we see here that these style rules are exactly the same as the ones in the internal style sheet, but by putting them in an external style sheet, we collect them all in one place rather than mixing them in with our HTML file. Let's make a commit. We have to add the files. We can't just do get commit dash am. We have to do add dash a. And that's it. That's a brief overview of how CSS works, this little bit of CSS, including IDs and classes is just barely enough to get started with the programming tutorial covering something like JavaScript, such as learn enough JavaScript to be dangerous. But I definitely recommend that you go further with your knowledge of CSS. It's one of the most important skills on the web and it's covered in much more detail in learn enough CSS and layout to be dangerous.