HTML: Styles Sheets (Part 1)


Cascading Style Sheets


Cascading Style Sheets, or CSS, give the writer of web pages a lot of control over how different elements of a web page look. (In these sections I will refer to Cascading Style Sheets or CSS as "style sheets.") Style sheets give the writer significant control over fonts, text characteristics, colors, backgrounds, and "boxes" (text inside <P>...</P> tags is an example of a "box").

 

Specifying Styles for HTML Tags

One way to set up a style sheet is to place a <STYLE> tag within the <HEAD> section of the page. The TYPE attribute of the <STYLE> tag should be set to "TEXT/CSS." You can then specify the characteristics of various HTML tags that you use in the page. This is a useful approach if you want a given HTML tag to have a consistent appearance throughout your page.

You can, for example, specify that the font-size of all H1 headings be 48pt; this is done in the example below. Also specified for H1 headings below is that the preferred font-family is Verdana; if that isn't available the preferred font-family is Arial, and so on. The text-decoration setting specifies that H1 headings are underlined, and the color setting sets the text color to red. Study this example to become familiar with the syntax of style sheets.

This code sets up a style sheet that determines characteristics for all H1 and H2 headings, and for all text inside P tags:

 

<head>

<style type="text/css">

h1 { font-size:48pt; font-family:Verdana,Arial,Helvetica,sans-serif; text-decoration:underline; color:red; }

h2 { font-size:36pt; font-family:Verdana,Arial,Helvetica,sans-serif; color:gold; }

p { font-size:18pt; font-family:TimesNewRoman,serif; text-decoration:line-through; color:limegreen; }

</style>

</HEAD>

 

Here is the <BODY> section of this page:

 

<BODY>

<h1>This text is inside H1 tags. The font-size is 48pt, the font-family is Verdana,Arial,Helvetica,sans-serif, the text-decoration is underline and the color is red.</h1> <h2>This text is inside H2 tags. The font-size is 36pt, the font-family is also Verdana,Arial,Helvetica,sans-serif, and the color is gold. No text-decoration was set, so it should be normal in that respect.</h2>

<p>This text is inside P tags. The font-size is 18pt, the font-family is TimesNewRoman,serif, the text-decoration is line-through and the color is limegreen.</p>

</BODY>

to see this how this code looks in a window.

 

Style Sheets on the Web

There are some excellent resources available on the Web that cover style sheets, and it is worthwhile to take a minute to explore them while learning about style sheets. HTML Help's Quick Tutorial on Cascading Style Sheets gives a good introduction to style sheets. It is found at www.htmlhelp.com/reference/css/quick-tutorial.html.

Examples of CSS properties are font-size, font-family, text-decoration and color, which were all used in the example above. HTML Help provides a list of all the different properties that style sheets give you control over. Instead of my listing the properties again here, please take a minute to look at HTML Help's list of properties at www.htmlhelp.com/reference/css/properties.html. Click on some of the properties to see what the options are for that property (for example, what are the options for the text-decoration property other than underline and line-through?)

 

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.

Use CSS properties (listed at the first link in the table above) to specify that any H5 tags on your page present text in italics and indented 5em (i.e. indented by 5 letters).

Use CSS properties to specify that any H6 tags on your page present text in a "lighter" font-weight, transformed into Capitalized text, and with the image "fractal.jpg" in the background. The URL for "fractal.jpg" is: uzza.us/cs/web/fractal.jpg.

Put some text inside <H5> and <H6> tags in the <BODY> section to test whether you've set up the style sheet properly.

If you work on eEverything.com, use your <H5> tag for a heading "Patio Furniture". Use your <H6> tag for a heading "Above-Ground Pools".