Help Files and Tutorials for Computer Users
 

 

Cascading Style Sheets (CSS) provide a convenient way to create a uniform appearance of several web pages within the same web site. Various characteristics such as font, font sizes, margins, and colours can be specified on a master file, then each Web page refers to this list, with the styles "cascading" through the page or the entire site.

 
Try it out:
 
<html>
<head>

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

</head>

<body>

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>
</html>
 

Create a new folder in your user space and name it css_project.

Create a new file in Notepad, TextEdit, or whichever text editor you are using. Save this as an HTML file to the new folder, (css_projects). Copy the code exactly as it appears to the left, and name the file mypage.html.

You will notice that this file references a css file named "style1.css", but this file doesn't exist yet.

Open your mypage.html file in a web browser. So far it looks very plain. Don't worry, things are about to change.

Click here to see this example.
     
Here is a simple example of a .css file, which is separate from, but referenced by the web pages:
     
body {
          background:#dddddd;
         }

p,h1, h2 {
         font-family: Arial, Helvetica, sans-serif;
         }

p {
         font-size: 14px;
         color: #ff0000;
         }

h1{
         font-size: 26px;
         color: #00ff00;
         }

h2{
         font-size: 22px;
         color: #0000ff;
         }
 

Create another new file in Notepad, TextEdit, or whichever text editor you are using. Save it to your new folder and name it style1.css.

Copy the code to the left exactly as it appears.

Try to predict what is going to happen.  Considering the RGB colour properties, what colour do you think the paragraph text will be?

Now open your original mypage.html page. 

Click here to see the example with the link to the CSS file.

 
     

Go back to your mypage.html file and edit the line <link rel="stylesheet" type="text/css" href="style1.css">  to say <link rel="stylesheet" type="text/css" href="style2.css">

Save the file and re-open it in a web browser. Since there is no "style2.css" file the appearance reverts back to the original boring style.
     
body {
         background:#eeeeee;
         padding:20px;
         }

p,h1, h2 {
         font-family: Arial, Helvetica, sans-serif;
         }

p {
         font-size: 14px;
         color: #ff0000;
         border:2px solid #8b4513; /*saddlebrown */
         margin-left:20px;
         margin-right:20px;
         padding:20px;
         }

h1{
         font-size: 26px;
         color: #00ff00;
         }

h2{
         font-size: 22px;
         color: #0000ff;
         }
 

Create another new file in Notepad, TextEdit, or whichever text editor you are using. Save it to your new folder and name it style2.css.

Copy the code to the left exactly as it appears, and save the file.  Now re-open your mypage.html page.

Click here to see the example with the link to the new CSS file.

Any pages you create for your website can now reference your css file as long as you include the <link rel="stylesheet" type="text/css" href="style1.css"> line in the html file. It should appear between the <head> and </head> tags in the following format:

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

This is only an introduction to some of the basic elements of css style sheets.  CSS can be used to replace frames, and even tables in laying out elaborate web pages.
     

Home (More Tutorials)

Next - More CSS practise