Using stylesheets – CSS

We use stylesheets or CSS (Cascading Style Sheets) files to specify the layout of a web page. The idea with CSS files is to keep it simple: when you can set the layout in one file you can manage the layout of hundreds or thousands of web pages just by editing the one file.

 

Linking CSS files to a web page

In order to use CSS files on your web page, you need to create a link from the head element in your web page to the CSS file. The image below illustrates how to link them:

Name of CSS file: raystyle.css
| | |
Link from web page to stylesheet: index.html contact.html hobbies.html

 

To link to the CSS file, add the link element (in bold below) to the head element on each web page as shown in the example below:

<head>

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">

<title>Portfolio</title>

<link href="raystyle.css" rel="stylesheet" type="text/css">

</head>

In the example above, a reference is made from the web page to a CSS file called raystyle.css. You can select the name for your stylesheet yourself, of course, e.g. photogallery.css etc. When you have created a working stylesheet link on one web page, copy the reference code to all your other web pages.Then you can concentrate on eidting the one CSS file whenever you want to change the layout.

 

Editing CSS files

When a browser loads a web page, the browser check the CSS file linked to the page to see if any of the elements on the web page have been edited in the CSS file. this means that you can set e.g. a certain heading (such as h1) to use a certain font, links to have a certain size, or edit other features of the page layout.

The example below shows the contents of a very simple CSS file; it defines what the headings h1 and h2 should look like.

h1 {
    font-size: 18px;
    font-weight : normal;
    font-family: arial, georgia, serif;
    color : #666;
    margin: 0px;
    }
h2 {
    font-size: 14px;
    font-weight : bold;
    font-family: arial, georgia, serif;
    color : #666;
    margin-top: 4px;
    margin-bottom: 1px;
    }

As you might have noticed, each element defined in the stylesheet is written inside curly brackets { }. Please note also that each definition ends in a semi-colon ;

Class references to the contents of CSS files

If you use normal elements, like h1 headings or p for paragraphs, you do not need to reger to the CSS file from different parts of your web page. It is enough to have a link to the CSS file in the head element of your web page. But if you want to use different styles in different parts of your web page, you can make special reference to a CSS file with the class attribute we discussed earlier. The example below shows how you can make a class reference to a style called ‘lead’ in the CSS file:

 

<div class="lead">
<p>
Raymond Keskivarsen, known for his input 
in the Iron Chef program, tells Irene 
Torsion about his life.
</p>
</div>

Below, you can see how you might define the above-mentioned style class=”lead” in the CSS file:

.lead{
	  font-family: arial, georgia, serif;
	  font-size: 20px;
	  font-style: normal;
	  font-weight: bold;
	  color: #333333;
          }

Please note that you can create many CSS files to use in different web pages, if necessary.