WordPress Twenty Fifteen CSS Properties and Values - dummies

WordPress Twenty Fifteen CSS Properties and Values

By Lisa Sabin-Wilson

CSS properties are assigned to the CSS selector name in WordPress. 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;.

  • Check out some examples of commonly used CSS properties and values.

    CSS Property CSS Value Examples
    background-color Defines the background color (such as red, black, or
    white)
    Markup: <div class=site>
    CSS: .site {background-color: white}
    background Defines a background image and/or color Markup: <header>
    CSS: header {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 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 class=site>…</div>
    CSS: .site {text-align: left;}