RBV Webpage Tutorial 1

Introduction

Cascading Style Sheets

Style sheets are a labour saving device. Consider the following situation. In the Webpage you are creating you want all the headings to be in Verdana italic font, size 4, dark red like this:

The standard Lorem Ipsum passage

To do this you would need to type these tags every time.

<FONT FACE="Verdana" COLOR="Maroon" SIZE="4">
<I>
The standard Lorem Ipsum passage
</I>
</FONT>

Then you want all the paragraphs to be in black in a Times New Roman 10 point size font like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
And then all quotations will be Arial font, 10 point, blue, italic, centered. For example:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Retyping the tags each time you start a new heading or add some quoted text is very labourious and time consuming. The solution to all this extra work is style sheets.

Introduction

The original designers of HTML and the World Wide Web did not foresee the effect that competition between the major browsers would have. With each browser trying to out do the others with new features and proprietary tags, HTML was force to evolve rapidly and chaotically.

One result of the "browser wars" was the intervention of the W3C (the World Wide Web Consortium - a non-profit organization dedicated to standardizing HTML). The HTML 4.01 Specification is the newest version of the standard defining what tags browswers are expected to support. There are, however, no guarantees.

Cascading Style Sheets also solved this cross-browser compatibility problem. The styles tag is standard in HTML 4.01 and all major browsers support it.

The <STYLE> tag

Let's look at the example given above again to see how the STYLE tag can make Webpage design easier.

To do this:

The standard Lorem Ipsum passage
you need these tags:
<FONT FACE="Verdana" COLOR="Maroon" SIZE="4">
<I>
The standard Lorem Ipsum passage
</I>
</FONT>

To replace the font and italic tags with the STYLE tag, add these lines to the <HEAD> of your Webpage:

<HEAD>
<TITLE>My Webpage</TITLE>
<STYLE TYPE="text/css">
H1 { font-family: Verdana; font-size: 12pt; color: Maroon }
</STYLE>
</HEAD>

Here is how it works:

<STYLE TYPE="text/css">
The STYLE tag marks the beginning of the style definitions. It is placed in the <HEAD> section of the Webpage. Remember to end with </STYLE>
H1
In this example, the level 1 heading tag is redefined. Each time <H1> appears in the Webpage it will be in 12 point, maroon, Verdana font.
{ }
Notice how the details of the style are enclosed with
brace brackets { }.

The Details

A style definition has three parts: Here is the syntax

selector { property: value }

And here is an example:

P { font-family: Arial }

In this example the selector is an HTML tag <P>. Later on you will see that the selector can be other things.

The property is the attribute that you wish to change. Here are some more examples:

B { color : red }
H2 { font-size: 12pt }
H4 { text-decoration: underline }
P { font-weight: bold }
H1 { text-align: center } LI { font-style: italic }

The value of each property is usually from a list of specific values. The font-weight property, for example, can take one of these values: * Note: the use of the "|" character means "or". The number values 100 to 900 are from lightest to darkest weight. A value of 400 is equal to "normal".

Notice that you can define more than one property for each selector. Remember to separate each property:value with a semi-colon.

BODY { color : white; background-color: navy }

When creating complex styles you may wish to list each property on a line by itself like this:

H2 { font-family: Verdana;
color: #000099;
font-size: 11pt;
font-weight: bold;
}

 

Examples

Once the styles have been created, you just then use the redefined tags to apply the new format. Here are several more styles and what they actually look like when used.

Example 1

p { color: sienna; margin-left: 20px }

This is sienna with a 20 pixel indent.

Example 2

p { font-family:arial;
font-size:20pt;
color:red;
text-decoration:underline;
text-align: center
}

This line is 20 point, Arial font

Example 3

H3 { font-family: Verdana, Arial, Helveteica, sans-serif;
color: #800080;
font-size: 10pt;
font-weight: 600;
font-style: italic
}

Verdana font, 10 points, italic, font-weight of 600

Example 4

H4 { letter-spacing: 0.25cm }

An example of letter-spacing

Review

CSS Activity # 14

Work through Learning Activity # 14 to practice what you have learned about style sheets. Then follow on with Cascading Style Sheet Tutorial # 15. You can also view a CSS Summary.