Styling with CSS in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

A Cascading Style Sheet (CSS) is a cascading sheet of style markup that controls the appearance of content on a website. Every single WordPress theme you use in your blog uses CSS. The CSS provides style and design flair to the template tags in your templates. The CSS for your WordPress theme is pulled in through the Header template (header.php) and is named style.css.

In the Header template (header.php) of most WordPress themes, 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 blog:

<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, the CSS won’t work for your blog.

CSS selectors

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. CSS selectors are used to declare (or select) which part of the markup the style applies to. Here are some examples of CSS selectors and their use.

CSS Selector Description HTML CSS
body Sets the style for the overall body of the site, such as
background color and default fonts.
<body> body {background-color: white}
The background color on all pages is white.
p Defines how paragraphs are formatted. <p>This is a
paragraph</p>
p {color:black}
The color of the fonts used in all paragraphs is black.
h1, h2, h3, h4, h5, h6 Provides bold headers for different sections of your site. <h1>This is a site
title</h1>
h1 {font-weight: bold;}
A font surrounded by the <h1>..</h1> HTML tags is bold.
a Defines how text links display in your site. <a href= http://wiley.com>Wiley
Publishing</a>
a {color: red}
All text links appear in red.

Classes and IDs

You can find the stylesheet (style.css) for the default Twenty Fifteen theme on the Edit Themes page in your Dashboard. Everything in it may look foreign to you right now, but focus your attention to two items you see when you scroll down that template:

  • #content: One type of CSS selector. The hash mark (#) indicates that it’s a CSS ID.

  • .singular: Another type of CSS selector. The period (.) indicates that it’s a CSS class.

    A WordPress theme stylesheet (style.css).

    A WordPress theme stylesheet (style.css).

IDs and classes define styling properties for different sections of your WordPress theme. This list shows examples of IDs and classes from the header.php template in the Twenty Fifteen 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.

HTML CSS Selector Description
<div id=page> #page Styles the elements for the page ID in your template(s).
<div class=.site-header> .site-header Styles the elements for the site-header class 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.
<div class= search-toggle> .search-toggle Styles the elements for your search-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.