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.
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:
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:
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:
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.
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:
In this style, you list the tags you want to set properties for.
You can have a single tag like this:
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.
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.