CSS Font Properties

Nana Gilbert-Baffoe

Printer Friendly Version

When working with fonts, you can easily achieve the look you want by manipulating the CSS font properties. Whist this you can set properties such as the type of font to be used, the font's color and many other properties that affect the font's general appearance. The following is a closer look at the different CSS properties that you need to know about when working with fonts.

Color

The color property is not actually a font property, but it is used to change the foreground color of any element's text. Therefore I've decided to included here, its syntax is as follows

Selector { color: colorValue }

Any of the following methods may be used to enter the colorValue:

Named colors such as blue, yellow and purple

Selector { color: 
blue }

Three-digit RGB values such as # 696, # C0F and #3F3

P { color: #06C }

Six-digit RGB values such as #669966, #CC00FF and #33FF33

P { color: #0066CC }

Integer values between 0 and 255 such as rgb(141,233,154), rgb(34,234,270) and rgb(34,23,270)

P { color: rgb (34,234,70) }

Floating point values such as rgb14%, 33%, 15%), rgb(3%, 24%, 20%) and rgb(34%, 23%, 27%)

P { 
color: rgb(34%,23%,27%) }

Try It Out - The color Property

<html>
<head>
<style type="text/css">
<!--
P {color: Navy;}
DIV {color: #339933;}
-->
</style>
	<title>The color Property</title>
</head>

<body>
<p>This text is Navy</p>
<div>This text is Green</div>
</body>
</html>

Take a look

How it works
In this example, the text color of the DIV and P elements has been set using an embedded style sheet. This style sheet is defined at the top of the document, inside the STYLE element.

<style type="text/css">
<!--
P {color: Navy;}
DIV {color: #339933;}
-->
</style>

The HTML comments  are used to make sure the older browsers that don't support will not render the style declarations as text. The first line sets the P elements in the document to display in Navy, and the second line uses a 6-digit RGB value to display text contained in DIV in green. Font-family The font-family property lets you pick which font will be used to display a certain block of text. These font names can be any of the fonts found on your computer, but take into consideration that not all web users will have the same fonts that you have. To take care of this problem, the font property can accept a comma-separated list of font names. If the first font is not found, the next font in the list will be used. The font -family property also accepts generic font family names such as cursive, fantasy, monospace, sans-serif, and serif.

Try It Out - The font-family Property

<html>
<head>
<style type="text/css">
  <!--
  P  {font-family : Times New Roman;}
  
  DIV  {font-family : Courier; }
  -->
  </style>
	<title>The font-family Property</title>
</head>
<body>
<p>This font is Times New Roman</p>
<div>This font is Courier</div>
<p style="font-family:cursive">This generic font family is Cursive</p>
<p style="font-family:fantasy">This generic font family is Fantasy</p>
<p style="font-family:monospace">This generic font family is Monospace</p>
<p style="font-family:sans-serif">This generic font family is Sans-serif</p>
<p style="font-family:serif">This generic font family is Serif</p>
</body>
</html>

Take a look

How It Works
This example demonstrates two different ways of applying styles to an element. The first method embeds the style using the STYLE element and the second is via inline styles. In the STYLE element, the P element has been set to use the Times New Roman font, and the DIV elements will display using Courier. The five P elements after the DIV element all use inline styles. Since inline styles override any embedded styles, the text inside these P elements do not display using the Courier font. They are displayed using the generic font family names. Since you may not have the same fonts we have on our systems, the output of this listing may be slightly different from that shown in the screenshot.

Font-size

I bet you've often gotten tired of the minimal control you had over font sizes when using the FONT element. Now, with CSS you can set your font sizes using a wide variety of different measurements, this includes points, pixels, ems and percentages. Let's look at an example:

Try It Out - The font-size Property

<html>
<head>
	<title>The font-size Property</title>
</head>
<body>

<p style="font-size: xx-large;">This font is xx-large</p>
<p style="font-size: x-large;">This font is x-large</p>
<p style="font-size: large;">This font is large</p>
<p style="font-size: medium;">This font is medium</p>
<p style="font-size: small;">This font is small</p>
<p style="font-size: x-small;">This font is x-small</p>
<p style="font-size: xx-small;">This font is xx-small</p>
<p style="font-size: 12pt;">This font is 12 pt</p>
</body>
</html>

Take a look

How It Works
The first seven P elements use absolute font size names that are stored in the browser. Each name actually corresponds to a font size. The last P element's size is set to 12 pts. If you have Internet Explorer, go to the View menu and select Text Size. Now choose any of the other values in that sub-menu, you'll notice that the sizes of all the P elements change except for the last one. If you want your users to be able to adjust your sites font for better viewing, it's best not to use points to define your font sizes. On the other hand, there are times when your layout will depend on font sizes, and you'd rather not give the user the ability to change the font size. This is when using points is a good idea.

Font-style

Using the font-style attribute, you can emphasize text by setting the display attribute to oblique or italic. Both oblique and italic display a slanted font and you can return a font's style back to normal by setting the font-style to normal.

Try It Out - The font-style Property

<html>
<head>
	<title>The font-style Property</title>
</head>
<body>

<p style="font-style: normal;">This font is normal</p>
<p style="font-style: italic;">This font is in italics</p>
<p style="font-style: oblique;">This font is oblique</p>

</body>
</html>

Take a look

How It Works
This simple example shows you how the three different values for the font-style property affect the way font are displayed. In this example both italic and oblique show the same results.

Font-variant

The font-variant property allows you to set a font to display with small caps. This means that all lowercase letters are displayed in caps, however, they will be smaller than normal uppercase letters.

Try It Out - The font-variant Property

<html>
<head>
	<title>The font-variant Property</title>
</head>
<body>

<p style="font-variant: small-caps">This sentence should be in small caps</p>
</body>
</html>



Take a look

How It Works

In this example, the paragraph is meant to display the sentence using small caps. However, some browsers do not yet support this property and will display the text using all caps.

Font-weightThe font weight sets the weight of 
the font, most of the time you'll be setting this property's value to bold. But 
there are other values you may use, this includes normal, bolder and lighter. 
You can also use 100, 200, 300, 400,500, 600, 700, 800, and 900 as values. In 
this scale 100 is the lightest, 900 is the darkest. The using bold as a value is 
the same as setting it to 700. 
Try It Out - The font-weight Property

<html>
<head>
	<title>The font-weight Property</title>
</head>
<body>

<p style="font-weight: 100;">This font is as light as it can get</p>
<p style="font-weight: bold;">This font is bold</p>
<p style="font-weight: 900;">This font is as bold as it can get</p>
</body>
</html>


Take a look
How It Works

The example provides a comparison between bold and the lightest and darkest values. The first P element's font-weight has been set to 100; from the output displayed, 100 looked very much like normal it wasn't as light as expected. The second P element was set to bold, and finally the last P element was set to 900. 

Font
The font property is a shorthand property because you can use it to set a whole range of font properties at one time. The following are the properties you can set using the font property, they must be used in the following order: font-style, font-variant, font-weight, font-size, line-height, and font-family.

Try It Out - The font Property

<html>
<head>
	<title>The font Property</title>
</head>

<body>
<div style="font:italic bold 24pt/1.5 sans-serif">
This is the first line.<br>
Now we are on line 2.
</div>

</body>
</html>


Take a look
How It Works

The shorthand font property set in this example sets a value for all but one of the six possible properties that can be set. We intentionally left out the font-variant value because of the fact that it doesn't work as it should in all browsers. Notice that instead of a space between the font-size and the line-height, there is a /. In addition to this, if you enter multiple fonts for the font-family property, you must separate each font name with a comma. Just like in the following:

<div style="font:italic bold 24pt/1.5 Arial, sans-serif">


Onto Page IV

Back Page II

About the Author

Nana Gilbert-Baffoe is founder of the S2SNetwork. The Student-to-Student Trading Network

   

		Printer Friendly Version