Back to the index| Previous | Next

Competences: To use an external stylesheet

Contents: Something about .css files

The style

HTML tags were originally designed to define the content of a document only.

They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using syntactical tags like h1, p, table and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers (Netscape and Internet Explorer) continued to add new HTML tags and attributes to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C), the non profit, standard setting consortium responsible for standardizing HTML, created STYLES in addition to HTML 4.0.

You can insert the style, as you know, in the head section of the page, but, otherwise, you can store it in external Style Sheets linked to all the site pages. So your site will have an only style.

A Style Sheet must have the .css extension (exemple: mystyle.css) and so it is not a HTML file.
CSS stands for Cascading Style Sheets.

An external Style Sheet can save you a lot of work! You can change the all site layout, changing only the mystyle.css file! But, each page of your site must be linked to the style sheet in this way:

HTML code Demo
<link rel="stylesheet" href="mystyle.css">
CSS Demo

In an external Style Sheet there aren't tags, but only the css code that you usually put in the style tag in the head page section. You can edit a style sheet by your usual editor, but you must save it with the .css extension.
Let take a look:

Css code
 BODY { font-family:Verdana; font-size:x-small;
		 background-color:#ffff99; color:navy }

H1 {font-size:medium; text-align:center}
H2 {font-size:small}

A:link {color:blue}
A:visited {color:#cc3399}
A:hover {color:white; background:navy}

TABLE {width: 100%;  border:5px solid #cc0000 }

TD  { border: 2px solid #cc0000;	background-color:white;
      font-size:small; text-align:left; padding:20px }

The classes

Imagine you want two different kind of paragraphs in your HTML document:

Here it is how you can define them in the style sheet and call them in the HTML page:

Css codeHTML codeOutput {color:"red"; text-align: "left" } <p class="red"> bla bla bla </p>

bla bla bla {color:"green"; text-align="center" } <p class="green"> bla bla bla </p>

bla bla bla

You can use different classes with other HTML elements too, except the body, of course.

Write a .css file and link it to your web pages.

  • Open your usual editor and write a css code, by using the selectors you want.
  • Save the Stylesheet as mystyle.css in your local site.
  • Insert in all your web pages, instead of the style tag, the following link tag:
    <link rel="stylesheet" href="mystyle.css">
  • Save all the modified files.
  • Look at your web pages with the new style.
  • If you don't like the look of your pages, change the style (in the mystyle.css only!!)
  • Upload all the modified web pages and the mystyle.css in the remote site.
  • Write a message in the forum "Stylesheet" to inform that your site has a fine style!
  • Ludovica Battista

    Back to the index| Previous | Next