Nicole Cook's CIS 142 Class

CIS 142
Intermediate HTML and Scripting

Stylesheets Page

Linking Stylesheets To HTML
Stylesheet methods can be applied at three different levels:
Linked: This means you create a single stylesheet that each page of your website links to -- thus creating a consistent look to your entire site Embedded: This means you include the stylesheet at the beginning of a specific web page. This will define the look of a single page Inline: This allows you to apply styles to a section or group of tags on a page

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

<head>
<title>Stylesheet Example</title>
<link rel="stylesheet" href="styles/mystyles.css" type="text/css">
</head>

The above example links to a stylesheet file called mystyles.css in a directory called styles. The stylesheet 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 stylesheet should be saved with a .css extension. An example of an entire stylesheet file is shown below:

/* Example stylesheet 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 stylesheet is ideal when the style is applied to numerous pages. With a linked stylesheet, an author could change the look of an entire site by simply changing one file. Additionally, most browsers will cache a linked stylesheet, thus avoiding a delay in page presentation once the stylesheet 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 stylesheets, 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 Stylesheet
The implication of embedding a stylesheet 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 stylesheet, the embedded styles will take precedence in the case where two tags are defined differently. Embedded styles are placed in 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:

Embedding A Stylesheet

The implication of embedding a stylesheet 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 stylesheet, the embedded styles will take precedence in the case where two tags are defined differently. Embedded styles are placed in 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>Stylesheet 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 stylesheets.

An embedded stylesheet should be used when a single document has a unique style. If the same stylesheet 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 embolden 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 lose many of the advantages of stylesheets 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 CIS 142 Class Links