HTML: Style Sheets (Part 5)

External Style Sheets

Up to this point we have put the <STYLE> tag inside the <HEAD> section of the web page. Another useful approach, however, is to create an external style sheet. An external style sheet defines styles that any number of web pages can use. Use of an external style sheet can give the writer a uniformity across many pages. If one wanted to change some aspect of a particular style, changing it on the external style sheet would cause all the pages that use the external style sheet to update. All that is needed is for each page to have a link to the external style sheet.

In setting up an external style sheet, it is not necessary to use the <STYLE> tag. Instead, in a separate file you just list the styles you want to define. The tutorial you are using makes use of an external style sheet. Following are some of the styles defined in this external style sheet:

p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }

.gen { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }

a:link,a:visited,a:active { text-decoration: none; color: blue; }

body { background-color: #ffffeb; margin-left:9em; margin-right:4em; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }

The line that starts with 'p' defines a style that is used by every <P> tag in the tutorial. The line beginning with '.gen' defines an identical style that can be used with any HTML tag. The line that starts 'a:link' specifies that links will not be underlined and will always be blue (even after they have been visited). Finally, the line beginning 'body' sets the light-yellow background color of these pages, and sets up the margins, font-family and font-size.

 

Each page that uses a given external style sheet needs to include a link to the style sheet. The <LINK> tag sets up this link. The HREF attribute gives the name of the external style sheet, which here is 'styles.css.' The REL and TYPE attributes specify that the link is made to a style sheet. Here is the <LINK> command that is included in the <HEAD> section of each page in this tutorial:

 

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

 

 

 

Inline Style Tags


We have talked about putting <STYLE> tags in the <HEAD> section of a page, to create styles. And we talked above about using an external style sheet to create styles. A third way of creating styles is to utilize inline style tags. It is possible to use STYLE not as a separate tag but inside another HTML tag, like <P>. In this way you can define a style that applies only to the text inside a given tag. Here is an example:

 

<p style="font-style:italic; color:pink; text-decoration:underline; ">One o'clock Two o'clock Three o'clock rock

<p style="font-size:18pt; color:purple; text-transform:uppercase; ">Four o'clock Five o'clock Six o'clock rock

<p style="font-size:8pt; color:green; font-weight:bolder; ">Seven o'clock Eight o'clock Nine o'clock rock

<p>We're going to rock around the clock tonight!

to see this how this code looks in a window.

 

 

Other Resources

Try these links on style sheets:


Page Link
CSS Properties www.htmlhelp.com/reference/css/properties.html
CSS Structure and Rules www.htmlhelp.com/reference/css/structure.html
Style Guide www.w3.org/MarkUp/Guide/Style.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) the eEverything.com web site. Create an external style sheet. In the external style sheet, create a class that defines a box. The class would apply to any tag (the definition starts with "."). This style has a margin of 2em and green text. It has a border around it with a 'groove' border-style, a '3em' border-width and a #0066CC border color. The background-color is #CCFFFF and all text is transformed to lowercase.

Create a second class that defines text. It also would apply to any tag, with a font family defined in this order: "New Century Schoolbook," Times and serif. Text is in small-caps and the font size is 'large.'

In your page, put in a link to the external style sheet you defined. Apply both styles to make sure they are working.

Also, alter the definition of a <P> tag by using an inline style. Define the font size to be 18pt, the font style to be italic, the text decoration so that the text has a line through it, and the text alignment to be right-aligned.

If you are working on eEverything.com, use the 2 styles defined in the external style sheet to announce the promotion of Jill Sloan from Eastern Sales Manager to VP for Sales. Also, announce that all men's Oxford Cloth shirts are 15% off for the next six weeks.
Use the inline style you defined above to announce that shoppers who use the new eEverything.com credit card get 2% off all their purchases.