Formatting Text


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.

font-family

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.

font-style

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.

font-decoration

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.

font-size

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.

text-tansform

Possible values are "capitalize", "uppercase", "lowercase", "none". Needless to say how text is displayed with this definition, is it?

font-weight

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.

formatting links

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 }

line-height

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


MAIN PAGE | HELP LINKS | FAQ | HOMEPAGE RESOURCES | STYLE SHEETS


This page was prepared by Yoshiwara


This page is hosted by Geocities Get your own Free Home Page
1