style master css tutorial
Class selectors
In this section you will learn
- how to use the class attribute and class selectors
- how to make text bold with the
font-weightproperty
Project goals
- To style the
footerat the bottom of#main-text.
<< 6. text properties | 8. styling links >>
Have you noticed that paragraph at the bottom of the #main-text?
Exercise 22
Open index.html and look at the last paragraph inside #main-text. What's different about it?
The class attribute
The difference is the opening part of the element:
<p class="footer">
If you haven't seen one of these before, it's called a class attribute. In HTML attributes are extra properties you can associate with an element. A good example is the href attribute we use to specify the link destination for an <a> element. See how the following, which you've no doubt seen a million times, has the same form as what I've just shown you above?
<a href="http://www.westciv.com/style_master/">
Class is an attribute we can add to HTML elements so that we can identify them from the style sheet, using a class selector, and give them their own style.
The class selector
The form of a class selector is very simple:
element-name.class-name
which would select the specified element with the class attribute class-name.
Exercise 23
Create a class selector which will select only paragraphs with the class attribute footer.
We've got a statement which selects only that paragraph of class footer, so now we're ready to give it some style. First, let's use a couple of text properties you're already familiar with.
Exercise 24
Reduce the font-size in the footer down to just .5em and at the same time center the text.
When you're done it will look like this.
p.footer {
font-size: .5em;
text-align: center;
}
The font-weight property
I'd also like to make that text in the footer a little heavier. But this is the one simple CSS text property we haven't learned yet. I say simple because all you have to do to make text bold is to set the font-weight property to, you guessed it, bold.
Exercise 25
Make the text in the footer bold.
p.footer {
...
font-weight: bold;
}
That's much better now - the footer actually looks like a footer. Even only knowing the CSS properties you are already familiar with, we could do a lot more with the footer, but I want to keep moving so I'll leave it up to your own creativity to come back to this later on.
Next
Next we'll look at all the wonderful things you can do with links using style sheets.
