web blazonry web development scripts and tutorials Get best price on Unlocked Moto G Power
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

CSS Home

CSS Tutorial
  Getting Started
  The Basics
  Fonts and Text
  Tips and Tricks
  Problems & Compatibility
  CSS Reference Guide

Bookmark and Share

CSS Tutorial: Fonts and Text


Finally some real control over fonts, yipee!! There are 5 font properties, and 1 shorthand:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font (shorthand)

The font-family property specifies what font will be used, ie. Courier, Helvetica, Arial, etc... or if not available what general family to be used: serif, sans-serif, monospace.

The fonts are listed in preferred order. One nice thing about listing numerous fonts, is that a character which may not be available in one font will try to be extracted out of the next one listed.


BODY { font-family: Times, TimesRoman, serif }
P { font-family: Helvetica, Verdana, Arial, sans-serif }
H1 { font-family: Monaco, Courier, monospace }

Other generic font families that can be used are cursive and fantasy. The generic font families above are serif, sans-serif and monospace. If your font has more than one word use quotes.

.comix { font-family: "Comic Sans MS", sans-serif }

Valid values for font-style are normal, italic, and oblique. Very straight forward, oblique is similar to italic.

Valid values for font-variant are normal and small-caps. Small caps displays the lowercase letters as scaled down uppercase letters.

This property specifies what you want the font to weigh, ex. 50 lbs of pure Courier. Well not exactly, the weight of the font is the boldness, or lightness of the font. The valid values that you can assign font-weight are:
normal, bold, bolder, lighter
and 100, 200, 300, 400, 500, 600, 700, 800, 900
Note: normal=400, bold=700

You guessed it, this specifys the size of the font. There are 5 different ways you can specify the font size. In no particular order, here they are:
absolute size:
point size: ie. 7pt, 22pt, 14pt, 36pt, 72pt, ...
pixel size: ie. 100px, 45px, 90px, 10px, ...

relative size:
key words: xx-small, x-small, small,
medium, large, x-large, xx-large
percentage: 24%, 58%, 150%, 10%, 100%, ...
ems: .24em, .58em, 1.5em, .1em, 1.0em, ...

For font-size, ems are equivalent to percentages. Also you only put in the values for the size you want, do not specify the descriptive words absolute size, point size, etc...

Pixel sizing is not recommended by Netscape. The relative sizes are relative to the parent element. For example, if a base font size is set in the BODY, then the the relative sizing is relative to that base font size.

Font is a shorthand notation to keep our sheets a little cleaner and neater. The order of the shorthand is 'font-style' 'font-variant' 'font-weight' 'font-size' 'font-family' Also keeping with normal typographical syntax, you can specify the leading, or line-height along with the font-size by using font-size/line-height.


H1 { font: bolder 72pt Impact, "New SchoolBook", sans-serif }
H2 { font: 700 36pt/48pt Monaco, Courier, monospace }
H5 { font: lighter 12pt Times, TimesRoman, serif }


There are 5 text properties that you can specify:
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • text-align
  • text-indent
  • line-height
letter-spacing and word-spacing
Exactly how it sounds this specify the spacing between letters and words. The valid values are length values, such as em, px, pt, %,...


P { word-spacing: 0.75em; letter-spacing: 10px; }

The text-decoration values you can assign to it are: normal, underline, overline, line-through, and blink (blech!!) Each one is fairly self explanatory.

Valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom.

I am not exactly sure the minute differences between all of these, play around with different alignments and see what does what.

I think this property is one of the neater properties that I probably will never use. The property can transform the text to all uppercase, all lowercase, and capitalized. The valid values are: none, capitalize, uppercase, lowercase.

I'll probably never use them, because I would just type the text how I want it, and wouldn't need a style sheet to control it, but it may be useful somehow.

This probably should have been called horizontal-align, since they have a vertical align, but my guess is that that is to hard to spell and type in numerous times. Valid values for text-align are: left, right, center, and justify.

Indented a paragraph, what a concept. Valid values are length and percentages. This property will indent the first line in a paragraph, the sepecified length or percentage.


.indent1 { text-indent: 1.0em; }

.indent2 { text-indent: 30px; }

click here for this example

This allows you specify the height of a line, which will allow you to specify the distance between two lines. I found this a little tricker to use, it does not work well as an inline property, I found as a paragraph property works pretty good.

Valid values are: length and percentages, negative values are not allowed.


P.listi { line-height: 80%; }

This property is used on this page twice, when I list out the valid properties that Font and Text have.

Next >>


Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources

  privacy policy     ||     © 1997-2016. astonishinc.com   All Rights Reserved.