Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

CSS basics – font-weight and font-style

CSS fontsThe appearance of text can be further controlled on webpages with the font-style and font-weight properties which provide the ability to italicize and bold text.

The use of these definitions is a replacement to the deprecated tag <b> and <i>

font-style

The font-style is used to make text italic, oblique [Whilst this is a different definition, where the text is intended to be a slanted normal font, the result in most browsers is the same as italic.] or normal. Note that not all fonts have an italic version, so results using uncommon fonts may vary.

p {font-style:italic} sample
p {font-style:oblique} sample
p {font-style:normal} sample
p {font-style:inherit} sample

font-weight

In order to specify how bold a font is, the font-weight property can be used. Font weight can be specified in several ways, either by keyword or by numerical value. Available keywords are normal, bold, bolder, and lighter. The numerical values were created to avoid confusion with font names and are values starting at 100 and going to 900 in increments of 100. A value of 400 is the same as normal, and a value of 700 is the same as bold.

p {font-weight:400} sample

strong {font-weight:700} sample

This entry was posted on Wednesday, August 22nd, 2007 at 10:35 am and is filed under CSS Tips, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “CSS basics – font-weight and font-style”

  1. freelancer says:

    HTML has [b] and [strong], which however seem to look similar. Is font-weight in CSS replacement for both?

  2. chicane says:

    The [b] tag has been deprecated, and should no longer be used, but replaced with CSS definitions, including font-weight. The [strong] tag is recommended, and most browsers will display this as bold text by default.