Journalists' Toolkit > HTML and CSS > CSS Basics

CSS Basics

In HTML, <div> is a layout and design tool. When you surround a block of text, or a block of text and images, in <div> tags (HTML), you can use id or class (CSS) to position or change other aspects (such as the background color or width) of only that block.

Let's look at the elements of CSS you really need to know well:

background
Allows you to change the background attributes (such as color) of an element such as a paragraph, link, div, or entire Web page.
color
Allows you to specify the color of text.
margin
Allows you to specify the width of top, right, bottom and left margins -- for any element such as a paragraph, link, or entire Web page.
padding
Allows you to specify the width of top, right, bottom and left padding inside an element -- for any element such as a paragraph, div, or image.
border
Allows you to specify the thickness, style and color of a border -- for any element such as a paragraph, div, or image.
font-family
Allows you to specify a hierarchy of font families for any element such as a paragraph, div, or entire Web page. For information about typography and CSS, see the Design Resources page here at Journalists' Toolkit.
font-size
Allows you to specify the size of the font for any element such as a paragraph, div, or entire Web page.

Styles for Links in CSS

There are five of these:

You really need to specify ALL FIVE in your CSS. If you don't, users are likely to see some ugly color effects. Your links might even be invisible!

If you don't feel like specifying all of them, at least spec a and a:hover. But be aware that a alone will also affect name anchors: <a name> </a> in HTML, which you may or may not be using. (See this page for more information about name anchors -- "the name Attribute" -- and links in general.)

Reset CSS

Many Web designers use a "reset" stylesheet. The most commonly used one comes from Eric Meyer. You can download it (and also learn all about what it does) at his Web site.

Know the Difference

Between <div> and <span> (see an explanation).

Between display:block; and display:inline; (see an explanation).

Between id and class (see an explanation).

What About CSS3?

I wrote a blog post about this in May 2010: Tips for HTML5, part 6: A look at CSS3. Summary: The CSS we have been using stays the same, and some cool new capabilities are being added.

Tutorial. Examples. Cheat Sheet.

Go to w3schools.com for CSS tutorials.

CSS3 Quick Reference Guide (PDF, 5 pages, 124 KB)

See my Delicious bookmarks tagged "CSS."

Creative Commons License This page was written by Mindy McAdams and updated on Jan. 17, 2011. It is available for re-use under a Creative Commons license.