HTML and CSS


You have 4 ways to put CSS and HTML together:

  1. Referring to an external file which contains a style sheet, by using the 'LINK' element
  2. Referring to an external file which contains a style sheet, by using the '@import' notation
  3. Defining a style sheet inside of the HTML document, inside the <HEAD> tag
  4. Using a style element inside the document body, attached to a tag

Referring to an external file by using 'LINK REL'

You can use an external file to define your style sheet. This is helpful when you want to change a whole site by updating only the file containing the style sheet features. Change that file and you will get all documents updated! Just put this line inside the <head> tag:

<link rel=stylesheet type="text/css" href="styleurl" title="something">

where styleurl is the URL which refers your style sheet. If your style sheet is located into the same folder where there are all documents, just put its name without specifying the absolute path. Something is the style sheet's title.

Referring to an external file by using '@import'

You can put more style sheets together by mixing them into the current HTML document. This allows creating one main sheet for the whole site and partial sheets for specific documents that may require additional styling. So you have to put this line:

<STYLE TYPE="text=css">@import url (styleurl);</STYLE>

Where <STYLE TYPE="text=css"> is a fixed notation, and styleurl is the URL which refers your style sheet. Make sure you put a semicolon (look at the red ';') after each line containing the '@import' notation! If you don't put that semicolon, your browser will ignore the whole notation! You can put more '@import' lines in the same document. Netscape Navigator 4 and Microsoft I.E. 3 don't support this notation.

Defining a style sheet inside inside the <HEAD> tag

You can define all properties and features of the current style sheet inside the <head> tag. For example you can define all '<h1>' tags:

<style type="text/css">h1 {color : red}</style>

So all lines marked by the <h1> tag, will be red. You can define all HTML tags here. Don't worry, I will explain more about rules like 'h1 {color : red}' later.

Using a style element inside the document body

Like the previous method, but here you can put a style inside the document body. You could define a single specific tag for example. Only that tag will be affected. However I think this is the worst way to use CSS. In fact the main purpose of CSS is to separate content of documents from styles. This is a sample:

<h1 style="color : red">this is a simple line</h1>

<h1>this is another line</h1>

Where just the first line will be red.


Index           Home  Back       About  Contact us!

Copyright (c) 1998-2006 Wowarea