Home arrow DHTML arrow Page 2 - Floats, Fonts, and Other Style Sheet Property References

Floats, Fonts, and Other Style Sheet Property References

In the latest part of our continuing series on style sheet properties, you'll learn about floats, fonts, and more. This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
September 27, 2007
  1. · Floats, Fonts, and Other Style Sheet Property References
  2. · Fonts
  3. · More on Fonts
  4. · Height

print this article

Floats, Fonts, and Other Style Sheet Property References - Fonts
(Page 2 of 4 )

IE 4 NN n/a Moz all Saf all Op all CSS 1

Inherited: Yes

This is a shorthand property that lets you set multiple font-related properties with one assignment statement. Some browsers are more forgiving than others about required and optional values, but this property should at least specify the font-size  and font face (either by font-family  or CSS2FontConstant values) in that order. The order of other space-delimited value types is not critical. In CSS2, some additional short-circuit constants apply named system fonts that have fixed values for each of the font-related properties.

CSS Syntax

font: font-style || font-variant || font-weight || font-size[/line-height] ||font- family | CSS2FontConstant


For syntax and examples of value types for font and line properties, see the respective property listing. The construction with the forward slash before the line-height value allows the use of a second length value within the potentially long sequence of values for this property: the line-height  length value must always accompany the required font-size  value, separated by a forward slash.

The CSS2 font constants are as follows: caption | icon | menu | message-box | small-caption | status-bar . These constants refer to browser and operating system fonts used by the client. Their precise appearance is therefore different on different operating systems but consistent with the user’s expectation for a particular type of font. In other words, these styles should be used when their function mirrors a system or browser function.

Initial Value         None.


body {font: 12px serif}
h2 {font: bolder small-caps 16px "Lucida Console", Arial, sans-serif}
.iconCaption {font: 10px/1.1em caption}

Applies To          All elements.

Object Model Reference


IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: Yes

Sets a prioritized list of font families to be used to render the content. One or more font family names may be included in a comma-delimited list of property values. If a font family name consists of multiple words, the family name must be inside quotes.

A font family may consist of multiple font definitions. For example, a Helvetica font family may also include a bold version and an italic version—genuinely distinct fonts rather than the approximated versions of bold and italic. When you specify a font family by name, the browser looks into the client’s system to see if there is a font available by that name. If not, the browser looks to the next font family name in the list. Therefore, it is wise to include font family names in a sequence that goes from the most esoteric to the most generic. The final font family name should be the generic family ( serif , sans-serif , cursive , fantasy , or monospace ) that most closely resembles the desired font. Many fonts that are widely installed on one operating system may not be as popular on another operating system.

Browsers following the CSS2 specification should also be smart enough to recognize Unicode character codes and try to match them with named font families that cater to particular languages. Ideally, this will allow a browser to mix fonts from different languages and writing systems in the same element, provided each font-family is listed in the prop erty value.

CSS Syntax

font-family: fontFamilyName [, fontFamilyName [, ...]]



Any number of font family names, comma delimited. Multiword family names must be quoted. Recognized generic family names are: serif | sans-serif | cursive | fantasy | monospace

Initial Value         Browser default.

Example           body {font-family: "Century Schoolbook", Times, serif}

Applies To             All elements.

Object Model Reference



Internet Explorer provides facilities for downloading font definition files for a browser that doesn’t have a special font that the page designer wants for the page. The font definition files must be created by the author using browser-specific font conversion tools. An @font- face style sheet rule downloads the font definition file and associates that font description with an arbitrary font family name:

  @font-face {font-family: Neato; src: url(http://www.giantco.com/fonts/neato.eot}

See “At-Rules” earlier in this chapter for details on deploying this type of style rule. You then specify the font in regular font-family style properties. If the font has yet to down load, the browser displays the page in another font until the downloadable font has arrived. At that point, the page is reflowed with the downloaded font.

IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: Yes

Determines the font size of the element. The font size can be set in several ways. A collection of constants ( xx-small , x-small , small , medium , large , x-large , xx-large ) defines what are known as absolute sizes. In truth, these are absolute as far as a single browser in a single operating system goes because the reference point for these sizes varies with browser and operating system (analogous to the old HTML font sizes of 1 through 7). See Figure 4-4 for size comparisons viewed on the same video monitors. But they let the author have confidence that one element set to large is rendered larger than another set to medium .

Another collection of constants ( larger , smaller ) are known as relative sizes. Because the font-size property is inherited from the parent element, these relative sizes are applied to the parent element to determine the font size of the current element. It is up to the browser to determine exactly how much larger or smaller the font size is, and a lot depends on how the parent element’s font size is set. If it is set with one of the absolute sizes ( large , for example), a child’s font size of larger means that the font is rendered in the browser’s x-large size. The increments are not as clear cut when the parent font size is set with a length or percentage.

If you elect to use a length value for the font-size property, choose a unit that makes the most sense for fonts rendered on the output medium, such as pixels ( px ) for screen display and points ( pt ) or ems ( em ) for printed output. Em values are calculated relative to the size

Figure 4-4.  Font size constant values in Firefox 1.5 on the windows and Mac platforms

of the parent element’s font size. Finally, you can set the font-size to a percentage, which is calculated based on the size of the parent element’s font size.

Some browsers hijack your best efforts at precisely sizing fonts, using their own (or user) settings to establish a “medium” size. That is why many designers prefer to rely on the relative-size constants for their font-size specification schemes. This choice means giving up a level of control over rendering from one browser and operating system to the next, but attempting too strict control on uniform rendering generally leads to utter frustration.

CSS Syntax

font-size: absoluteSize | relativeSize | length | percentage


For an absolute size, one of the following constants: xx-small | x-small | small | medium | large | x-large | xx-large . For a relative size, one of the following constants: larger | smaller . For a length, see the discussion about length values at the beginning of this chapter. For a percentage, the percentage value and the % symbol.

Initial Value

medium (for BODY element); the parent element’s font-size value (for all others).


body {font-size: 14pt}
p.teeny {font-size: x-small}
em {font-size: larger}
span.larger {font-size: 150%}

Applies To         All elements.


Object Model Reference


IE n/a NN n/a Moz n/a Saf n/a Op n/a CSS <2.1

Inherited: Yes

Allows an element to preserve the x-height (measured in exes) of a “first choice” font when substituting fonts. The z-factor is a ratio of the em- to x-heights of a font. Because different fonts set to the same font size can look larger or smaller than neighboring fonts on a page set to the same size, the z-factor can be used to calculate the ratio and apply it to other fonts. Even though the resulting font size may be larger or smaller than the “first choice” font setting, the perceived size is much more accurate. This also tends to equalize the horizontal metrics of fonts so that word-wrapped lines break at the same place with different font families.

CSS Syntax

font-size-adjust: 0.47


A number representing the aspect value of the preferred font (perhaps obtainable from the font maker) or none.

Initial Value         none 

Applies To            All elements.

Object Model Reference


blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials