CSS Style Basics for WordPress - dummies

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.

On your Dashboard, click the Editor link on the Appearance menu and look at the Header template for the Twenty Fourteen WordPress theme by clicking the Header link on the Edit Themes page. 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 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.

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
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
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
a {color: red}
All text links appear in red.

Classes and IDs

You can find the stylesheet (style.css) for the default Twenty Fourteen theme on the Edit Themes page on your Dashboard. Everything in it may look foreign to you right now, but bring 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.


IDs and classes define styling properties for different sections of your WordPress theme. Take a look at the examples of IDs and classes from the header.php template in the Twenty Fourteen 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”>
In this case, the CSS selector name is page.
#page Styles the elements for the page ID
in your template(s).
#site-header Styles the elements for the site-header ID in your template(s).
.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.
.search-toggle Styles the elements for your search-toggle class in your template(s).
#primary-navigation Styles the elements for the primary-navigation 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.

CSS properties and values

CSS properties are assigned to the CSS selector name. You also need to provide values for the CSS properties to define the style elements for the particular CSS selector you’re working with.

In the default Twenty Fourteen WordPress theme, the markup on line 36 in the Header template (header.php) is <div id=”site-header”>. This ID, with the name site-header, provides styling for the site header.

In the default Twenty Fourteen WordPress theme stylesheet, the CSS defined for the site-header ID is as follows:

#site-header {
    position: relative;
    z-index: 3;

Every CSS property needs to be followed by a colon (:), and each CSS value needs to be followed by a semicolon (;).

The CSS selector is #site-header, which has two properties:

  • The first CSS property is position, which has the value of relative;.

  • The second CSS property is z-index, which has the value 3.

    CSS Property CSS Value Examples
    background-color Defines the color of the background (such as red, black, or
    Markup: <div

    CSS: #page {background-color:
    background Defines a background image. Markup: <header

    CSS: header#banner {background:
    url(images/header.jpg) no-repeat;}
    font-family Defines the fonts used for the selector. Markup: <body>
    CSS: body { font-family: ‘Lucida
    Grande’, Verdana, Arial, Sans-Serif;}
    color Defines the color of the text. Markup: <h1>website

    CSS: h1 {color: blue}
    font-size** Defines the size of the font used for the text. Markup: <h1>website

    CSS: h1 {font-size: 18px;}
    text-align Defines the alignment of the text (left, center, right, or
    Markup: <div

    CSS: #wrapper {text-align: