Cascading Style Sheets: Introduction

Reading Chapter 6

It's been mentioned several times that HTML mixes structure and presentation. To help separate these two ideas and to give more control over the presentation, Cascading Style Sheets (CSS) were introduced. These allow the designer to alter the appearance of almost any tag or even otherwise un-tagged area of the document. The term cascading describes how there are several levels of style information and the closest to the text wins. You can alter the appearance of all instances of a tag in the document or effect just a single instance.

You can put your style commands in a separate file so that they can be used easily by all the pages on your site. This gives a consistent look and feel to the site that can greatly improve the effectiveness of the site. But site wide style decisions can be overridden in individual places as needed.

Places where style information can be found

There are three levels of style sheet information. The closest to the text is the inline style. For example, to alter the color of a single instance of an H2 tag, you do this:

<h2 style="color:green">Green H2 header</h2>

The next level out is the embedded style sheets. These are specified in the head section of the web page and affect all the relevant tags in the whole file. To change all the H2 tags in the file, add this to the head section:

<style type="text/css">
h2 {color:green}
</style>
This would do the same as the above inline style but would change the appearance of all H2 tags on the file.

The outermost style is the linked or external style sheet. The CSS specifications are stored in a separate file, usually ending in .css and linked to the HTML files you want to use them in. In the head section you would include a line like:

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

If you have a link to a JavaScript file, this should go after that. The contents of the css file would look like the text between the style tags above, there would be no style tags in the file.

I prefer the linked form with occasional use of page or tag specific styles. This puts all the style information in one place and makes it easier to change and control. Don't worry about the type attribute in either the style or link tags. For now, all style sheet information is of type text/css. The rel attribute is always stylesheet.

The closest style control to the text is the one that is used. For example, if all three of the types above were used, the inline form would be used. In the style section for this file , all H2 tags are marked to be blue. But the one below has an inline style to be marked green. The one above, for this section, is in blue.

Style inheritance, control syntax and CSS selectors

We have seen that there are several levels to style sheet information. Styles are also inherited. This means that nested tags pick up the styles that are attached to the outer tag. So, if you want to set the styles for fonts for the whole document, set them in the body tag.

The B (bold) tag has properties like other tags, but most of them are not set. So they have the same values as the tag it is inside of. It's main purpose is to make the text inside it It has a color property but it is set to the same value as the surrounding text. If you use the bold tag inside a paragraph tag and the paragraph tag sets the text color to purple, than bold text in the paragraph will be a darker purple, not black.

All the style controls have the same form. You specify the name of a property and the value you want it to have. These are separated by a colon (:). After the value, to mark the end of this specification, put a semi-colon (;). If you have more than one, they are separated by whitespace (spaces, tabs, newlines).

The general form of a style specification is:

selector {property:value; property2:value2; ...}

The selector can come in one of three general forms.

Tag Based Selectors

In this style, you list the tags you want to set properties for. You can have a single tag like this:

P {background-color:green;}

or a comma separated list of tags, like this:
H1,H2,H3 {background-color:green;}

You can be more specific, like if you want to control the background colors on B tags, but only when they are inside a LI tag.
LI B {background-color:green;}

Class Selectors

Here you create a style and give it a name. You can then use that style in any tag as part of an inline style. This allows you to collect several properties together and use them consistently throughout the web page.

.myclass {background-color:#dddddd; color:red;}

This was used in this paragraph like this.
<p class="myclass">

ID Selectors

You can also give styles an id. This is usually used to create a style that is used by a single item in the page. This allows you to access it via JavaScript. It's kind of like giving a section of the page a name.
#myid {background-color:#dddddd; color:red;}
<p id="myid">

Div and Span tags

You can mark an arbitrary section of you document and assign style properties to it by using the div or span These are tags that have effect on the appearance of the document by themselves. They are just used to set properties on some otherwise un-marked section of the document. They are also used to give a name to something in the document so it can be addressed using JavaScript. The difference between them is that the div tag is a block tag. This means that it puts a break above and below the block, like a paragraph tag does. The span tag doesn't change the flow of the text, like the way a bold tag alters the appearance of the text it covers but doesn't break the line.