Behind every WordPress blog is a theme that controls the look and layout of the blog. As I explain in “Make a Website, Changing the Look and Layout with a WordPress Theme,” you can change the entire look and layout of your WordPress blog by installing and activating a different theme.

Every theme contains one or more CSS (Cascading Style Sheets). Each stylesheet contains codes that tell Web browsers how to display particular elements on your blog, including text, images, sidebars, headers, and footers. CSS codes are structured something like this:

selector { property: value; }

The selector indicates the element that the style applies to (such as a heading, paragraph, or image), the property defines the aspect of the object that will be modified (such as its color or alignment), and the value defines the setting for the property (such as blue or center). Here’s an example:

h3 {color: #0033FF; font-size: 22px; font-family: Arial; padding-bottom: 20px; }

This “style” tells Web browsers to display any text formatted as a Heading 3 (using the HTML tag <h3>) as blue, 22 pixels, Arial followed by 20 pixels of blank space below it.

As you’re composing blog entries, any text you format as a Heading 3 will be formatted according to the CSS property values assigned to it. You can change the appearance of all Heading 3 items in your blog simply by editing the h3 entry in your blog’s stylesheet as explained later in this post.

Tip
For a list of CSS properties and values associated with each property, check out the W3 School’s CSS Reference.

Understanding CSS Selectors

A CSS selector indicates the type of object each property value is applied to. Common selectors include…

• p for paragraphs
• img for images
• h1, h2, h3, h4, h5… for headings
• ul for unnumbered (bulleted) lists
• ol for numbered lists
• li for items in a list

This is pretty simple stuff, but CSS complicates things by allowing for a couple different types of selectors, as described in the following sections.

Tip
You can group selectors to apply property values to two or more elements. For example, h1, h2, h3, h4, h5 {color:blue; } would make all headings numbered 1-5 blue.

Class Selectors

A class selector enables you to create multiple style rules for a given element. For example, you can create three paragraph classes – p.left {text-align: left}, p.center {text-align: center}, and p.right {text-align: right}. When composing your blog entry, you can add the class attribute to a paragraph’s opening tag to specify which class you want to apply, for example ><p class=”center”>.

You can also create a class that is not associated with any given element by omitting the element designation from the selector. For example, you can create a .center {text-align: center} class, which you can then apply to any text element, such as paragraphs, images, headings, addresses, and definitions. For example, <img class=”center” src=”http://www.mydomain.com/images/image.jpg” /> would center an image while <p class=”center”> would center a paragraph.

ID Selectors

ID selectors are similar to class selectors, but they use a pound sign (#) instead of a period and apply formatting to only a single occurrence of a specific element. For example, you can apply p#footer {font-size: small; font-style: italic} to a paragraph at the bottom of a page to display the paragraph as a footer in small, italic text.

Some theme designers use the ID selector to apply different formatting for different sections of the blog; for example, #content li to control the appearance of list items in the content area and #l_sidebar li to control the appearance of list items in the left sidebar.

CSS Comments

Most WordPress stylesheets include comments that serve no other purpose than to provide information to anyone who may want to edit the file, including you. Comment text is marked with a forward slash followed by an asterisk, like this:

/* This is a comment. */

Comments usually designate groups of CSS formatting codes. For example, the designer may include a comment before each group of codes that apply to the header, footer, and content area. You can learn a great deal about how a designer formatted particular elements by reading the comments.

Tip
It’s a good idea to insert a comment describing any changes you make to your blog’s stylesheet, so you can easily change the setting back if something goes wrong. At least make a note of any changes.

Editing Styles in WordPress

You can edit your blog’s stylesheet and other files that comprise the theme you’re using from within WordPress. Here’s what you do:

• Log in to WordPress as you normally do. The WordPress Dashboard appears.
• Click Appearance and then Editor. The contents of your blog’s stylesheet should appear. If it doesn’t, click the Stylesheet link under Styles.
• Edit the styles as desired. (Editing styles is like editing any text document.)
• Click the Update File button to save your changes.

Editing Styles in Thesis

If you’re using the Thesis theme (which I use on this blog as well as most of the blogs I manage), editing styles is a little more complicated at first, but after you learn the basics, managing your styles with Thesis is actually easier. The difference is that Thesis discourages users from editing the stylesheet directly. Instead, you leave the stylesheet as is and enter any changes in a separate Thesis custom stylesheet. This way, if you make a mistake, you know exactly where to find it – in the custom stylesheet.

Tip
The Thesis how-to manual tells you to download the file you want to edit, open it in a text editor, make your changes, and then upload the file. A better way is to install the Thesis OpenHook plugin.

With Thesis OpenHook, you can edit the custom stylesheet from WordPress rather than having to open the custom.css file in a separate editor. After installing and activating OpenHook, click Appearance in the WordPress Dashboard, click Thesis OpenHook, and then scroll down to the Custom Stylesheet box to view or edit the contents of custom.css.

If you don’t like that idea, consider using your hosting service’s file manager. In Bluehost (the hosting service I use), you can login, click File Manager, and use it to navigate to the folder that contains the custom.css file: /wp-content/themes/thesis-15/custom. You can then click the custom.css file and click the Edit button in the toolbar at the top to open the file in the Bluehost Text Editor and make your changes online. I’ve used GoDaddy, and it has its own editor, too. Other tools are available that simplify the process of editing files online.

Using the Custom Stylesheet

To use the custom stylesheet, log into WordPress and then click Appearance, Thesis Options, Custom Stylesheet, and make sure Use custom stylesheet is checked. With the custom stylesheet enabled, you can use the “custom” class selector to override any existing style for any selector.

Tip
Before editing custom.css, check the Thesis Options and Design Options settings to determine whether you can make your adjustments using the Thesis built-in control panels. You can make dozens of adjustments without having to edit the custom.css file.

Sample Edits

Here are some of the easy changes I made to my custom.css file for my personal blog at joekraynak.com/blog (above each is a comment explaining what the new CSS declaration does):

/*Remove padding above and to left of header*/
.custom #header { padding-top: 0; padding-left: 0; }

/*Indent the tagline in the header 130px*/
.custom #tagline { position: absolute; left: 130px; }

/*When images are left-aligned add no extra space to the left, top, or bottom but 1em space to the right*/
.custom img.alignleft { margin: 0 1em 0 0; }

/*Separate list items by 10px space in the content area – does not affect list items in sidebars*/
.custom #content li { padding-bottom: 10px; }

/*Reduce the space between widgets in the sidebars*/
.custom li.widget { margin-bottom: 10px; }

Tip
Before you can change the property of a selector, you need to know what the selector is, and finding out can be a real challenge. One of the best tools to use to identify selectors is an add-on program for Mozilla’s Firefox Web browser called Firebug.

You can download a free copy of Firefox and then download and install Firebug using the Firefox browser. Kristarella.com has posted an excellent video called “How to Use Firebug for CSS,” demonstrating how to use the Firefox/Firebug combo to examine and experiment with CSS selectors, properties, and values on your own blog as well as other people’s blogs.