WordPress Twenty Fifteen CSS Classes and IDs - dummies

WordPress Twenty Fifteen CSS Classes and IDs

By Lisa Sabin-Wilson

You can find the stylesheet (style.css) for the default Twenty Fifteen theme on the Edit Themes page on your Dashboard. Everything in it may look foreign to you right now, but a really good way of learning about CSS and its structure is to spend time viewing and studying existing stylesheets. Since you have access to the Twenty Fifteen theme through your WordPress install, that’s a good place to begin.

There are two basic CSS features you will run across when viewing stylesheets, and that is the use of the hash mark (#) and the period (.) to define selectors as either a div or a class in CSS. Here are two generic examples of this:

  • #content: This is one type of CSS selector. The hash mark (#) indicates that it’s a CSS ID and can be used only once per page.

  • .title: 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. Here are some examples of IDs and classes from the header.php template in the Twenty Fifteen WordPress theme. Armed with this information, you know where to look in the stylesheet when you want to change the styling for a particular area of your theme.

HTML CSS Selector Description
<div id=page> #page Styles the elements for the page ID in your template(s)
<div id=site-header> #site-header Styles the elements for the site-header ID in your
template(s)
<h1 class=site-title> .site-title Styles the elements for your site-title class in your
template(s), but also follows rules for the h1 values set in the
CSS
<button class=secondary-toggle> .secondary-toggle Styles the elements for your button-toggle class in your
template(s)
<div id=content> #content Styles the elements for the content ID 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.