Ken Ward's Guide to Cascading Style Sheets

 

[Main Site Page: Freeing the Mind]
[Cascading Style Sheets: Contents]
[Previous: What's the use of Style Sheets?]
[This Page: Creating Style Sheet Files]
[Next: Selectors]

Mind your language!

Style sheets are quite easy. However, in order to talk about them or to understand documentation about them, we need to understand the language used to describe them and their parts. Fortunately, this isn't difficult. And having understood this, we know we need to get the language right to start with so we can start to make quick progress.

External, Embedded, and  Inline Style Sheets

First of all let's understand the main ways we can use style in a document. These main three ways are called:

  1. External Style Sheets
  2. Embedded Style Sheets
  3. Inline Styles

Click here to view the style sheet associated with this page. (This is an HTML file with the same data as the CSS file. It isn't the real file, which you can view with a text editor.)

External Style Sheets

An external style sheet is a text file, perhaps made with Notepad, which is linked to one or more HTML pages and applies the style rules to each page. The style sheet has the extension .css. For example, MyStyleSheet. css. The style sheet contains a number of rules (which we will look at later) for the style of the document.

The style sheet is linked to one or more pages by putting the following code (shown in bold) in the HEAD of the document:

<HEAD>
<LINK REL=stylesheet HREF="MyStyleSheet.css" TYPE="text/css">
</HEAD>

Embedded Style Sheets

An embedded style sheet is one that is in the document itself. The rules for the document style are placed between two tags, in the HEAD of the document as follows:

<head>
<style>
<!--{ font-family: serif }
-->
</style>
</head>

The rules are placed within comment tags (<!--  -->) to hide them from older browsers.

Inline Styles

An inline style is applied to an HTML element within a document. It applies only to that element. For example, the following code:

<p style="background-color: rgb(0,255,0); color: rgb(0,0,255); margin-left: 1 in; margin-right: 1 in">
This is a paragraph.
</p>

Produces this paragraph:

This is a paragraph.

It does not affect the other paragraphs in the document.

Now we can get down to business and make some rules. Let's look at statements.

 

 

| Contents |