WordPress School: HTML and CSS – Identifying IDs and Classes

As we round up the mini-series on HTML and CSS basics as part of the ongoing Lorelle’s WordPress School free online course, and to prepare you for working with WordPress Themes, it is important to understand how to find the right design element to change on a website, specifically within a WordPress Theme.

We’ve been mostly working on a test HTML file to learn the basics of HTML and CSS. In this tutorial, we are going to apply those lessons to WordPress.

If you are just joining us, please catch up by reading the tutorials in this mini-series on HTML and CSS basics so you understand what is being discussed in this tutorial:

CSS Classes and IDs Review

Designing a site doesn’t always start with a fresh clean slate. It often begins with tweaking an existing design, changing that tiny thing that annoys us or that we wish were different in some way, a different color, size, shape, or position.

In this tutorial we are going to look at how to identify and style specific sections and areas of a web page. When you begin to modify an existing WordPress Theme with a Child Theme, finding these HTML and CSS elements are critical. Honestly, it is just one of the aspects of web programming that makes me feel like a detective, a Sherlock Holmes of web design.

In the previous tutorial on CSS positioning, you learned how to set the img HTML tag for images to float to the right or left. If we set all the images on the web page to float to the right, it would force all images to the right within the context of the web page. We only want certain images to float to the right, others to the left, others in the center, and other images exactly where we want them. By assigning them a specific ID or CLASS to identify the image we wish to modify, we can pinpoint where each image should be positioned.

Consider the <h3> HTML heading tag in a WordPress Theme. It may be found in the post content, sidebar widgets, comments, and other areas within a website’s design. If you style all the headings to be the same throughout the entire site, that might be acceptable, but if you want the <h3> tag to look different in the content area than in the sidebar widgets, how would you know which one is which and how would you style it accordingly?

<div id="header">
<h1>Site Title</h1>
<h3>Tagline</h3>
</div>
<div id="content">
<h3>Post Title</h3>
<p>Paragraph text...</p>
<h3>Section Title</h3>
<p>Paragraph text...</p>
</div>
<div id="sidebar">
<h3>Sidebar Title</h3>
<p>Sidebar text...</p>
<h3>Sidebar Title</h3>
<p>Sidebar text...</p>
</div>
<div id="footer">
<h3>Footer Title</h3>
<p>Footer text...</p>
</div>

That is a lot of examples of the <h3> heading tag, giving you just a small taste of how it is often found within a web page and within a WordPress Theme.

The key to styling a web page, and a WordPress Theme and Child Theme, is to target exactly the element you want to modify.

HTML and CSS assigns identification to HTML elements known as IDs and Classes.

What is the difference?

We discussed this in the earlier tutorials, but as a reminder an ID is used once on a web page, designating it as a key architectural element on a single web page and every web page throughout your site. The ID restricts the design styles to only that HTML element, not to be repeated on that web page. A site with two sidebars labeled #primary and #secondary may both have an <h3> heading. Want the heading styled differently in the first sidebar, the ID would ensure it with #primary h3, differentiating from the #secondary h3, allowing precise styling.

Examples of HTML IDs are header, footer, and sidebar. The HTML looks like <div id="header">.

The ID is also used for jump links within a web page for the use of article table of contents, moving around within a web page or to a specific point on another web page, and used in the WordPress “more” excerpt feature to jump a reader from the front page of the site to complete reading the article on the article post itself.

In the CSS file, the HTML IDs are identified by a pound sign: #header.

The CSS class may be used repeatedly throughout a single web page and site. An example would be a heading HTML tag, a subtitle in your post content, used repeatedly on a single web page on a multiple post pageview such as the front page of the site or a category of posts.

An example is <h2 class="post-title">.

In the stylesheet, classes are identified with a period before the class name: .post-title.

There may be several h2 headings on a web page, each with their own class.

<h2 class="post-title">Sample</h2>
<h2 class="tagline">Sample</h2>
<h2 class="widget-title">Sample</h2>

The class identifies a specific heading HTML tag used repeatedly on a single web page. This is an example of the CSS styles to match the HTML.

