CSS Style Basics for WordPress

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 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 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.

    image0.jpg

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).
<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.
<div class=”search-toggle”> .search-toggle Styles the elements for your search-toggle class in your template(s).
<nav id=”primary-navigation”> #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 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;}
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com