Understanding the Stylesheet

Every WordPress theme includes a style.css file. A browser uses this file, commonly known as the stylesheet, to style the theme. Style can include text colors, background images, and the spacing between elements on the site. The stylesheet targets areas of the site to style by using CSS IDs and classes. CSS IDs and classes are simply means of naming a particular element of the site. IDs are used for elements that only appear once on a page, while classes can be used as many times as you need. Although this file references style, it contains much more information about the theme.

At the very beginning of the style.css file, a comment block known as the stylesheet header passes information about your theme to WordPress. Comments are code statements included only for programmers, developers, and any others who read the code. Computers tend to ignore comment statements entirely, but WordPress uses the stylesheet header to get information about your theme. In CSS, comments always begin with a forward slash (/) followed by a star (*), and end with a star followed by a forward slash (*/). The following code shows an example of the stylesheet header for the Twenty Ten theme:

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-
    background, threaded-comments, sticky-post, translation-ready, microformats,
    rtl-language-support, editor-style
*/

Figure 3-3 shows how Twenty Ten looks when activated.

Figure 3-3: This shows the currently active theme, Twenty Ten. The title and information are taken directly from the style.css header.

If you make modifications to the stylesheet header, the changes reflect in the WordPress Dashboard on the Themes page located in the Appearance menu.

Below the stylesheet header are the CSS styles that drive the formatting and styling of your theme.