Nicole Cook's CIOS 256 Class

CIOS F256
Beginning Website Design
(Internet Authoring and Design)

Style Sheets Page

Linking style sheets to HTML

Style sheet methods can be applied at three different levels:

1. Linked     This means you create a single style sheet that each page of your web site links to, thus creating a consistent look to your entire site.

2. Embedded     This means you include the style sheet at the beginning of a specific web page. This will define the look of a single page.

3. Inline     This allows you to apply styles to a section or group of tags on a page.

Linking to a style sheet file

Style sheet methods can be applied at three different levels:

You can create an external style sheet for your entire website, or for a group of related pages on your website. Each web page must link to the style sheet using the <link> element. The <link> element must always be placed within the <head> of your document, as follows:

        <head>
        <title>Style sheet example</title>
        <link rel="stylesheet" href="styles/mystyles.css" type="text/css">
        </head>

The above example links to a style sheet file called mystyles.css in a directory called styles.
The style sheet can be written in any text editor. The file should not contain any html tags like <head> or <style> and must be of the form:

selector {property: value}

Your style sheet should be saved with a .css extension. An example of an entire style sheet file is shown below:

        /* Example style sheet file (note how this comment was created) */

        body {background: #ffffd8;
        margin-top: 20}

        a:link {color: #400080;
        background: #ffffd8}

        h1 {font-weight: bold;
        text-align: center;
        color: #006000;
        background: #ffffd8;
        font-family: 'Gill Sans', Arial, sans-serif}

        cite {font-family: 'Gill Sans', Arial, sans-serif;
        font-style: italic}

A linked style sheet is ideal when the style is applied to numerous pages. With a linked style sheet, an author could change the look of an entire site by simply changing one file. Additionally, most browsers will cache a linked style sheet, thus avoiding a delay in page presentation once the style sheet is cached.

Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by a space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in:

p strong { background: yellow }

is p strong. This rule says that strongly emphasized text within a paragraph should have a yellow background; strong text in a heading would be unaffected.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping separated by commas, thus:

h1, h2, h3, h4, h5, h6 {color: red;
font-family: sans-serif }

The above example would make all headings in the document colored red and
in a sans-serif font (if the browser supports it).

Embedding a style sheet

The implication of embedding a style sheet into a web page is that only a single web page will benefit from the styles you specify. If the web page also links to a style sheet, the embedded styles will take precedence in the case where two tags are defined differently. Embedded styles are placed in the of your web page, surrounded by <style></style> tags. The example shows how the previously linked stylesheet (see above) could be embedded into a web page:

<head>
        <title>Style sheet example</title>
        <style type="text/css">

        
        </style>
        </head>

Note the comment tags  surrounding the stylesheet attributes. These ensure that the attributes remain hidden from browsers not supporting style sheets.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

Inlining style

Styles may be applied inline to any element in the <body> using the style attribute in the relevant element tag. The style attribute can contain any number of CSS properties. The following example demonstrates how to change the colour of a paragraph inline. Notice how the embolded word also retains the style properties defined for the paragraph.

<p style="background-color:#f6f6fa; color:#860ba8">
Cor blimey, <b style="font-size:120%">Guvnor</b> you don't get many of them to the pound!</p>

Cor blimey, Guvnor you don't get many of them to the pound

Inlining styles loses many of the advantages of style sheets by mixing content with presentation. This method should be used sparingly, such as when a style is to be applied to a single occurrence of an element.

Return to CIOS 256 Class Links