Join Bill Weinman for an in-depth discussion in this video Exploring a simple document, part of CSS for Developers.
So let's take a look at a simple document using CSS, so you can see how to implement CSS in a very simple way, keeping everything in the same file. This technique is useful just for a quickie little file that's not necessarily part of a larger site or anything like that. You just want to throw a little HTML and CSS together. So you'll see two techniques demonstrated here. One of them is the internal style sheet, which is right here. It's inside of this style tag container in there. And that's a complete style sheet.
It's a very, very small one. You'll also see some in-line styles. We'll go ahead and we'll add some styles to some tags using the Style Attribute and we'll do that in a moment. First of all, let's take a look at this internal style sheet. Here, within the Style Container is the style sheet, and this is all in CSS. You have the body selector and a div selector with an ID of content and we'll be learning the details of all this in the rest of the course.
The purpose here is just to see how to throw together a simple style sheet so that you can use CSS right away if you would like that. So in the Body Selector, this formats the body of the document, basically everything between here and the end body tag way down here. So this is often used for default styles or sometimes they are called resets. In this case, we have very little formatting. We have background color of white and we select a font family of Helvetica or Arial or any Sans-Serif font.
And so this will select them in that order. If there is something called Helvetica on your system, it will use that. If not, if there is something called Arial on your system, it will use that. If not, it will use any font that it knows is Sans Serif. Now also this margin is the margin around the body of the document. So everything that happens in the body of the document will be five pixels inset from the borders of the browser. So taking a look at this document in the browser, you'll see there are five pixels here at the top, before this border happens and this border is in the content div.
And of course, we have a white background around it as well, and that's this background color white. And then here we have div content. You'll see its width is 75% and the margin, 0 auto. That's a shortcut for saying center horizontally, but don't add any vertical margin to it. There is padding of 10 pixels and a thin, almost white, but a little bit gray, border around everything. So that's this border here and that's everything inside of there.
You see that we've got our Sans-Serif font from the body. If we wanted to, we could add a background color here and make that a little bit off-white with a little yellow tint, like that. Go ahead and save and reload that in the browser. So now you see we've formatted this content div to have this light yellow background. It's still got the gray border and everything inside of it is the same.
So that's in a nutshell how we can use the style sheet within the document inside of this style tag. Now we can also add styles to individual tags. Here, we've got a paragraph tag. If I wanted to I could change the color of the text and make it say, blue, so I say style= and put it in quotes and that allows us to add a style to an individual tag using the Style Attribute. And I can say color: blue, and that will make the text, in this paragraph only, blue.
I save that and come over here to the browser and press Reload and now we have a blue paragraph. Everything else remains the same. So just as a quick introduction to how to add style to existing documents, we've used the in-line style attribute to add style to a particular tag and we've used the style tag to add a style sheet to the document itself and that's embedded in the document rather than being in a separate style sheet.
So this is couple of simple techniques for adding CSS to an existing HTML file.
- Adding borders and backgrounds
- Choosing fonts
- Changing the color of elements
- Working with sprites
- Positioning with CSS
- Creating a menu bar
Skill Level Beginner
Q: I want to use one style sheet for a header and a menu item, one for the body, and another for the footer. Can I use a Main.css document and import header.css, body.css, and footer.css?
A: The most common way to use multiple style sheets is to use multiple <link> tags in the HTML file. If you prefer to have one <link> tag you may use CSS @import rules to import style sheets. - Keep in mind that @ rules must come before any CSS statements in your style sheet. It may be a good idea to have a .css file dedicated to @import rules only. Be aware of CSS cascading rules. Whether you are using <link> or @import, styles defined later will override earlier styles..