Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

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-weight property

Project goals

  • To style the footer at 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?

You can quickly open your preview document at any time just by control clicking anywhere in the Design Pane and then choosing Edit Preview Document from the menu.

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.

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 and p.footer? Well, .footer will select any elements with a class attribute of footer, while 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 the Statement menu select New and then Class Selector... 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.

3. click OK

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.

There's a Core Properties Editor button that lets you create the font-weight property with a value of bold really quickly. Can you work out which one it is?

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.

<< 6. text properties | 8. styling links >>