CSS Part 2: Divs, classes, and IDs
Background
We’ve learned how to use CSS styles to format content on our webpage, and the code we’ve used is great for when you want to format all paragraphs, headers, or images. But what happens if you want to, say, distinguish among paragraphs on your page? Or break your page up into sections? That’s where divs, classes, and IDs come in handy.
I like the way my paragraphs look, but I want to create a special style for paragraphs I want to highlight. I can do this by adding an ID tag to those paragraphs.
First, on my HTML document after the tag for the paragraph I want to highlight, I type
id="highlight"
Then I create a style for that ID tag on my stylesheet by typing
#highlight
and entering styling information, just as I would for any element. The hashtag in front of “highlight” tells the browser that it refers to an ID tag.
Notice that when I refresh the page, the first paragraph is treated as before, since I haven’t labeled it “highlight.” The second paragraph, because of its ID tag, looks different.
2. Divide your page into sections with divs
The last step works well when you want to style individual elements. But what if you want to create sections on your page? Div tags come in handy for that. A div creates a new, invisible box around whatever elements it encloses, allowing you to style these elements as one block.
To label divs, use a class, which is just a way of naming an element. It’s very similar to an ID tag, except classes refer to elements that appear multiple times per page, while ID tags can be used only once per page. (In practice, this distinction gets a bit blurry, but that’s the idea. Read more about divs vs. ids here.)
Create a new div around part of your page and give it a class. Then style it on your stylesheet just as you did with the ID tag. The only difference is that instead of placing the hashtag in front of the div’s class, you’ll place a period in front of it, to indicate that it’s a class.
3. Get experimental with floats
Floats can be kind of confusing, but the idea is that if you apply a float to an element, it’ll attempt to move in that direction, pushing all of its neighbors to the side. Try it by floating one of your divs left or right.
(Read more about floats here.)
4. Taking precedence
We’re almost done, but there’s one last thing it’s important for you to know. What happens if you have contradictory styling information on your stylesheet? For example, what if you style your h1s one way at the top and another way toward the bottom? Try it.
The later style takes precedence.
5. Your browser can help you out
Every browser is equipped with an invaluable tool called an inspector (also called developer tools). When the inspector is open, you can click on any element and get information about how that element is styled.
You can even make changes to an element’s style directly from the inspector. Those changes won’t “stick,” however; the page will “reset” as soon as you refresh it.
You access the inspector in slightly different ways, depending on which browser you’re using. Here’s how to get to yours.
6. Nice work!
You’ve picked up the basics of both CSS and HTML. And really, developing the mental model of the way these technologies interact is the major hurdle. Now that you’ve done that, you can burrow more deeply into advanced CSS capabilities to learn about some of the amazing things it can do. I hope you enjoy your new skill!
One classic example of the power of CSS is the CSS Zen Garden. The HTML of this page never changes; the developers contribute new CSS stylesheets that completely transform the page.
Now that you’re a CSS pro, let’s learn how to publish your site to the web.
CSS
Pro