As we saw from the example, the style is applied to a tag and can include quite complex instructions. A full list of these is available in our Help system.
More importantly, lets look at how to use it - you can experiment with the precise settings later.
The previous example showed the use of Inline Style. That is where the style is applied to only one tag.
Inline style is typically placed within a paragraph <p> or span <span> tag. Simply add the style attribute and then a list of the styles to be applied, separated by semi colons.
Example:
<p style="font-color:blue;font-family:verdana;">Show this text in blue</p> will cause all text in the paragraph to be shown in blue.
As many of your styles will be re-used throughout the document, there is a better way to apply styles by defining them in the head of the page using the style tag.
Example:
<head>
<style>
p {font-color:blue;font-family:verdana;}
</style>
</head>
In the above example, all text in paragraph <p> tags will be shown in blue, verdana font. But what if you want to be more selective? Raed on...
Rather than have a style definition laid out in each individual web page, try saving all the contents of the style tags in a separate document - a Linked Style Sheet. This should be a plain text document, and saved as a .css file.
It can then be linked to any web page within the web site, and will behave exactly as if the style definitions were included in that page.
Example:
<head>
<link rel=stylesheet type="text/css" href="mystylesheet.css">
</head>
You can have links to multiple style sheets in one web page.
Using this concept allows the whole appearance of the web site by changing one entry in the .css file.
The above example makes all paragraph <p> text blue. This is because we defined the style for the paragraph <p> tag that way.
To apply this to only some of the paragraphs, use a style class instead. This is much easier than it sounds....
Example:
<head>
<style>
.bluetext {font-color:blue;font-family:verdana;}
</style>
</head>
In the above example,we have defined a style and given it a name (class), bluetext, by making a name which does not correspond to any html tag or style, and placing a dot in front of it. This class can then be applied selectively throughout the document by including it within the html tags as follows:
<p class="bluetext">This paragraph will be blue</p>
<p>And this paragraph will be in the default colour for the document, not necessarily blue.</p>
So classes are not actually that difficult at all.
A class can be applicable to only one html tag by calling it p.bluetext, in which case the bluetext class will only be applicable to the paragraph tag, and this may be different to td.bluetext which would be the style class definition for a table detail <td>td</td> tag.
Styles get a little more complicated than this, as not only can a class be defined, but also a style ID can be defined by placing the hash (#) sign in place of the dot. This allows style to be applied to all tags bearing a certain ID (eg. <p id="para1">Paragraph 1</p>)
Style is said to be Cascading, as when one style is nested inside another, the second level inherits the properties of the first, then adds its own specific style.
Example:
When a font size and colour is applied to the body element, all of the text in a document will be rendered in that size and colour. Should you wish to then change the font face (family) in a paragraph then doing so will add the new font face to the already coloured and resized style definition.
Having said this, there is an element of inconsistency between the way that different browsers interpret cascading styles, and therefore some experimentation may be necessary to achieve the desired effect.
CSS is supported by most modern versions of Browser, since Internet Explorer 5 and Netscape 4 for the PC and Internet Explorer 4 for the Mac. Opera generally behaves in the same way as Netscape - one of the common problems you will come across is having to specify the style class for each cell (<td>) in a table, rather than being able to designate a single class to the table element.
Text only browsers such as Linx will of course ignore all style sheet definitions.
Design your style sheet site carefully and check what the site looks like without the style sheet by temporarily removing the link to the style sheet. It will look pretty awful, but should still be readable! If not then work out if you went too far with applying formatting using styles, as on occasion a badly configured web proxy server can lose the relationship between a web page and its linked style sheet, resulting in default presentation.
Should you personally experience this, then refreshing the page with the Control Key held down should cure the problem, otherwise consider changing ISP or at least disabling their web proxy server from your internet settings!