.post-title { }
.tagline { }
.widget-title { }

CSS Classes are not always a specific design element. It could be a specific style.

Let’s say you’d like the ability to change the font color of some text to red from black. You could create a class called “red” and set the styles to change the color to red.”

.red {
     color:red;
}

By adding the class “red” to a heading, paragraph, etc., the font color would change to red.

<p class="red">This text in this paragraph would be red.</p>

Now that you have a handle on the basics of CSS identifiers, let’s complicate things. Or simplify. All a matter of perspective.

Styling More Than One HTML Element

In CSS, you can assign a style to more than one HTML element, ID, or class. For example, if you wish all the headings within the website to be styled a specific color:

h1, h2, h3, h4, h5, h6 {
     color: blue;
}

This is called the grouping of selectors or selector grouping, allowing multiple selectors to have the same property style.

In the above example, all of the headings are the same color. Individual rules could be set for the font style, size, and other design styles on a per case basis.

In WordPress, you may be trying to change the color of a heading and you find the specific heading such as #primary h3 and you can’t find where the color is set. This could be because the styles are inherited from a grouping of selectors or the styles are featured elsewhere in the stylesheet. Tracking down all the styles related to the design element you are modifying is part of the detective work of CSS.

A more complicated example of grouped selectors is found in what is called the CSS reset or normalize, a set of CSS selectors set to zero, or cleared of all features. It is commonly found in WordPress Themes at the top of the stylesheet or in a separate stylesheet.

One of the historical challenges for web developers and designers was to overcome the headaches caused by web browsers using a “user agent stylesheet” that set the default styles for web pages as a fall-back. If the stylesheet misses a style, the browser will cover for it. However, this causes problems when those styles interfere with the site’s design. The CSS reset sets the styles back to zero, overriding the styles set by the browser.

This is just an example sampling of a CSS reset demonstrating the grouped selectors.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

All of those identifiers would be reset to zero with those style properties.

The WordPress Theme you are working with may have styles in the list specific to its Theme in addition to the standard HTML tags.

Grouped Classes and WordPress Body Classes

Any design element may have only one ID to identify it uniquely, but may have multiple classes, as we’ve seen in previous examples. Let’s look at grouped classes in CSS to help you learn how they work as you will be finding this is common in WordPress.

NOTE: Grouped selectors are found within a stylesheet, allowing the same properties to be applied to multiple HTML design elements. Grouped Classes are used in the HTML to apply multiple style instructions to a single HTML design element.

<h2 class="post-title red">This is a Heading in Red</h2>

This example styles the post-title per the CSS instructions and also adds the instructions for the red CSS style, changing the font color in the heading to red, applying the styles from the two different class styles.

This grouping of classes within the HTML allows the identification of an element that may be styled in many different ways.

WordPress images are embedded with a group of CSS classes in the content of posts and Pages:

<img src="https://lorelle.wordpress.com/wp-content/uploads/2015/05/paper-fans.png" alt="Paper Japanese fans." 
width="100" height="75" 
class="alignright size-medium wp-image-13841" />

The CSS Class styles are:

.alignright – The default WordPress alignment class for aligning the image to the right in a float to allow the text to wrap around.
.size-medium – The default WordPress style for the size of the image. This is set to “medium,” which means the image will be displayed at its medium width as set in the Media settings. Note that there is a style for thumbnail, full, and other sizes. If you change the width of the image in the HTML tag in the Text Editor, the Media settings for these sizes will overrule the HTML width. You must also change the style to the appropriate size or remove it to size the image to your specific needs.
.wp-image-13841 – This is the identifier for this image. Styles could be set for a specific image.

WordPress Themes feature specific code known as template tags and functions to program a Theme to behave in a specific way or generate an action. One of those function template tags is called the body_class. In a WordPress Theme, it looks like this:

<body <?php body_class( $class ); ?>>

The HTML tag wraps around the entire visible content on a web page. When the web page is generated, WordPress automatically adds the classes associated with the type of page the user is visiting.

<body class="front y2015 home loggedin">

