Tuesday 07th of February 2012 01:04:10 AM

CSS Tutorials > Controlling Fonts with CSS

Controlling Fonts with CSS

In this tutorial we will look at how to control font properties using style sheets. This is a really useful feature of CSS because it means that you can avoid having all those <font> tags in your Web pages, and it allows you to easily control all your fonts simply by editing one style sheet file.

We'll look at the different font properties that can be used with CSS, and explain each property with the aid of some real-life examples. Each example is shown as it renders in your browser.

There are six properties that can be used to control fonts - font-family, font-style, font-variant, font-weight, font-size and font. Let's look at each of these in turn.

1. font-family

The font-family property is used to set the font face used for the text (e.g. Times or Arial). The allowed values are:

Value

Example

family-name

{ font-family: Times }

generic-family

{ font-family: serif }

You can specify one or more family names or generic families for the font.

Family names include names such as times, arial, gill and helvetica.

Generic families include the following:

  • serif (e.g. Times)
  • sans-serif (e.g. Helvetica)
  • cursive (e.g. Zapf-Chancery)
  • fantasy (e.g. Western)
  • monospace (e.g. Courier)

It's always a good idea to include at least one generic family, in case the browser can't find a specific font (e.g. not all computers will have Zapf-Chancery installed).

Examples:

p { font-family: "times new roman", serif }

`Take some more tea,' the March Hare said to Alice, very earnestly.

p { font-family: helvetica, arial, sans-serif }

`Take some more tea,' the March Hare said to Alice, very earnestly.



2. font-style

This property controls whether the font is slanted (italicised) or not. The options are:

Value

Example

normal

{ font-style: normal }

italic

{ font-style: italic }

oblique

{ font-style: oblique }

This allows you to set the font style to normal (upright), or italic / oblique (slanted). italic and oblique are usually the same thing on most browsers.

Examples:

p { font-style: oblique }

`Take some more tea,' the March Hare said to Alice, very earnestly.

p { font-style: normal }

`Take some more tea,' the March Hare said to Alice, very earnestly.



3. font-variant

Allows you to choose between normal and small-caps lettering. Small-caps are capital letters used in place of lowercase ones. The original capitals are shown as slightly bigger capitals.

The options are:

Value

Example

normal

{ font-variant: normal }

small-caps

{ font-variant: small-caps }

Examples:

p { font-variant: small-caps }

`Take some more tea,' the March Hare said to Alice, very earnestly.

p { font-variant: normal }

`Take some more tea,' the March Hare said to Alice, very earnestly.



4. font-weight

This controls whether the font is normal weight, bold or light. The options for font-weight values are:

Value

Example

normal

{ font-weight: normal }

bold

{ font-weight: bold }

bolder

{ font-weight: bolder }

lighter

{ font-weight: lighter }

100, 200, ... 900

{ font-weight: 700 }

bolder and lighter will make the font one step bolder or lighter than the default or inherited weight.

The numbers 100 - 900 are a numerical representation for weight, where 100 is the lightest and 900 is the heaviest (boldest). Usually, normal is represented by 400, and bold by 700.

Examples:

p { font-weight: bold }

`Take some more tea,' the March Hare said to Alice, very earnestly.

p { font-weight: 200 }

`Take some more tea,' the March Hare said to Alice, very earnestly.



5. font-size

The font-size value specifies the size of the font used to display the text. There are four types of values that can be used for font-size:

Value

Example

absolute-size

{ font-size: large }

relative-size

{ font-size: smaller }

length

{ font-size: 12pt }

percentage

{ font-size: 150% }

absolute-size values are words specifying definite font sizes. Possible values are: xx-small, x-small, small, medium, large, x-large and xx-large . Although the exact font size represented by, say, large, may vary from browser to browser, you can be sure that large will always be bigger than medium, for example.

relative-size values are relative to the inherited or default font size. Possible values are: larger and smaller. For example, if the inherited font size (from a parent style) is large, a relative-size of larger will set the font size to x-large.

length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the tutorial CSS Units.

percentage values are relative to the parent element's font size. For example, if the inherited font size is 12pt and a percentage value of 150% is specified, the resulting font size will be 18pt. See the tutorial CSS Units for details.

Examples:

p { font-size: 10pt }

`Take some more tea,' the March Hare said to Alice, very earnestly.

p { font-size: larger }

`Take some more tea,' the March Hare said to Alice, very earnestly.

p { font-size: 10px }

`Take some more tea,' the March Hare said to Alice, very earnestly.

p { font-size: 150% }

`Take some more tea,' the March Hare said to Alice, very earnestly.



6. font

The final property is font, which can be used as a shorthand for setting all the previous properties in one line, plus the line-height text property. The following values may be used. Note that the values should be used in the order shown; for example, font-size should come after font-weight.

Depending on which of the three options you use to access information using your Java classes, this information must at some point be saved back to a file (probably to the one from which it was read). When the user of your application invokes a File->Save action, the information in the application must be written out to an ApplicationML file. Now this information is stored in memory, either as a (DOM) tree of nodes, or in your own proprietary object model. Also note that most DOM XML parsers can generate XML code from DOM document objects (but its quite trivial to turn a tree of nodes into XML by writing the code to do it yourself). There are 2 basic ways to get this information back into an ApplicationML file:

  • You can generate the XML yourself (from your object model). If you created an object model that simply imports information from your XML document (using SAX or DOM), you would have to write a class that would convert your object model into an XML file (or set of XML files). This class would have to create an ApplicationML file that contains the information in your Java object model (which is in memory). Since this object model is not an adapter on top of DOM, it is not possible to use the DOM parser to generate the XML for you.
  • You can use the DOM parser to generate the XML for you if you created an object model that is an adapter on top of DOM. Since your object model uses the document object tree, all the information contained in it is actually stored in the tree. The XML parser can take this tree and convert it to XML for you, you can then save this generated XML to a file. So the DOM parser can generate the ApplicationML file for you.

There are advantages and disadvantages to using some of the strategies to import and export XML. The complexity of your application data and available system resources are factors that would determine what strategy should be used.

Value

Example

font-style

{ font: italic }

font-variant

{ font: small-caps }

font-weight

{ font: bold }

font-size
[ / line-height (optional) ]

{ font: 12pt }
{ font: 120%/150% }

font-family

{ font: Times }

Any values not supplied are set to their default values.

Examples:

h3 { font: bold italic 14pt Arial, sans-serif }

`Take some more tea,' the March Hare said to Alice, very earnestly.

body { font: normal small-caps 120%/200% Times }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.



The End

That's the end of this tutorial. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of my and other webmasters.

If you would like to offer us feedback on this or any of the tutorials, please contact us. Have fun!
window onto the document. If the document is too long to be displayed in the window, then the user can scroll back and forth through the document. The center could be two or three "screens" below the beginning of the document, or just far enough down to push much of the background image beyond the bottom of the browser window, as shown in Figure 6-53.

Figure 6-53

Figure 6-53. The background image appears too low to be seen fully

Furthermore, even assuming that the background image is initially visible, it always scrolls with the document. Perhaps you don't 

<STYLE type="text/css"><!--
@import url(sheet2.css);
H1 {color: maroon;}
BODY {background: yellow;}
--></STYLE>

This should cause older browsers to completely ignore not only the STYLE tags but the declarations as well, because HTML comments are not displayed. Meanwhile, those browsers that understand

Youmay have noticed that in almost every circumstance, where we set aforeground color, we also set a background color. In general, this isa good idea. Since you don't know what styles a user may havepredefined, you don't know how your styles might interact withthem. Remember the example where links ended up being white on white?That's the sort of thing we want to avoid.element should be at pixel position 85; even though this is higherthan the top inner edge of the float's parent element, the mathworks out such that the specification isn't violated. A similarline of reasoning explains how the left inner edge of the floatedelement can be placed to the left of the left inner edge of itsparent.

Many of you may have an overwhelming desire to cry"Foul!" right about now. Personally, I don't blameyou. It seems completely wrong to allow the top inner edge to be