START A COURSE

The HTML and CSS Blog:

Introduction to CSS: Text Property Summary

CSS Quick Reference: CSS Text Properties

What You Will Learn in this CSS Tutorial

Rather than introduce you to new concepts, this tutorial offers a resource: a handy list of the most commonly used CSS text properties. At the end of this lesson, we share some desktop wallpaper with these items, so you can easily look up CSS properties to control text formatting just by glancing at your desktop.

All the CSS Things!

css tag

Once you understand the basic syntax of CSS rules you may want to quickly look up properties and values. So we’ve created this resource to help you find ’em fast. This quick look up chart focuses on text formatting properties. You should bookmark this page to use as a reference.

As a reminder, the basic syntax is:

property:value;

For more details on how the syntax works, see our recent Introduction to CSS lessons.
CSS text properties

CSS Text Formatting Properties

Text formatting is powerful using CSS — there are lots and lots of properties you can use to control how your text appears.

Here we go!

CSS Property: Valid Values:
font-weight bold
normal
font-style italic
normal
font-family Helvetica, “Gill San”, sans-serif
font-size value (px, em, %)
font-variant small-caps
normal
text-transform capitalize
upppercase
lowercase
text-align left
right
center
justify
text-indent value (px, em, %)
text-decoration none
underline
overline
line-through
letter-spacing value (px, em, %)
word-spacing value (px, em, %)
line-height value (px, em, %)
list-style-type disc
circle
square
lower-roman
upper-roman
lower-alpha
upper-alpha
none
color text color: specify with a named color, rgb values, or hex values.
color: red;
color: rgb(255,0,0);
color: #ff0000;

font-weight

font-weight

Would you like to specify bold or normal weight text? All of the h1 through h6 heading tags appear bold by default, but you can override the HTML defaults with the CSS property font-weight.

Examples:

Making a heading appear in normal weight:

Making list items in a bulleted list appear bold:

Back to Top (Reference Chart)

font-style

font-style

To italicize text with CSS, use the font-style property. Valid values include italic and normal.

Examples:

Making paragraphs appear in italics:

Back to Top (Reference Chart)

font-family

font-family

The default font for web sites is Times Roman, unless the person viewing the page has changed their browser settings to change the default font. The font-family property allows you to specify fonts. It is a common practice to list several fonts, comma separated, so that there is a fall-back font option if the first choice font is unavailable.

Examples:

If the font name has spaces in it, such as “Times New Roman” or “Gill Sans”, place quotes around the font name (otherwise the browser may be looking for each word individually, like a font named “New” or “Gill”).

You can end the font list with a generic category such as “serif” or “sans-serif” so that if none of your fonts are available it would at least default to the same type of font.

Back to Top (Reference Chart)

font-size

font-size

HTML tags have default font sizes, which you may override with the CSS property font-size. CSS values for font-size can be measured in a wide range of systems, even including obscure choices like inches (in), centimeters (cm), and millimeters (mm). The most common practice is to measure font sizes in pixels (px), ems (em), or percentages (%).

Examples:

Here are several examples using various measurement systems. The first rule, targeting body, is resetting all the HTML tags, making them 80% smaller than their default HTML sizes. The additional rules are getting more specific, and targeting the h2 heading tag (<h2>), and the paragraph tag (</h2>).

It’s smart to start with a CSS rule to reset the overall default sizes of HTML tags by specifying “body” as your CSS selector. The logic is that since the body tag surrounds all the other HTML tags on your page, you can specify a CSS property on body and the property is inherited by all the children tags inside body. You can think of the body selector as a quick way to set text properties on all tags on the page.

Back to Top (Reference Chart)

font-variant

font-variant

You can choose to have text display with two sizes of capital letters, a smaller size used for the lowercase letters to create small caps, a very formal appearance. Use the CSS property font-variant, with the value small-caps.

Example:

Making the h3 headings appear in small caps:

Back to Top (Reference Chart)

text-transform

text-transform

Did you ever want to change text from upper and lowercase to all caps without having to type or change the HTML at all? You can use CSS to change the case of your text. Easy! The CSS property is text-transform with values including uppercase, lowercase, and capitalize.

Examples:

Making h3 heading appear in all uppercase letters:

Making h3 heading appear in all lowercase letters:

