Cascading Style Sheets (CSS)

Page Contents - Cascading Style Sheets (CSS)

Lesson Introduction - Cascading Style Sheets (CSS)

Style sheets are a newer method of styling (changing the appearance) your web page or site. There are 3 ways of specifying the style information.

1. For an individual element, or group of elements.
2. For an HTML document (a Web page)
3. External style sheet. (This can change the appearance of any or every page on the site as required)

Basically the difference of the 3 ways is where you place your definition, the style rules. In this lesson you are going to learn about the External style sheet.

External style sheet

Don't be worried about the word rules, they are very simple instructions to say your page will look like. These rules are written into a text file that is given an extension of .CSS rather than .TXT

You will shortly write a style sheet that you will save as... my.css

Like your HTML pages they can be written by Windows Notepad, but special CSS editors are available, and many of the Web Authoring programs contain a CSS editor.

The very big advantage of this system is that the rules are placed into a separate file, and these rules will apply to every page that you refer to this file.

How to Refer (Link) to an External Style Sheet

The reference is made in the HEAD section, normally just before the end </head> tag and follows the following format:

<LINK rel="STYLESHEET" href="path/name-of-file">

Because you are going to save your file my.css into the same directory that contains your web pages you do not have to worry about the path portion.

If the file is in a different directory, then you would have to use either

• One or more ../
• directory(s)
• A combination of the above

Exercise 1. Refer to an External Style Sheet

Step 1. Open your page1.htm file

Using Notepad or your HTML Editor open up your file page1.htm

Step 2. Enter the following code

 <LINK rel="STYLESHEET" href="my.css"  type="text/css">

on the line before

 </head>

Step 2. Save

Its as simple as that. For every file that you wish to use my.css style sheet you repeat the above, if you have several files it is easy to copy and paste this line into all your pages.

Step 3. Repeat with your other pages.

Repeat the above with your files Index.html, tut3-exercise.htm and page3.htm

Writing the Rules

Style Rules are made up from a Selector and Declaration(s) as follows

 Selector {Property 1: value ;Property 2: value ;and so on;}

To make it easier to read, you can write the rules as follows:

 Selector {
     Property 1: value ;
     Property 2: value ;
     and so on;
}

• Where Selector is an HTML element such as H1 or P.
• Where declaration(s) are the properties and values.
  • Properties indicate the aspect of a tags display, such as background-color:
  • and value specifies the actual property such as red for that property.
  • Note the colon : between the property and value.
  • If more than 1 declaration (property: value) is required they are seperated with a semi colon ;
• Declarations are enclosed in curly brackets { }

This may seem confusing but the example in the next step should help to make it clear.

Step 1. Enter the Rules

Using Notepad or a Style sheet editor, enter the following. You can copy and paste this code if you prefer.

Pay particular attention to the puntuation i.e. : ; , - { } make sure they are used in the correct place. A mistake in the puntuation is hard to spot. Often

H1 {
     font-family: Arial, helvetica, sans-serif;
     font-size: 14px;
     font-weight: bold;
     color: red;
     text-align: center;
     background-color: blue;
}


BODY {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 8pt;
     background-color: yellow;
}


P {  font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 10px; 
     color: green;
     background-color: white;
}

Step 2. Save as... my.css

Search this site for a word or phrase. Place phrases inside "double quotes"

Leisure Time - book your holiday or flights with our UK sponsors

Book a Thomson holiday	Jet2 Cheap flights	Book a Monarch Holiday
Fly Thomas Cook flights	EasyJet Holidays	Monarch Flights

More Tutorials

Home page of a tutorial in programming in Smalltalk, a object-oriented programming language. This is an ideal tutorial for anybody learning Smalltalk and of particular interest to students on courses: M206 at the OU Open University, and course CSC517 at NCSU North Carolina State University

Home page of a tutorial in programming in C This is an ideal tutorial for anybody learning C programming language, and of particular interest to students on courses: T223 at the OU Open University.

Home page of tutorials4u.com

Leeds my home town

Top

Leeds Web design

Copyright © John McGuinn 2001-03

.