CSS 4

 

Style Sheets

Another place that styles can be defined is in an external style sheet, which is a separate file that just lists style definitions. In the example below, it is named 'style.css.' The HTML document gains access to these styles by linking to the style sheet in the 'head' section:
<link href="style.css" rel="stylesheet">.

 

Classes

In previous exercises, we used type selectors in defining the styles (define a style for H1, a style for P, etc.). Another way of using styles is to define 'classes.' A class definition includes a period and a name, like '.blue'. An HTML element makes use of the class like this: <p class="blue">what i want to say</p>. The text "what i want to say" will follow the formatting defined in the style '.blue'. See the example below. Note the 'link' tag in the 'head' section.

Here is the external style sheet that lists the classes used in this example:

It is possible to apply more than 1 class to a given text. In the last 2 bits of dialogue above, 2 classes are used. So Romeo's last line is both blue and right-aligned. And Juliet's last lines are large, bold and in italics.

 

Exercise

Set up an external style sheet and link to it from the HTML document. In the style sheet, create a class that has a font family defined in this order: "New Century Schoolbook", "Times" and serif. Text is in small-caps and the font size is 'large.' In the 'body' section, write some text that uses this style.

Create a second class that has green text, a left margin of 1em and is underlined. Write some text that uses this style.

Write some text that uses both of the styles that you defined.