Classes and IDs

You can find the stylesheet (style.css) for the default Twenty Ten theme on the Edit Themes page in your Dashboard (see Figure 13-1). Everything in it may look foreign to you right now, but I want to bring your attention to two items you see when you scroll down through that template:

✓ #container: One type of CSS selector. The hash mark (#) indicates that it's a CSS ID.

✓ .onecolumn: Another type of CSS selector. The period (.) indicates that it's a CSS class.

IDs and classes define styling properties for different sections of your WordPress theme. Table 13-2 shows examples of IDs and classes from the header.php template in the Twenty Ten WordPress theme. Armed with this information, you'll know where to look in the stylesheet when you want to change the styling for a particular area of your theme.

Figure 13-1:

WordPress default theme stylesheet

(style.

Figure 13-1:

WordPress default theme stylesheet

(style.

Table 13-2

Connecting HTML with CSS Selectors

HTML

CSS Selector

Description

In this case, the CSS selector name is page.

#wrapper

Styles the elements for the wrapper ID in your template(s).

<div id= "header">

#header

Styles the elements for the header ID in your template(s).

<div id= MmastheadM>

#masthead

Styles the elements for the masthead ID in your template(s).

<h1 id="site-titleM>

#site-title

Styles the elements for your site-title ID in your template(s), but also follows rules for the h1 values set in the CSS.

HTML

CSS Selector

Description

<div id="site-description">

#site-description

Styles the elements for your site-description ID in your template(s).

<div class= "skip-link screen-reader-text">

.skip-link and .screen-reader

Styles the elements for your skip-link and screen-reader classes in your template(s).

If you find an element in the template code that says id (such as div id= or p id=), look for the hash symbol in the stylesheet. If you find an element in the template code that says class (such as div class= or p class=), look for the period in the stylesheet followed by the selector name.

0 0

Post a comment