Introduction

to Cascading
Style Sheets

A Workbook &
Guide

LANCASTER
UNIVERSITY
1st Edition Information Systems
August 2002 Services
 Introduction to CSS - A Workbook & Guide

Status Record
First Edition September 2002

Acknowledgements:
Screen shots reprinted by permission from Microsoft Corporation.
‘Introduction to CSS’ Copyright © 2002 Lancaster University.
Author: Olga Falko

TheGuideWorks Series
Other guides available in ‘TheGuideWorks’ series include:
Introduction to Windows NT4
Introduction to Windows Explorer
Word 97 for Converters
Intermediate Word 97/2000
Advanced Word 97
Introduction to Excel 97/2000 and Spreadsheet Concepts
Intermediate Excel 97/2000
Introduction to PowerPoint 97
Using Outlook 97 for Email
Getting More out of Outlook 97
Image Processing with Paint Shop Pro
GIF Animation with Animation Shop
For more information about these guides ask at ISS reception in the Library or visit the
website at: www.lancs.ac.uk/TheGuideWorks

Administration:
Document code: PC70B
File location: F:\CSS\Guide\css2.doc
Date printed: 30.01.2003
 Table of Contents
INTRODUCTION TO THIS GUIDE .................................................................................................. 1
PRE-REQUISITES ................................................................................................................................... 1
SUMMARY ............................................................................................................................................ 1
SECTION 1 – CREATING A CSS ....................................................................................................... 3
EXERCISE 1.1 – CREATING A CSS........................................................................................................ 4
EXERCISE 1.2 – LINKING STYLE SHEET TO AN HTML DOCUMENT ...................................................... 6
EXERCISE 1.3 – CSS SYNTAX.............................................................................................................. 8
EXERCISE 1.4 – CSS EDITING ............................................................................................................ 10
SECTION 2 – TEXT FORMATTING ............................................................................................... 13
EXERCISE 2.1 – CHANGING FONT ...................................................................................................... 14
EXERCISE 2.2 – CHANGING FONT (CONTINUED)................................................................................ 16
EXERCISE 2.3 – SETTING FONT PROPERTIES IN ONE DECLARATION .................................................... 18
EXERCISE 2.4 – CHANGING TEXT APPEARANCE ................................................................................ 20
EXERCISE 2.5 – HYPERLINKS ............................................................................................................. 22
SECTION 3 – BACKGROUNDS AND COLOURS ......................................................................... 25
EXERCISE 3.1 – SETTING A BACKGROUND COLOUR ........................................................................... 26
EXERCISE 3.2 – SETTING A BACKGROUND IMAGE .............................................................................. 28
SECTION 4 – BOX PROPERTIES.................................................................................................... 31
EXERCISE 4.1 – BOX PROPERTIES ...................................................................................................... 32
EXERCISE 4.2 – SETTING MARGINS ................................................................................................... 34
EXERCISE 4.3 – BORDERS .................................................................................................................. 36
SECTION 5 – CSS CLASSES............................................................................................................. 39
EXERCISE 5.1 – CLASSES ................................................................................................................... 40
EXERCISE 5.2 – BLOCK AND INLINE ELEMENTS ................................................................................. 42
EXERCISE 5.3 – PROJECT ................................................................................................................... 44
SECTION 6 - APPENDICES.............................................................................................................. 45
APPENDIX A – MEASUREMENT UNITS ............................................................................................... 46
APPENDIX B – A TABLE OF CSS PROPERTIES AND VALUES ............................................................. 47
APPENDIX C – CSS WEB RESOURCES ................................................................................................ 51
.
 Introduction to this Guide

This workbook introduces the use of Cascading Style Sheets in HTML and Web
Authoring. The course covers the following topics:
• creating external Style Sheets and linking them to your html document
• applying styles to html elements
• applying layout to web pages.

Pre-requisites
In order to get the most out of this course you should be familiar with Windows 2000
and World Wide Web, have basic knowledge of HTML and basic understanding of
building a web site.

Summary
This guide is divided up into sections:
Creating a CSS – creating a style sheet file and linking it to an html file
Text and Font Properties – styling text and headings.
Backgrounds, colours and Images – adding background images and colours.
Box Properties – setting up margins, padding and borders for various elements
Classes – applying styles to selected elements.

Using This Workbook

This Workbook is laid out with:
• step by step instructions for you to follow on the left-hand page.
• relevant illustrations and examples on the right-hand page.
It is highly recommended to open out the workbook and view both pages at once.

