Text-formatting style sheet definitions can be used with any tag that encloses text, e.g.: <p>,<ul>,<tt>,<b,> <i>,<em> and also with the "special tags" for formatting links, followed links and active links etc.
One of the neatest features: defining a certain font. Like the "font face=" HTML tags,
this will only work if the visitor has the font installed under
exactly the same name you have specified. The following def. will display text
preceded by the "p" tag in Arial, or if it's not installed, in Book Antiqua,
and if that is not installed, in Times New Roman:
p {font-family: Arial, "Book Antiqua", "Times New Roman" }
Note that font names consisting of more than one word have to be enclosed within
quotation marks. Instead of a certain font, you can also define kinds of fonts like
"sans-serif", "serif" or "monospace". It's a good idea to use only Win95/Win98//WinNT
standard fonts as they make up about 85-90% of visitors' operating systems.
That's either "normal", "italic", or "bold". Nothing special, but it can serve to specify that e.g. level three headings (H3) are always italic.
That's probably the neatest of all! Possibilities are "none", "underline", "line-through".
With the definition
a:link { text-decoration: none }
you can create links that are not underlined, as is the case with links in this site.
The problem is that every experienced web surfer is used to identifying links by the underline.
With yet so few style sheet pages out, visitors are usually a bit baffled at first by the
seeming lack of links. Only the changing mouse pointer tells them that there is a link.
If you use this feature, you should make links obvious by their colour and/or context,
else you risk turning people away.
Like the usual "font size=3" tags, but much more versatile. You can specify a value in pt (poins), pc (pica), in (inch), mm (millimetres), cm, or as "xx-small", "x-small", "small", medium", "large" etc.
Possible values are "capitalize", "uppercase", "lowercase", "none". Needless to say how text is displayed with this definition, is it?
Can take on the values bold, bolder, lighter, and 100-900. The lower (higher) the number, the thinner (bolder) the text. As Windows True Type fonts can only be normal or bold, this command doesn't do anything that can't be done with font-style or a simple <b> tag just as well.
Links can take on not only different colours like in pure HTML, but also different fonts etc using the above commands. Instead of the tag name, which would be "a href" in either case, you use a:link, a:visited and a:active, e.g.:
a:link { color:#FFFFFF; font-family:Courier }
a:visited { color:#FF0000; font-family:Courier }
|
If you want the line spacing within a paragraph larger (or smaller) than the default, or line breaks to cause a gap between lines, use this definition. If your font-site is 10pt, p { line-height:18pt } will result in a line spacing of approximately 1.5, like in this paragraph here.
back to
the code
next chapter:
colours and backgrounds
