• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Books
    • Content Strategy for WordPress (2015)
    • WordPress for Web Developers (2013)
    • Beginning WordPress 3 (2010)
  • Blog
    • Content Modeling for WordPress
    • WordPress Hidden Gems
    • Web Design
  • Work
    • Presentations and Interviews
    • on GitHub →
    • MLIS Class Projects (2019-2022)
    • Portfolio (2002-2019)
    • WordPress Plugins

Stephanie Leary

Writer, Front End Developer, former WordPress consultant

  • About
    • Press Kit
    • Presentations and Interviews
  • Contact Me

CSS Primer

March 7, 2003 Stephanie Leary

I found this in my files at work today. I don’t know when or why I wrote it, but it might be of use to someone….

CSS is a badly named, very powerful tool for controlling the look of your site. CSS is good for making site-wide style definitions. You can replace a common font declaration with:

p {

font-size: medium;

color: #003;

}

Because this defines everything enclosed by paragraph tags, you no longer need to use font tags to control the display of your text.

(I should point out here, for the people who are staring at #003 and scratching their heads: CSS lets you use shortcuts for hex color values if all your numbers are in pairs. #000033 -> #003, #ff0000 -> #f00, etc.)

You can define more than one tag at a time:

p, li, dd {

font-size: medium;

color: #003;

}

Imagine that you want a black border and a two-pixel space around all images on your site. Write:

img {

border: 1px solid #000;

margin: 2px;

}

Want that space inside the black border instead?

img {

border: 1px solid #000;

padding: 2px;

}

Imagine that your boss decides that all headers will now be maroon instead of blue. You can add

h1, h2, h3, h4, h5, h6 {

color: #600;

}

to your stylesheet, and the change is applied across all your pages without your having to open and edit each one.

Applying the CSS to all your documents is easy if you have an authoring tool that allows global search-and-replace. Search for:

And replace it with:

For more detailed and extensive CSS information, see the following sites:

CSS Panic Guide

CSS-Discuss mailing list (check out the wiki!)

SelectOracle

Web Design

This is an excerpt from Content Strategy for WordPress.My latest books are Content Strategy for WordPress (2015) and WordPress for Web Developers (2013). Sign up to be notified when I have a new book for you.

Footer

My Books

I’m a front end developer at Equinox OLI, working on open source library software. I was previously a freelance WordPress developer in higher education. You can get in touch here or on LinkedIn.

Copyright © 2025 Stephanie Leary · Contact