CSS Properties and Values in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

CSS properties are assigned to the CSS selector name in the Twenty Fifteen WordPress theme stylesheet. 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 Fifteen WordPress theme, the markup on line 30 in the Header template (header.php) is <div class=site-branding>. This class, with the name site-header, provides styling for the site header.

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

.site-branding {
min-height: 2em;
padding-right: 60px;
position: relative;
}

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-branding, which has three properties:

  • The first CSS property is min-height, which has the value of 2em;.

  • The second CSS property is padding-right, which has the value 60px;.

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

Here are some examples of commonly used CSS properties and values.

CSS Property CSS Value Examples
background-color Defines the color of the background (such as red, black, or
white).
Markup: <div id=page>
CSS: #page
{background-color: white}
background Defines a background image. Markup: <header id=banner>
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
Title</h1>

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

CSS: h1 {font-size: 18px;}
text-align Defines the alignment of the text (left, center, right, or
justified).
Markup: <div id=wrapper>
CSS: #wrapper {text-align: left;}