WordPress® Web Design For Dummies®

Styling with CSS: The Basics

Knowing some key Cascading Style Sheets (CSS) concepts can help you personalize your theme’s stylesheet. CSS is simply a set of commands that allow you to customize the look and feel of your HTML markup. Some common commands and tools that I discuss here are selectors, IDs and classes, properties and values, and more. Together, you can use these commands to customize HTML to display your design customizations. (You can find out more about HTML at the end of this chapter.)

Introducing CSS

A Cascading Style Sheet is a stylesheet that controls the appearance of content on a Web site. Every WordPress theme you use in your site uses CSS. CSS provides style and design flair to the template tags in your templates. (See Chapters 11 and 12 for information about WordPress template tags.) The CSS Stylesheet for your WordPress theme is pulled in through the Header template (header.php), and the file is named style.css.

In your Dashboard, choose Appearance⇒Editor to open the Edit Themes page (see Figure 14-1). Look at the far right side of the page under the Templates heading, scroll down to find the Header link and click it to open the Header template. You find the following line of code, which pulls the CSS (style.css) into the page to provide the formatting of the elements of your site:

<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />

Don’t tweak the line of code that pulls in the style.css file; otherwise, ...