Using Cascading Style Sheets

Exercise more control using Classes

Classes can be applied to HTML tags to give more control over the appearance of the page. For example, instead of just having one style for the paragraph tag <p> you can create classes that contain supplementary style information, like this:

.big { font-size: 18px;
       color: #CC00CC; }
.tiny { font-size: 12px;
        color: #0099ff; }

To show the style attribute is a class it always has a full stop before it in the style sheet.

Then in the HTML document apply the class like this:

<p class="big">The text for class big would look like this.</p>

<p class="tiny">The text for class tiny would look like this.</p>

They would look like this:

The text for class big would look like this.

The text for class tiny would look like this.

Control Styles Using Identities

An identity works in just the same was as a class, but each id is unique, so you can only use it once on the same page. You might use id's for elements like the heading that only occurs on the page once.

#heading { padding: 5px;
        font-size: 21px;
        color: #00cccc;
        background-color: #000033 }

To show the style attribute is an id it always has a hash # before it in the style sheet.

In the HTML document apply the id like this:

<div id="heading">This is the Heading ID Example</div>

It would look like this:

This is the Heading ID Example
  • Avoid using HTML tag references as class and id names. They will work but it might be confusing to have head, body or table used as class or id names.

Styling Large and Small Areas

When you are using CSS you can make use of two handy additional HTML tags; <div> and <span> that allow you to further manipulate your page content.

<div> ... </div>

This tag creates a block that can be formatted with CSS and everything within these tags is kept together and treated as an element. Any other tags including other div's can be nested within a div.

You can see an example of a div tag in use above.

<span> ... </span>

This tag allows a style to be applied in a linear manner.

.red { color: #FF0000;
    font-weight: bold }

<p>This text would be the normal colour for the p tag <span class="red">this text would be bold and red</span> then back to normal again!</p>

This text would be the normal colour for the p tag this text would be bold and red then back to normal again!