CSS has a lot of ways you can style your text, here are some of the must popular. For help with coloring your text, check out the CSS color guide.

Font Families

By default, web pages use a black Times New Roman font on a white background. Personally, I got tired of that font about 5 seconds after seeing it, so I started to get creative with my fonts. In this section, I'll explain how to do all kinds of fun things with text.

Text on a website is presented in different typefaces, also known as Fonts. Here are some examples of commonly used web fonts:

The font-family property specifies the font for an element. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on, if no known font is listed, Times New Roman will be shown. CSS Font Stack is a useful resource for finding font families.

Here's an example of how to specify a font family for a paragraph:

p {font-family: "Times New Roman", Georgia, Serif;}

Note:When a font name has more than one word, it must be quoted.

Font sizes

They're several different ways of specifying font size.

Pixels

Pixels give very precise control over how much space the text takes up.

Percentages

These take a percentage of the default text size (16px). If the percentage you give is 150%, then the element will be 24px.

Ems

An em is equivalent to the width of the letter m.

Code:	Looks Like:
p {font-size: 8px;}	Size 8px font
p {font-size: 200%;}	200% font
p {font-size: 1.5em;}	1.5em font

Basic styling

A lot of this styling is perfectly acceptable to do in HTML, but if for example you want every single h1 underlined and every single h2 in italics, it saves a lot of time to do one simple line in CSS.

Code:	Looks Like:
p {font-weight: bold;}	Bold text
p {font-style: italic;}	Italic text
p {text-decoration: underline;}	Underlined text
p {text-decoration: overline;}	Overlined text
p {text-decoration: line-through;}	Stricken through text
p {text-align: left;}	Left aligned text
p {text-align: right;}	Right aligned text
p {text-indent: 20px;}	Indented text

Styling Bullets

ul {list-style-type: circle;}

ul {list-style-type: square;}

ol {list-style-type: upper-roman;}

ol {list-style-type: lower-alpha;}