CNIT 132
Intermediate HTML and Cascading Style Sheets (CSS)

Style Sheets Page


Linking Style Sheets To HTML
Stylesheet methods can be applied at three different levels:
  1. 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
  2. Embedded: This means you include the stylesheet 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
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 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 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 your web page, surrounded by <style></style> tags. The example shows how the previously linked style sheet (see above) could be embedded into a web page:
head>
<title>Stylesheet Example</title>
<style type="text/css">

<!--
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;}
-->
</style>
</head>
Note the comment tags <!-- --> surrounding the style sheet 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 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 CNIT 132 Class Links