|
|
|
|
 |
Getting Started with Cascading Style Sheets Part 3 – More control over your fonts In part two we examined the basic syntax and rules for using style sheets. Now we will look the enhanced font control afforded by the use of style sheets. HTML has always been a bit limited in terms of text control. Using style sheets unleashes a whole new level of control. Let’s see what’s available. We’ll begin with fonts. Font-Family The font-family property lets you select which font will be used to display text. You can specify a number of fonts and if the first one isn’t available, the second one will be used and so forth until the list is used up. This allows you to have a controlled degradation of quality in your page’s look based on what fonts the reader's system actually has installed. An example of this property in use is listed below. BODY { font-family: Times, TimesRoman, serif } The fonts are listed in the preferred order. Note also that where multiple fonts are specified, if a particular character isn’t available in a particular font, the browser will try to extract it from the next one in the list. If you are specifying a font which has spaces in its name, you need to surround that name in quotes e.g. H1 { font-family: “Courier New”, Courier, monospace } Font-Style The font-style can take the following values: normal, italic, and oblique. Oblique is very similar to italic. Using font-style is simple: H1 { font-style: italic } Font-Variant The font-variant property can be either normal or small-caps. Small-caps are basically scaled down versions of normal caps such that they are the same size as lower case characters. H1 { font-variant: small-caps }
Font-Size You can specify absolute size in points or pixels i.e. 7pt, 14pt etc. or 100px, 80px and so on. You can specify relative sizes by using the keywords xx-small, x-small, small, medium, large, x-large and xx-large. You can also use percentages such as 30% or 66%. Finally, you can use ems e.g. .5em, 1.5em, 3.0em etc. The relative sizes are relative to the parent font. You would normally set this base size in the <body> section of your page. You should be aware that Netscape does not recommend using pixel sizing of fonts so your pages may not come out correctly on the Netscape Navigator browser. It’s probably best to test before you upload your pages. An example of font-size in action is: H2 { font-size: 36pt } Font-Weight The font-weight property allows you to select the following weights: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 The first few are obvious. The numeric ones are simply a progression of heavier weights where each one is guaranteed to be darker than the previous. Whilst you can use any of values, be aware that normal and 400 are synonymous as are bold and 700. Body { font-weight: 500 } Font The font property allows you to combine several of the above properties in to one line e.g. H1 { font: bold 36pt Impact, "New SchoolBook", sans-serif } As you can see, there is a big improvement in the font control. Let’s move on to the text features. Letter-Spacing and Word-Spacing These two specify the spacing between letters and words. The valid values here are any length values including em, px, pt and so on. An example that would control the layout of paragraphs is as follows: P { word-spacing: 1.0em; letter-spacing: 10px; } Text-Decoration Text-decoration supports several values, not all of which are particular useful. These are normal, underline, overline, line-through, and blink. The latter is particularly annoying so use it sparingly, if at all! H3 { text-decoration: underline } Vertical-Align Most of these possibilities will be rarely used outside scientific or maths pages where things like chemical formulae are being discussed. However, if you have such a need, you can choose from baseline, sub, super, top, text-top, middle, bottom and text-bottom. Text-Transform This property lets you change all the text so that it appears as either capitalize, uppercase, lowercase or none. As most people generally type in their text how they want it to appear, I can’t imagine this gets used very much. However, exactly how the browser changes the text from uppercase to lower case etc is dependent on the language used so perhaps a site that performs language translation from English to Urdu might have a use for such a feature. H4 { text-transform: uppercase } Text-Align This is a far more familiar feature. You can control how the text is aligned horizontally much as you would in a word processor. The valid options are left, right, center, and justify. Note the US spelling of center. H1 { text-align: Center } Text-Indent The text-indent property controls how much (if any) the first line of a paragraph is indented. The values can be any of the usual lengths and percentages such as ems. P { text-indent: 3em } Line-Height This allows you to set the spacing in-between lines. It works well on paragraphs but can be problematic elsewhere. You cannot use negative values to try to overlay text! An example is: P { Line-height: 80% } That wraps things up for this part. There has been a lot here to take in. Many of the properties won’t be of use to you but some may well be just what you have been looking for. In part 4 we’ll be looking at the improved colour facilities. Other parts of this series:
|
