In this section you will learn
- how to use the class attribute and class selectors
- how to make text bold with the
- To style the
footerat the bottom of
Have you noticed that paragraph at the bottom of the
index.html and look at the last paragraph inside
#main-text. What's different about it?
You can quickly open your preview document at any time just by control clicking anywhere in the Design Pane and then choosingfrom the menu.
The class attribute
The difference is the opening part of the element:
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?
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:
which would select the specified element with the class attribute
Create a class selector which will select only paragraphs with the class attribute
The beauty of creating a new style sheet based on an HTML document is that it doesn't just create the statements for all the plain old elements in the HTML, it also looks for the class attribute and creates a statement to select these specific elements as well.
However, you're going to have to make a slight change to this selector because Style Master, when it generates the style sheet like this, creates class selectors of the form
.footer. What's the difference between
.footer will select any elements with a class attribute of
p.footer will only select
<p> elements with a class attribute of
footer. You can in fact leave the selector as it is, as there is only one type of element with a class attribute of
footer in this document, so it won't make any difference either way. You can change it if you just want to make sure your code is precisely the same as the code examples. If you make the change, just add the p directly into the style sheet text.
Also, at some stage you're going to have to create your own class selectors. Here's how.
To create a statement with a class selector (here's a shorter way to create a new statement too)
1. in themenu select and then from the submenu.
The Class Selector Editor opens.
2. choose the element name
p in the tabs at the top.
3. type the class name in the field on the right.
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.
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.
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,
Make the text in the footer bold.
font-weight property with a value of bold really quickly. Can you work out which one it is?
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 we'll look at all the wonderful things you can do with links using style sheets.