{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Font Tutorial

CSS font properties define the font size, font family, boldness of a text and the style of a text.

CSS font-size Property

The CSS font-size property is used to set the size of a text.

The code example below shows you how to use the font-size property to set the size of a text. The font size of the text.

The value of the font-size property can be an absolute or a relative size.

absolute size	Sets the text to the specified size Does not allow a user to change the size of text within a web browser
relative size	Sets the size of the font relative to the surrounding elements A relative font size allows a user to change the text size in their web browsers

NOTE: If the font-size of a normal text (paragraphs) is not set, the default font size is 16 pixels (16 pixels = 1 em).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { font-size:16px; } p.small { font-size:10px; } p.large { font-size:24px; } </style> <body> <p> This text has a font size of 16 pixels. </p> <p class="small"> This text has a font size of 10 pixels. </p> <p class="large"> This text has a font size of 24 pixels. </p> </body> </html>

The web page that the code example creates is here: CSS font-size Property Example.

CSS font-family Property

The CSS font-family property is used to define the font that a text should be displayed in.

The font-family property should include multiple font names in case that the web browser that the web page is being viewed in does not support the first font, the next font in line is tried. A comma is used to seperate each font within that declaration.

If the name of a font family is more than one word, it must be enclosed in quotation marks, for example: "Times New Roman".

The code example below shows you how to define the font of a text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { font-size:16px; font-family:sans-serif, arial, "Times New Roman"; } </style> <body> <p> This text has a font of sans-serif. </p> </body> </html>

The web page that the code example creates is here: CSS font-family Property Example.

CSS font-weight Property

The CSS font-weight property is used to specify the boldness of a font. Most commonly, the boldness of a font is either normal or bold.

The code example below shows you how to set the boldness of a font.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { font-size:16px; font-weight:normal; } p.bold { font-size:16px; font-weight:bold; } </style> <body> <p> This text has a normal font. </p> <p class="bold"> This text has a bold font. </p> </body> </html>

The web page that the code example creates is here: CSS font-weight Property Example.

CSS font-style Property

The font-style property is used to define wether a font is italic, oblique or normal. Most commonly the font-style property is used to specify italic text.

The code example below shows you how to set the style of a font.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { font-size:16px; font-style:normal; } p.italic { font-size:16px; font-style:italic; } </style> <body> <p> This text has a normal font style. </p> <p class="italic"> This text has an italic font style. </p> </body> </html>

The web page that the code example creates is here: CSS font-style Property Example.

CSS font-variant Property

The CSS font-variant property is used to specify wether a text should be displayed as normal text or in a small-caps font. A small-caps font is displayed as smaller capitalized (uppercase) letters.

In a case where a web browser does not have a small-caps font available, the web browser will most likely show the text as uppercase instead.

The code example below shows you how to specify wether a text should be displayed as small-caps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { font-size:16px; font-variant:normal; } p.small_caps { font-size:16px; font-variant:small-caps; } </style> <body> <p> This text has a normal font style. </p> <p class="small_caps"> This text should be displayed as small-caps. </p> </body> </html>

The web page that the code example creates is here: CSS font-variant Property Example.

All font Properties In One Declaration

The CSS font property allows you to set all of the font properties in one declaration.

The code example below shows you how to set all of the font properties in one declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { font-size:18px normal arial, "Trebuchet MS", sans-serif italic; } </style> <body> <p> This is some text. This is some text. </p> </body> </html>

The web page that the code example creates is here: CSS font Property Example.

CSS Font Properties

Property	Description	Values	CSS Level
font	Sets of all properties in one declaration	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit	CSS level 1
font-family	Is used to define the font that a text should be displayed in	family-name generic-family inherit	CSS level 1
font-size	Is used to set the size of a text	xx-small x-small small medium large x-large xx-large smaller larger length % inherit	CSS level 1
font-style	Is used to define wether a font is italic, oblique or normal	normal italic oblique inherit	CSS level 1
font-variant	Is used to specify wether a text should be displayed as normal text or in a small-caps	normal small-caps inherit	CSS level 1
font-weight	Is used to specify the boldness of a font	normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit	CSS level 1

Home

Tutorials

Templates

Free Website Templates

References

CSS References