Exercise 1 Example
1. copy the example.
2. save the file.
3. close application…
2 Introduction to this Guide

Conventions Used in this Workbook

Keyboard Explanation
press Enter press the large ‘Enter’ key to the right of the
main letter keys.
This key is sometimes known as ‘return’.
move cursor to.... use the cursor direction keys Ï to move the
cursor box along, up or down ÍÐÎ the screen.
You can also use the mouse.
press: Delete key use the key marked ‘Delete’ in the group of six
keys, which are just to the right of the ‘Enter’
key.
press: Backspace key tap the Í Backspace key to delete text to the
left of the flashing cursor bar. The ‘Backspace’
key is above the large ‘Enter’ key.
press: Tab key tap the ↹ (Tab) key to demote bullet points.
Hold down the Shift key & press ↹ key to
promote bullet points.
press Ctrl & (letter) hold down the Ctrl key and press the letter.
The Ctrl is at the bottom left of the keyboard and
is also known as ‘Control’.
Mouse Explanation
click on ‘File’ menu move the mouse over the desk so that the pointer
(or other feature) moves to the specified location (‘File’ menu in
our example) then press the left mouse button
down briefly.
double click on filename move the mouse so that the pointer points to the
filename (in this case) then press down the left
mouse button twice in quick succession.
right click on (feature) move the mouse pointer over the feature, then
click once with the right mouse button.
drag to (location) press and hold down the left button, move the
mouse to the new location then release the left
button.
 Section 1 – Creating a CSS

In this section you will learn how to:

• create an external CSS
• link it to your html file
• edit a style sheet
4 Creating a CSS

Exercise 1.1 – Creating a CSS

Introduction
Cascading Style Sheets were introduced in HTML 4. Using Style Sheets enables web
authors to separate web page content and web page layout and therefore:
• create more sophisticated page design (page style and layout)
• manage the complex web sites: develop, maintain and keep sites consistant
• make web pages accessible to as many readers as possible, regardless of the
device they use to read a page.

Creating a Style Sheet

We are going to create an external style sheet that will apply
- background colour to the web page,
- style to h1
- colour to the horizontal rule (<hr>).
Lets do the following:
1. start Notepad.
2. type in the instructions below – see Example A.

BODY {background-color: seashell;}

H1 {
font-family: arial, sans-serif;
color: sienna;
}

HR {color: sienna;}
3. save your style sheet to A drive and give it ‘style1.css’ name – see Example B.

Case Convention
Although browsers are not case sensitive and can interpret a style sheet written in any
case, there is a convention to type the selectors (HTML tags in the example above) in
upper case and everything else in lower case.

Naming Convention.
Save your style sheet as a ‘plain text’ file. Give your style sheet a .css file extension.
Your Style Sheet filename may have letters (a-z) and numbers (0-9) and should start
with a letter.
Never use white spaces and special characters in CSS file names.
Examples 5

Example A – Creating a Style Sheet

Example B – Saving a Style Sheet

6 Creating a CSS

Exercise 1.2 – Linking Style Sheet to an HTML document

Now when we have created a style sheet we can use it to change an appearance of a
web page. Let’s tell a browser to get styling information from style1.css.
1. Start Internet Explorer, open index.html from A drive – see a web page
without any styling.
2. now open another Notepad window (keep the window with style1.css open as
well).
3. in Notepad open index.html from the A drive.
4. put your cursor on the empty line just above the closing </head> and type
the following instruction:

<link rel=stylesheet href=”style1.css”

type=”text/css”>
5. save changes to index.html in Notepad, refresh the it in browser window to
view changes.
Note: if your style sheet is saved to a location different from your web site location
(e.g. to a style sheet folder), you need to write a whole path in the href attribute of
your linking instruction.

Linking another html file

Let’s link our second file to the ‘style1.css’ style sheet:
1. in Internet Explorer window click on ‘Another page’ link.
2. in Notepad window open ‘page1.html’.
3. in the head section of the document below the page title type

<link rel=stylesheet href=”style1.css”

type=”text/css”>
4. save changes to page1.html. View the changes to your web site in a browser
window.

Editing a Style Sheet

Let us set up a left margin for any text marked with <p></p>. Let’s set a 0.4 inch
margin:
1. open style1.css in notepad (if it is not opened already).
2. below your styling instructions add one more line – see example B:

P {margin-left:0.4in;}

Notice that there is no white space between the number 0.4 and the
measurement unit in (inch).
3. save changes. Refresh index.html and page1.html in the Internet Explorer
window to view changes.
Examples 7

Example A – Linking a style sheet to a web page

Add linking
instruction here

Example B – Editing a style sheet

Add a new
instruction here
8 Creating a CSS

Exercise 1.3 – CSS Syntax.

CSS Rules
Each style sheet consists of style rules. The simplest rule looks like this:
H1 {color:red;}
This rule tells the style-conscious browser that all text marked as <H1></H1> or
<h1></h1> should be displayed in red.
If the browser does not support Cascading Style Sheets it will simply ignore it.

CSS Selectors and Declarations

Each style rule consists of a selector and a declaration in curly brackets({ }). In the
example above H1 is a selector and color:red; is a declaration – see example A.
Selector tells the browser to use style from the declaration when displaying it.
Any valid HTML tag can be a selector: BODY, P, B, EM, STRONG, TD,
BLOCKQOUTE, SPAN, DIV, etc.

CSS Properties and Values

Each declaration consists of a property, a colon (:) and a value – see example B.
Around each of these there may be white space.
In the above example color is a property and red is its value.
Each property usually has only one value attached to it. There are exceptions – when
using either ‘shorthand’ or font-family property (we will discuss it later in a book).
Note: CSS properties and HTML attributes (although they have a lot in common) are
not the same.
Examples 9

Example A – Rules and declarations

Rule
Declaration
H1{color:red;}

Example B – Selectors, properties and values

H1{color:red;}
selector property value
10 Creating a CSS

Exercise 1.4 – CSS editing

Using more then one declaration
If use more then one declaration for the same selector (e.g. h1), separate each with a
semi-colon:
H1
{
font-family:arial;
text-align:center;
color:red;
}

Grouping the Rules

Instead of using three separate rules:
H1{font-family: arial;}
H2{font-family: arial;}
H3{font-family: arial;}
you can group them together:
H1,H2,H3{font-family: arial;}
This rule tells the browser that all text marked as <h1>, <h2> or <h3> should
be displayed in Arial font. Notice the comas between the selectors!

Grouping the Rules - Exercise

1. make sure that style1.css if open in Notepad.
2. edit the line

