Personalizing Your Theme with CSS

Cascading Style Sheets (CSS) are part of every WordPress theme. The primary way of personalizing your theme with CSS is through your theme's default stylesheet (style.css). Through a comment block (shown in Figure 4-6), your theme's style.css file tells WordPress the theme name, the version number, and the author, along with other information.

With CSS changes to your theme's stylesheet you can apply unique styling, such as different fonts, sizes, and colors, to headlines, text, links, and borders, and adjust the spacing between them too. With all the CSS options available, you can fine-tune the look and feel of different elements with simple tweaks.

To explore your theme's stylesheet, choose AppearanceEditor on the WordPress Dashboard. By default, your theme's main stylesheet (style.css) should appear. If not, look at the far right side of the WordPress Dashboard under the Templates heading and scroll down to find the Styles heading and click the Stylesheet file, as shown in Figure 4-7.

Figure 4-6: The comment block of a typical WordPress stylesheet.

Figure 4-7: Shows the list of files contained in the Quick-Vid theme, separated by Templates and Styles.

Knowing some key CSS concepts can help you personalize your theme's stylesheet. CSS is simply a set of commands that allows you to customize the look and feel of your HTML markup. Some common commands and tools we discuss are selectors, IDs and classes, properties and values, and more. You use these commands to customize HTML to display your design customizations.

CSS selectors

Typically, CSS selectors are named for the corresponding HTML elements, IDs, and classes that you want to style with CSS properties and values. Selectors are very important in CSS because they are used to “select” elements on an HTML/PHP page so that they can be appropriately styled.

With CSS, you can provide style (such as size, color, and placement) to the display of elements on your blog (such as text links, header images, font size and colors, paragraph margins, and line spacing). CSS selectors contain names, properties, and values to define which HTML elements in the templates you will style with CSS. Table 4-2 lists some basic global CSS selectors.

Table 4-2 Basic Global CSS Selectors

If you were to assign a style to the h1 selector, it will affect all <h1> tags in your HTML. Sometimes you want this, but sometimes you want to affect only a smaller subset of elements.

CSS IDs and classes

With CSS IDs and classes, you can define more elements to style. Generally, IDs are used to style one broader specific element (like your header section) on your page. Classes style, define, and categorize more specifically grouped items (like alignment of images and text, widgets, or links to posts).

• CSS IDsare identified with the hash mark (#). For example, #header indicates the header ID. There can only be one element identified with an ID.
• CSS classes are identified with a period (.). For example, .alignleft indicates aligning an element to the left.

Table 4-3 lists some CSS IDs and classes.

Table 4-3 CSS IDs and Classes Examples

CSS properties and values

CSS properties are assigned to the CSS selector name. You also need to provide values for the CSS properties to define the style elements for the particular CSS selector you're working with.

For example, the body selector that follows defines the overall look of your Web page; background is a property and #DDDDDD is the value, and color is a property and #222222 is the value.

body {
background:#DDDDDD;
color: #222222;
}

Understanding that properties are assigned to selectors, as well as your options for the values, makes CSS a fun playground for personalizing your site. You can experiment with colors, fonts, font sizes and more to tweak the visual look of your theme.