Making h5 heading appear with the first letter of each word capitalized:

Back to Top (Reference Chart)

text-align

text-align

The default alignment for HTML paragraphs is left-aligned text, which happens to be the easiest way to read text. CSS allows you to override the default appearance of HTML text alignment with the text-align property. Your choices for the text alignment value include left, right, center, and justify.

Example:

Making the h3 heading appear centered:

Making paragraphs appear with justified paragraph alignment, meaning both the left and right sides of the paragraph are aligned:

Back to Top (Reference Chart)

text-indent

text-indent

You can indent the beginning of a paragraph (the first line) with the CSS property text-indent. Specify a value in pixels (px), ems (em), or percentages (%).

Example:

Making paragraphs appear with the first line of the paragraph indented by 1em:

Back to Top (Reference Chart)

text-decoration

text-decoration

The text-decoration property is most commonly used to remove the default underline of linked text. Since the default value is to underline links, you can use the value none to remove them.

Examples:

Here is a CSS rule that is specifying link text color (rather than the default blue links color) and removing the link underlining:

The selector for links looks different from just a plain tag selector like a (a for anchor tag <a>) because it is also defining a state of the link. The selector for links in their default state, before they have been clicked, is a:link. Adding the :link defines the state of the link we are targeting.

You can also construct rules for the hover and visited states of your links, using a:hover and a:visited as your selector.

See our lessons on links and link styles, in the next lessons coming up soon!

Back to Top (Reference Chart)

letter-spacing

letter-spacing

Sometimes when I use all uppercase text, I like to add a little letter spacing to make it easier to read. You can use the letter-spacing CSS property to add spacing (called tracking in InDesign). The values can be measured in pixels (px), ems (em), or percentages (%).

Examples:

Add spacing between letters in the h4 headings and specify all uppercase:

Back to Top (Reference Chart)

word-spacing

word-spacing

After adding the letter spacing, you may also need some extra space to separate words clearly. The CSS property word-spacing lets you control the space between words. The values can be measured in pixels (px), ems (em), or percentages (%).

Example:

Add spacing between words in the h4 headings, in addition to the letter spacing and all uppercase:

In these examples we’ve combines several CSS properties to finesse the appearance of our h4 headings. This CSS rule is making the heading all uppercase, slightly letter spaced, and some additional word spacing. CSS really gives you a lot of control over the appearance of your text, and allows you to add as many properties as you need to a single rule.

Back to Top (Reference Chart)

line-height

line-height

If you have paragraphs of text you may want to control the vertical spacing between the lines of text within a paragraph. I would call this line-spacing in Word, or leading in InDesign. CSS calls this property line-height. Your values can be measured in pixels (px), ems (em), or percentages (%).

The average line-height used on well-designed web sites for comfortable reading is 150%. You could also measure that as 1.5em or 1.5 x your font-size.

Example:

Making paragraphs appear in italics:

Back to Top (Reference Chart)

list-style-type

list-style-type

If you have bulleted or numbered text using the ordered list tag (<ol>) or unordered list tag (<ul>) you might want control over how the bullet or number appears. The list-style-type CSS property allows you to specify a few properties for bullets, including disc, circle, or square. For numbered lists, you can change from the default numbers to letters, or roman numerals, and also choose whether the letters are upper or lowercase. The values for ordered list items includes lower-roman, upper-roman, upper-alpha, and lower-alpha.

Example:

Making list item bullets appear square:

Back to Top (Reference Chart)

color

color

To change the color of text, use the CSS property color. The values can use named colors, rgb values, or hex values.

Examples:

Making paragraphs appear in red:

Check out our upcoming lessons on specifying web color using hex values and rgb values.

Back to Top (Reference Chart)

CSS Text Properties Desktop Wallpaper

We put these CSS properties lists on some graphic wallpaper that you can put on your desktop. (Not sure how to change your desktop wallpaper? Here’s an article from About.com with a how-to.) With this wallpaper on your desktop, you can quickly and easily look up the CSS you need as you want it.

Download: CSS Properties Desktop Wallpaper

Common CSS properties desktop wallpaper

Right-click, choose “Save as” to download the wallpaper to your computer

Stay tuned! We will be going into more detail on CSS styling in the lessons ahead.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.