H1{

to read (see Example A):

H1,H2,H3 {

3. Save and view changes.

 Examples 11

Example A – Grouping the Rules

Group the
rules here
12 Creating a CSS
Section 2 – Text Formatting

In this section you will learn how to:

• use font properties.
• use text properties
14 Text and Font Properties

Exercise 2.1 – Changing Font

Setting the font
Setting the font properties is a common use of style sheets. Let’s start with choosing a
fontface for a <p> element:
1. make sure that style1.css is open in Notepad.
2. add one more declaration to the <P> rule – see Example A:

font-family: arial, helvetica, sans-serif;

3. Save and view the changes.

Font family-names and generic-families

In the above example we have prioritised the fonts we want the browser to use when
displaying the <p>element. To do it we have set a value list of fonts with alternative
values separated by a comma.
The first value on the list is Arial, the font we want Windows to use when displaying
our web site.
Another alternative on the list is a Macintosh font Helvetica, this is used when the
web site is open on a Mac.
As the last alternative on the list of fonts you should choose a generic-family font
(sans-serif in our exercise above). This is used when the viewer’s computer does not
have fonts from the beginning of the list.
There are five generic-families:
• ‘serif’ (e.g. Times New Roman)
• sans-serif (e.g. Arial)
• ‘cursive’ (e.g. MonotypeCorsiva)
• ‘fantasy’ (e.g. Western)
• ‘monospace’ (e.g. Courier New)
Note: if a font name contains white spaces, it should be quoted:
H4 {font-family: “comic sans ms”, fantasy;}

Choosing the size of the font

1. in style1.css add one more declaration to the P rule – see Example A:
font-size: 12 pt;
2. save and view changes.
This declaration instructs the browser to show any text marked with <p></p> in size
12 pt ( 1 pt = 1/72 in) – see example B.
Examples 15

Example A – Font-family and Font-size properties

Add
declarations
here

Example B – Measurement Units

Unit Description
% a percentage of something
1em a default size of the viewer’s font for the current element
1px pixel (a dot on a PC monitor)
pt points, 1 pt = 1/72 in
pc picas, 1 pc=12 pt=1/6 in
1in inch
1mm millimetre
1cm centimetre
16 Text and Font Properties

Exercise 2.2 – Changing Font (Continued)

Making changes to html file
1. open index.html in a Notepad window.
2. mark the text in the third paragraph with the <strong> tag – see example A:

<p><strong>This is the third paragraph</strong></p>

3. save changes to the index.html.

Editing a style sheet – making text italic and bold.

Now when we marked text in the third paragraph with <strong></strong> tag
we can set a rule for a strong selector in our style sheet. Let’s make it bold and
italic:
4. at the end of a style sheet type the following rule – see example B:

STRONG {
font-weight: bold;
font-style: italic;
}
5. save the changes to style1.css and view changes to the appearance of a third
paragraph of index.html in the browser window.
6. experiment with the styles for the <strong> element – see more font
properties and values in a table on page 19.
Examples 17

Example A – Editing index.html

Mark text in this

paragraph as
<strong>

Example B – Editing a style sheet

Add a new rule

18 Text and Font Properties

Exercise 2.3 – Setting Font properties in one declaration

When setting rules for font properties instead of typing

H1 {
font-weight: bold;
font-size: 12pt;
font-family: Arial,Helvetica;
font-style: italic;
}

you can use a shorthand and type:

H1 {font: bold 12pt Arial, Helvetica italic;}
Note that the values for font property are listed divided by white spaces.

Using shorthand
1. in the index.html at the bottom of the document (just above the closing
</body> tag) type:

<h4>This is heading four text</h4>

2. repeat the above procedure for the page1.html.

3. in your style sheet set the rule for h4 selector using shorthand.
4. save changes and view your web site in browser.

Avoiding Problems
When using numeric values, length units and percentages in shorthand you rely on
the viewer’s browser to interpret which value belongs to what property.
In most cases the values should be listed in a specific order. Unfortunately it might
not help as you are allowed miss out any properties with the default values.
The advice is not to use shorthand with numeric values – spend few extra minutes
typing the rules with properties and values and get a predictable result .
Examples 19
A table of Font Properties and Values
Property* Values Description
font-family family-name A prioritised list of font family names
generic-family and a generic family name for an
element
font-size smaller Sets the size of a font
larger
length
%
font-style normal Sets the style of the font
italic
oblique
font-weight normal Sets the weight of a font
bold
bolder
lighter (where 400 is equal to normal and 700 is
100 - 900 equal to bold)
font-variant normal Displays text in a small-caps font or a
small-caps normal font
font font-style A shorthand property for setting all of
font-variant the properties for a font in one
font-weight declaration
font-size
font-family

*
The browsers might ignore some of the properties!
20 Text and Font Properties

Exercise 2.4 – Changing Text Appearance

Changing the colours of the text
Browsers recognise various formats of describing colours. You will find more
information colour formats in Appendix 3.
To change a colour of the third paragraph:
1. Make sure you your style sheet style1.css is open in Notepad.
2. Add one more declaration to the rule for the ‘strong’ selector:

color: red;

so that the whole rule reads as shown below – see example A:

STRONG {
font-weight: bold;
font-style: italic;
color: red;}
3. save changes to your style sheet and view index.html in Internet Explorer.

Aligning and stretching the text

4. in style1.css put your cursor just above the HR rule and add a new rule :

H1 {
text-align: center;
letter-spacing: 0.1em;
}

and see all text (in <h1>) aligned to the centre and letter spacing increased by
0.1em – see example A.

In the above rule we have used em measurement unit. Here 1em is equal to the
default font size for the <h1> element. Find more in Appendix A, page 46.
5. Try increasing letter-spacing to 0.2em. Save and view the changes. Change it
back to 0.1em. Save changes.

Decorating the text

6. add another declaration to the rule for the ‘STRONG’ selector:

text-decoration: overline;
7. save your style sheet and view the changes to index.html in Internet Explorer.
8. delete the text-decoration declaration and save the style sheet.
Examples 21

Example A – Setting text properties

Add a new rule

Example B - Text Properties and Values:

Property Possible Values Description

color color Sets the colour of a text
text-align left Aligns the text in an element
right
center
justify
text-decoration none Adds decoration to text
underline
overline
line-through
blink
text-indent length Indents the first line of text in an
% element
letter-spacing normal Increase or decrease the space
length between characters
22 Text and Font Properties

Exercise 2.5 – Hyperlinks

There are four different selectors with respect to hyperlinks.
Selector Description
A:link Defines the style for normal unvisited links.
A:visited Defines the style for visited links.
A:active Defines the style for active links. A link becomes active
once you click on it.
A:hover Defines the style for hovered links. A link is hovered when
the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.

You can apply whatever style you'd like to each of these selectors, just like you would
do with normal text.
Note: there are no white spaces in the hyperlink selectors.

Changing Hyperlinks colours

Let’s change the colours of the hyperlinks.
1. at the end of the style sheet document add a set of new rules:

A:link {color: brown;}

A:visited {color: brown;}
A:active {color: red;}
2. save changes to your style sheet and view the index.html page in browser.

Creating ‘rollover’ effect

1. Add another rule to your style sheet so that it appears below A:visited rule and
above A:active rule*:

A:hover {color: red;}

2. save and view the changes.
3. now let’s make our links look more sophisticated. Add declarations to the
above rules so they read:

A:link {color: brown; text-decoration: none;}

A:visited {color: brown; text-decoration: none;}
A:hover {color: red; font-weight: bold;}
A:active {color: red;}
4. Save and view changes.
5. Use your skills to set text-decoration to ‘underline’ for A:hover and then group
the selectors. Save your style sheet.

*
Note In order to be effective A:hover MUST come after A:link and A:visited in the CSS
definition and A:active MUST come after A:hover in the CSS definition.
Examples 23

Example A – Setting hyperlinks colours

Add hyperlink
style rules

Example B – Creating a ‘Rollover’ effect

Add a new rule

24 Text and Font Properties
Section 3 – Backgrounds and Colours

In this section you will learn how to:

• set background colour
• set an image as a background.
• set fixed background image
26 Backgrounds and Colours

Exercise 3.1 – Setting a background colour

Setting background colour to a selector
You can add a background colours to various selectors. In the exercise 1.1 we have
already set a background colour for the whole web site. Now we are going to apply
background colours to heading elements and to table cell elements.

Try the following:

1. make sure your style sheet is open in Notepad.

2. below the body rule:

BODY {background-color: seashell;}

type the following new rules – see example A:

H2 {background-color: yellow;}
H1 {background-color: transparent;}
TH {background-color: seashell;}
TD {background-color: white;}

3. Save and view changes.

4. Change the background colour of H1 to the colour of your choice.

Adding Comments
You may add comments to your style sheets. It will make it easier to do the editing of
style rules and declarations in the future.
1. put your cursor at the end of the TH rule after the closing curly bracket } and
press a spacebar few times.
2. type on the same line – see example B:

/* table heading style */

3. move your cursor to the end of the TD rule and type:

/* table cell style */

4. save changes to the style1.css.
Examples 27

Example A – Setting Background colour to an element

Add new rules to set

background colours

Example B – Adding Comments

Add comments
28 Backgrounds and Colours

Exercise 3.2 – Setting a background image

To set a background image to a web site we will use a background-image
property.
1. make sure your style1.css is open in Notepad
2. add one more declaration to the BODY rule:

background-image: url(canvas.gif);

so that the whole rule reads as

BODY {
background-color: seashell;
background-image: url(canvas.gif);
}

Note: there is no white space between url and (canvas.gif)

3. Save and view changes in browser.

Setting a fixed background

By default your background image will scroll together with the content of your web
page.
To make it stay in place add another declaration to the BODY rule:
4. type after the background-image declaration:

background-attachment: fixed;

so that the whole rule reads as

BODY {
background-color: seashell;
background-image: url(canvas.gif);
background-attachment: fixed;
}
5. save changes to style1.css
6. in a browser window refresh the page, then use a side scrollbar to scroll up and
down to view the effect.
7. return to a style1.css.
Examples 29

Example A – Setting a Background Image

Add a background -
image declaration

Example B – Fixing a Background Image

Add a background -
attachment declaration
30 Backgrounds and Colours

Example A – Table of Background properties and values

Property Possible Values Description

background-color color-rgb Sets the background color of
color-hex an element
color-name
transparent
background-image url Sets an image as the
none background
background- scroll Sets whether a background
attachment fixed image is fixed or scrolls with
the rest of the page
background background-color A shorthand property for
background-image setting all background
background-repeat properties in one declaration
background-attachment
background-position Note the order of the properties
 Section 4 – Box Properties

In this section you will learn how to:

• set margines
• set borders
• set paddings.
32 Margins and Borders

Exercise 4.1 – Box Properties

Each element in an HTML document (e.g. paragraph, heading, table, image, etc.) fits
in an ‘imaginary’ rectangular box. This is the space which browsers reserve for a
particular element. Using the properties from this chapter you can control the size and
appearance of this box.
Even more, this box can be surrounded by three more boxes: padding, border and
margins – see example A.

Setting the padding for a heading text

With the padding you control the amount of space between ‘imaginary’ borders
around the element and the element itself. If the element has a background colour
padding inherits it.
Let’s try the following:
1. In style1.css find the following rule:

H2 {background-color: yellow;}
2. Add the following declaration to the h2 rule – see example B:

padding: 2%;

so that your rule reads:

H2 {
background-color: yellow;
padding: 2%;
}
3. Save changes and view index.html and page1.html in browser.
4. Return to your style sheet.

Setting padding in a table.

In our table we have heading cells (TH) and normal cells (TD). Let’s set a rule to
create padding in TD and TH:
5. at the end of your style sheet type the following rule:

TD,TH {padding: 0.2em;}

6. Save and view changes.
7. Try increasing the value by replacing 0.2em with 0.5em. Save changes and
view the result in browser.
In the above example we have used the em length units. Here 1em is equal to the
default size of font in the table cell. Find more in the Appendix A, page 46.
Instead of setting the padding to all four sides of the element to the same value you
can choose padding-top, padding-right, padding-bottom and padding-left to have
different values.
Examples 33

Example A – Box Properties

border

element

padding

margin

Example B – Setting Heading padding

Add a padding
declaration for H2

Example C – Setting Padding in Table Cells

Type a new rule to

set padding in a
table
34 Margins and Borders

Exercise 4.2 – Setting Margins

When setting margins keep in mind that Netscape browser prior to Netscape 7 do not
display margins correctly.

Setting Heading Margins

1. In style1.css add the following declaration to the h2 rule:

margin: 5%;

so that your rule reads – see example A:

h2 {
background-color: yellow;
padding: 2%;
margin: 5%;
}
2. Save changes and view index.html and page1.html in browser.
3. Return to your style sheet.

Setting margins for an image

To create some space between text and image we will use margins. We can’t use
padding as padding property does not work with the image elements.
First, we will align an image (from page1) to the right and then create a space around
it using margins:
1. In style1.css at the end of the document type new rule – see example B:

IMG {
float: right;
margin: 0.5em;
}
2. save changes to style1.css.
3. refresh page1.html in browser.
Examples 35

Example A – Setting Margins to Heading 2

Add a margin
declaration here

Example B – Setting Margins to a floating image

Add a an IMG
rule here
36 Margins and Borders

Exercise 4.3 – Borders

When setting up borders of an element you can choose the colour, thickness and style
of the borders. Let’s apply borders to H1 selector
1. in your style sheet document find a rule:

H1 {
text-align: center;
letter-spacing: 0.1em;
}
2. add to it the following new declarations

border-color: red;
border-style: dashed;
border-width: 0.1em;

so that the whole rule reads – see example A:

H1 {
text-align: center;
letter-spacing: 0.1em;
border-color: red;
border-style: dashed;
border-width: 0.1em;
}
3. Save changes to your style sheet and view the result in browser.
4. Try other border styles and width from the Example B.
5. Use your skills to create borders around H2 element.
Examples 37

Example A – Adding Borders to a heading

Add a border
declaration here

Example B - A Table of Border properties and Values

Property Possible Values Description

border-color color Sets the colour of the borders
border-style none Sets the style of the four borders
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-width thin Sets the width of four borders
medium
thick
length
border border-width Sets the borders
border-style
border-color
38 Margins and Borders
 Section 5 – CSS Classes

In this section you will learn how to:

• set classes
• use span and div
• create a frame effect
40 Classes and IDs

Exercise 5.1 – Classes

Classes are used to apply different styles to the same type of elements.
For example you can use classes to have some H3 headings centred and some right
aligned.

Creating Classes
Let’s create a class to justify the second paragraph and another one to centre <h3> on
page1.
1. Type at the end of the style1.css

H3.right {text-align: right;}

H3.cent {text-align: center;}
2. Save changes.
The first rule in the above exercise creates a class of H3 styles named “right” whose
text will be aligned to the right.
The second rule creates a class of heading 3 styles named “cent” that will be centred.
Note the period, which precedes the class name.

Applying Class styles in HTML Document

1. Open page1.html in notepad, put your cursor inside the opening <h3> tag and
type:
class=cent
so that the whole instruction reads – see example B:
<h3 class=cent>

2. After the third paragraph text in page1.html add another h3 element:

<h3> This is another heading 3 </h3>

3. Change the opening code to:

<h3 class=right>
so that the whole instruction reads
<h3 class=right> This is another heading 3 </h3>

4. Save changes and view page1.html in browser.

Note: text marked as h3 (without class attribute) will not be affected by any class style
rules.
Remember: there is a restriction on classes - they cannot be nested. A nested class
selector (e.g. H1.cent.red) is not allowed in CSS.
 Examples 41

Example A – Creating Classes

Example B – Applying Classes in HTML document

Add class
attribute
here

Add another
h3 here
42 Classes and IDs

Exercise 5.2 – Block and Inline elements

Div and Span
There are two ‘dummy’ tags in HTML that don't do anything in themselves: <DIV>
and <SPAN>. Therefore, they are excellent for carrying CSS styles as class selectors.
SPAN is an "inline-tag" in HTML, meaning that no automatic line breaks are inserted
before or after it. If you need to change the style of just one word or few words in a
paragraph mark them with <span></span>
DIV is a "block tag", meaning that line breaks are automatically inserted to distance
the block from the surrounding content (like <p>, <h1> or <table> tags).

Creating a frame effect with <div>.

Let’s set a new class DIV.frame which will create a frame effect for our page1.html:
1. make sure your style1.css file is open.
2. at the end of it type a new rule

DIV.frame {
background-color: seashell;
margin: 2%;
border: 2px sienna outset;
}

The shorthand border declaration above will produce the 2 pixel thick border
in sienna colour with 3D outset effect (top and left border in lighter sienna
colour and right and bottom border in darker sienna colour).
3. Open page1.html in Notepad and just below the opening <body> tag type

<div class=frame>

4. Above the closing </body> tag type

</div>

5. Save both documents and view page1.html in browser.

Examples 43

Example A – Creating a frame effect

Add a new
rule here

Example B – Applying ‘frame’ effect to an HTML document

Type a new
instruction
here
44 Classes and IDs

Exercise 5.3 – Project

Use your skills to:
1. Create a frame effect for index.html.
2. Change margins so that the right margin and the left margin of the text match.
3. Change background colour of heading 2 to the colour of your choice.
4. Change borders (or take them out).
5. Insert a picture of the underpass on a page 1,
a. then create 2 classes for the images: IMG.right and IMG.left
b. use the classes to float one of the images to the left and another to the
right. Do not forget to set margins.
6. Create a one row 4 cell table and use classes to create rollover button effect
(tip: use background-color and A:link, A:hover, etc declarations)
 Section 6 - Appendices

In this section you will find

• measurement units
• table of CSS properties and values
46 Appendices

Appendix A – Measurement Units

A Table of Measurement Units

Unit Description
% a percentage of something
1em a default size of the viewer’s font
1px pixel (a dot on a PC monitor)
pt points, 1 pt = 1/72 in
pc picas, 1 pc=12 pt=1/6 in
1in inch
1mm millimetre
1cm centimetre

Absolute and relative units

Both relative and absolute length units are supported in CSS1.
Relative units give a length relative to another length property, and are preferred since
they will better adjust to different media.
• The em values are relative to the HTML element’s font size.
• The px values are relative to the output device screen resolution.
• Percentage values are relative to other values, as defined for each
property. Most often the percentage value is relative to the element's font size
Absolute length units are highly dependent on the output medium, and so are less
useful than relative units.
• Points, picas, inches, millimetres and centimetres set the absolute size/length
of an HTML element.
Note: There are no white spaces between the number and the two-letter unit code in a
lenth value.
Negative values are not alowed*.

*
There are exeptions: e.g. vertical alignment and margins.
Appendices 47

Appendix B – A Table of CSS Properties and Values

Property* Values Description
font-family family-name A prioritised list of font family names
generic-family and a generic family name for an
element
font-size xx-small Sets the size of a font
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-style normal Sets the style of the font
italic
oblique
font-weight normal Sets the weight of a font
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
font-variant normal Displays text in a small-caps font or a
small-caps normal font
font-stretch normal Condenses or expands the current font-
wider family
narrower
condensed
expanded
font font-style A shorthand property for setting all of
font-variant the properties for a font in one
font-weight declaration
font-size
font-family

*
The browsers might ignore some of the properties!
48 Appendices
Text
Property Possible Values Description
color color Sets the colour of a text
text-align left Aligns the text in an element
right
center
justify
text-decoration none Adds decoration to text
underline
overline
line-through
blink
text-indent length Indents the first line of text in an
% element
text-transform none Controls the letters in an element
capitalize
uppercase
lowercase
white-space normal Sets how white space inside an
pre element is handled
nowrap
word-spacing normal Increase or decrease the space
length between words
direction ltr Sets the text direction
rtl
letter-spacing normal Increase or decrease the space
length between characters

Hyperlinks
Selector Description
a:link Defines the style for normal unvisited links.
a:visited Defines the style for visited links.
a:active Defines the style for active links. A link becomes active
once you click on it.
a:hover Defines the style for hovered links. A link is hovered when
the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.
Appendices 49

Background
Property Possible Values Description
background-color color-rgb Sets the background color of
color-hex an element
color-name
transparent
background-image url Sets an image as the
none background
background- scroll Sets whether a background
attachment fixed image is fixed or scrolls with
the rest of the page
background-position top left Sets the starting position of a
top center background image
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat repeat Sets if/how a background
repeat-x image will be repeated
repeat-y
no-repeat
background background-color A shorthand property for
background-image setting all background
background-repeat properties in one declaration
background-attachment
background-position Note the order of the properties
50 Appendices

Margin
Property Possible Values Description
margin-top length Sets the top margin of an element
%
margin-right length Sets the right margin of an element
%
margin-bottom length Sets the bottom margin of an element
%
margin-left length Sets the left margin of an element
%
margin margin-top A shorthand property for setting the
margin-right margin properties in one declaration
margin-bottom
margin-left

Padding
Property Possible Values Description
padding-top length Sets the top padding of an element
%
padding-right length Sets the right padding of an element
%
padding-bottom length Sets the bottom padding of an
% element
padding-left length Sets the left margin of an element
%
padding padding-top A shorthand property for setting all
padding-right of the padding properties in one
padding-bottom declaration
padding-left
Note the order!
Appendices 51

Border
Property Possible Values Description
border-color color Sets the colour of the borders
border-style Sets the style of the four borders:
none - no border is drawn
hidden -
dotted - the border is a dotted line
dashed - the border is a dashed line
solid - the border is a solid line
double - the border is a double line
groove - a 3D groove is drawn
ridge - a 3D ridge
inset - a 3D inset
outset - a 3D outset
Note: Some browsers will interpret
all border-styles (except for none and
hidden) as ‘solid’.
border-width thin Sets the width of four borders
medium
thick
length
border border-width Sets the borders
border-style
border-color

Appendix C – CSS Web resources

CSS Tools
http://www.htmlhelp.com/tools/csscheck/ - direct input validation service on-line.
http://jigsaw.w3.org/css-validator/validator-uri.html - another validator on-line.
http://www.w3.org/Style/ - the latest development in CSS.
http://www.w3.org/TR/REC-CSS1 - W3C recommendations.

CSS Tutorials On-line:

http://www.w3schools.com/css/ - good tutorial and examples.
http://www.echoecho.com/css.htm - tutorial and online quiz.
http://www.htmlhelp.com/reference/css/quick-tutorial.html - quick tutorial.

Olga Falko, 30 January 2003

Email: [email protected]
52 Appendices

Index
B H
background hyperlink ...................................................... 22
background-attachment ............................28 colours ..................................................... 22
background-image....................................28 properties ................................................. 48
colour .......................................................26 roll-over effect ......................................... 22
properties............................................30, 49
I
borders ....................................................36, 51
image
C
as a background ....................................... 28
classes floating..................................................... 34
applying....................................................40
M
creating.....................................................40
comments ......................................................26 margins......................................................... 34
css ...................................................................4 properties and values ............................... 50
css syntax measurement units.................................. 15, 46
declaration..................................................8 absolute and relative length units ............ 46
property ......................................................8
selector .......................................................8 P
padding......................................................... 32
D
properties ................................................. 50
DIV ...............................................................42
creating a frame effect..............................42 S
SPAN............................................................ 42
F
style sheet
font................................................................14 creating ...................................................... 4
font-family ...............................................14 external ...................................................... 4
font-size....................................................14 linking to an html document...................... 6
font-style ..................................................16 naming ....................................................... 4
font-weight ...............................................16 saving......................................................... 5
generic-family ..........................................14
properties and values..........................19, 47 T
shorthand..................................................18 text................................................................ 20
properties and values ......................... 21, 48
text-decoration......................................... 20