Let’s break these CSS classes down:

.front – This class styles the front page of the website, potentially distinct from other web pages on the site.
.y2015 This class allows styles based upon the year.
.home – This class set the styles for the “home” or front page of the site potentially different from other web pages.
.loggedin – If someone is logged into the site, they may see different design elements and styles or content compared to someone viewing the site and not logged in.

One of the most common examples of the loggedin CSS class is found on every WordPress site. When you are logged in, you see an EDIT link on a post or Page to allow quick access to edit it. Log out and that link is gone, not visible to the visitor. The CSS class style is set to display only if someone is logged into the site.

The bodyclass() template tag generates the category name the post is in. If a visitor is viewing a category of posts, it generates the category name and the class for category to designate the pageview for styling post categories. If it is a tag pageview, it features “tag.” Post or Page? The body class is “single-post” or “page.” If you wish to style a web page on a WordPress Theme differently based upon its pageview type, this makes it easy.

For example, say the site you are working on is a movie review site. You’d like to style all movie review posts in the romance category with hearts in the background and science fiction category movies with stars and planets in the background, you may style the post based upon which category it is in.

<body class="single category-romance">

<body class="single category-scifi">

These example body classes are generated for each post in that category. The CSS might feature:

.category-romance {
background-image: url(http://example.com/images/hearts.png);
}

.category-scifi {
background-image: url(http://example.com/images/stars-planets.png);
}

Think of the possibilities.

CSS Specificity

Specificity in CSS is often confusing. Every CSS selector has some form of specificity, the rules that carry weight dictating which one will win in the styling of your web pages.

If two selectors apply to the same element, the one with higher specificity wins.
CSS Specificity: Things You Should Know – Smashing Magazine (2007)

There isn’t time in this mini-series to go into the full details of CSS specificity, but here are some general rules and applications.

Inline styles win first, overruling other styles
ID selectors tend to rule out classes, though not always
A child element will generally rule out a parent element
Selector order in stylesheets matters

The process of determining the specificity of a CSS style is based on a calculation of the numbers of ID, classes, attributes, element names, and pseudo-elements in a selector. To help with the calculation confusion, Andy Clarke put together “CSS:Specificity Wars,” a lighthearted but excellent reference to calculate the winner in the CSS Wars of specificity. If you wish to pursue web design, this is a must read.

Here are examples of selector order formats you will find and their specificity.

p – The styles for that HTML element with no modification from ID or Classes.
p em – Styles the <em> only within the paragraph HTML tag.
.class – A CSS class that may be applied to an HTML element or used in combination with others.
.class p – The space between the CSS class and the HTML tag states “style any HTML element that is a descendant of the HTML element with this class identifier.” This means that the paragraphs within a <div class="class"> would be styled with those style instructions, but only within paragraphs, not other HTML tags.
p.class – No space between the two and the HTML tag coming first means the style is applied only to paragraph tags with that class such as <p class="class">.
!important – The use of !important as a value in the selector properties wins out over contradictory styles. An example is #primary h3 {font-style: italic !important; }. In general, these are rarely used but good to known and recognize as they disrupt the natural flow of the CSS rule structure. In WordPress, a Child Theme has an implied !important value that overwrites the Parent Theme styles automatically.

You will encounter these in WordPress Themes. You don’t have to be an expert in these, but learn to recognize them and understand the impact they have on how the HTML elements are styled.

The order in which the selectors are set in the stylesheet dictate which one wins with CSS specificity if applied to the same HTML. The last CSS rule will dictate the results. For example:

.red {color: red;}
.magenta {color: magenta;}
.green {color: green;}

<p class="red magenta">Magenta Text</p>
<p class="magenta red">Magenta Text</p>
<p class="green red">Green Text</p>
<p class="magenta green">Green Text</p>

Here are the results with the classes listed on the right.

CSS Specificity has sent many a designer into spasms until they learn that CSS selector specificity for similar grouped selectors is last in first out.

HTML and CSS: Identifying the Exact Element to Change

Have you looked under the hood at a WordPress site lately? Hopefully this HTML and CSS series has inspired you to view the Source Page of your site and poke around. When you started this course, you were probably intimidated if not terrified of peeking under the hood of your site. Now, you should start to be recognizing HTML, CSS, classes, and ID, learning to pick the words out that you recognize as you read through the code.

When it comes times to tweak your WordPress Theme with a Child Theme, you will need to identify the exact element to change. This involves reading through the code and digging through the stylesheet to find the specific element you wish to tweak or modify.

Let’s start simple with this tutorial. We’ll get more involved in this when we get into the section on WordPress Themes and Child Themes.

Begin by viewing your own test site on WordPress.com in Firefox. I’m going to demonstrate two methods to see the source code of a web page and find the HTML and CSS identifiers. The first is viewing a specific area of a web page’s source code. The second is using Firebug, available on Firefox and Chrome. If Firebug isn’t installed or activated on your web browser, make sure it is now.

Locate a heading or some content in the sidebar of your site. Look for words or specific images.
With the mouse, select an area that encompasses that area of the sidebar. Not the whole thing, just enough to surround that area.
Right click on the web page and choose to View Selection Source. This opens another web page with your website’s source code highlighted with the area you selected.
Within the selected area, look for the heading or content. If you click on the screen, the highlighting goes away. That’s fine.
Identify the HTML container and its identifier. In the example below, I’m looking at the Categories Widget.
Using your new skills, identify the HTML container and CSS identifier for the area you are looking for. In this example, it is the categories list inside of the Category Widget, specifically <ul> unordered list with an <h3> heading with the class widgettitle inside of another list item with the ID of categories-1. The HTML list item also has two classes for widget and widget_categories. Go further up through the various Widgets and you will find that the sidebar, the parent container of all the WordPress Widgets, is <div id="primary" class="sidebar">.
Clearly write out the hierarchical order to locate the heading in the CSS. These are the footprints you must follow to identify which of these styles that HTML element. Remember, the heading will inherit the properties (styles) of its parent containers: #primary .sidebar #categories-1 .widget .widget_categories h3 .widgettitle.
In Firefox, go to Tools > Web Developer > Firebug and initiate Firebug on the web page you are exploring. The bottom half of the web page will open the web developer tool. From here, there are several ways to locate the HTML element and its styles.
- Using the path you’ve uncovered, click body, wrapper, and look for primary. That is your starting place to open up each section to find the rest of the containers, drilling down to the desired element.
- Close Firebug and right click on the element you wish to inspect and choose Insect with Firebug. This will open Firebug to that HTML element or close to it. You may wish to move the Firebug window down lower so you can still see the web page if it covers it up.
In Firebug, click on the desired HTML element to inspect on the left side of the screen. On the right, you will see the Rules or Style tab for the styles including the parent containers from which the element inherits its styles. In our example, the heading for the word “Categories” inherits its styles from #primary h3 and h3.widgettitle. Scroll down and you will notice that in my example, the font-family comes from the <body> HTML tag, not from the others. Sometimes you have to keep going up from parent to grandparent to great grandparent and so on to find out where all the styles come from.
With this information, you can choose how to style the heading.
- To change all the h3 headings in the primary sidebar, you would make the modifications in #primary h3. Ah, maybe. The Theme may feature more than one sidebar. If you wish the headings to be the same, you have to include #secondary h3 and other sidebar IDs with grouped selectors.
- to change only the Widget headings, you could choose h3.widgettitle or .widgettitle.
- To only change the category heading, you would modify #categories-1.widgettitle.

This is just a sample of the possible options you have to style an HTML element once you have identified its identifiers and parent containers that influence the styles inherited.

More Information on CSS Selectors and Specificity

I tell my students constantly that designing with code gets you further than just painting a site. It’s important to understand how the code works to create the most powerful designs. This is where design meets code.

In the last post in our HTML and CSS Basics series, I’ll include more resources and references to help you dig even further on your own into HTML, CSS, and the basics of web design.

For more information on HTML identifiers, grouping selectors, selector groups, CSS Specificity, and the WordPress body class: