How to Style your Site with CSS

You picked out a theme you like, but now you want to add a few stylish touches to really make it your own. Want a different font for headlines? More space between paragraphs? Less space between paragraphs? Want a different colored masthead bar? CSS is the way you’ll get all this done.

CSS (Cascading Style Sheets) are a simple way of passing instructions to WordPress about the way you want various elements of your site’s pages to display. CSS is powerful and extremely flexible, with a huge trove of detailed documentation on its various features and peculiarities, but we find that over and over a few simple CSS instructions serve most of the styling needs of most of our customers.

We’ll start by directing you to the screen in your WordPress back-end where you add CSS commands to your site’s basic styling. When you’re logged, look for the ‘Appearance’ tab in your left-hand admin menu, then select the ‘Edit CSS’ sub-menu under Appearance. There’s a large editing box with some introductory text, explaining where you can access CSS documentation and giving some basic instructions. You’ll enter the styling instruction you want to apply to your site, then click the gray ‘save stylesheet’ pill button below the editing window (it’s a little hard to spot) when you’re ready to save them.

Don’t worry; there’s nothing you can do to ‘break’ your site by adding CSS styling instructions. The plugin is smart enough to refuse to add incorrectly formatted CSS instructions (they’ll disappear when you click ‘save stylesheet’.) If you don’t like what your new instructions do to some element of your site’s appearance, you can simply revert to a previous version of your CSS additional stylesheet, or delete the specific instruction you’ve just entered and re-save.

Due to a minor bug in the editor, the very first time you enter additional CSS instructions via this screen they may not ‘take’; make sure you copy your new CSS code before you click ‘save stylesheet’ for the 1st time so you can paste it into the editing pane again and re-save if need be.

General CSS Instruction Formatting

CSS instructions take a general form that can be summarized like this:

selector {
declaration1: value;
declaration2: value;
etc...
}

..where the ‘selector’ is a label CSS understands to belong to some element of your page (like an image or a headline or a paragraph.)  Before we proceed, note there are a couple key elements of CSS syntax you need to follow when you add any CSS styling instruction. The selector needs to be properly formatted and addressed to the element you want to style (see the end of this article for a link to a more detailed list of selectors you might need); all declarations need to be enclosed within  a single pair of curly braces; each declaration (‘color’, to set text color, for one example) needs to be followed by a colon (‘:’); each value you set for its declaration needs to end with a semicolon (‘;’). So your complete color declaration for brown text would look like this

color: brown;

Just for the sake of a simple (non-functional – don’t use THIS code yet!) example, let’s say you wanted your page headlines to be much larger than they appear in your chosen theme. The label html uses to talk about page headlines is ‘h1’ (headline level 1). You decide you want your h1 to be large, blue, and italic, but still use the underlying font your theme employs. That CSS instruction would look like this:

h1 {
font-size:40px;
color:blue;
font-style:italic;
}

…simple enough so far, right? (Note that we’ve provided links at the end of this article to several extensive CSS references, so you can find for yourself which values are appropriate to which CSS declarations.)

Now there’s a little more to styling your headlines than this first example, because WordPress has a sophisticated set of styling rules that account for a greater number of different possible types of pages and types of content. Instead of pointing directly to h1 (or their related cousins, h2-h7), WordPress assigns a set of classes and IDs to the important bits of your site’s pages and then references those classes or IDs by name. It’s a more powerful and flexible (and more search-friendly) way of accomplishing the same styling goals. So let’s look next at what your actual CSS instruction would be to accomplish this same styling objective (large, blue, italic). That code looks like this:

.entry-title {
font-size:40px;
font-style:italic;
}
.entry-title a {
color: blue;
}

The reason we split this into two separate styling rules is that our themes makes every page’s main headline a clickable link – so in order for our color choice to ‘stick’, and not get overridden by the global styling rule for link text, we have to specify that link text in a headline is blue (that’s what the ‘a’ following the ‘.entry-title’ class means — ‘a’ is for ‘anchor’, the css selector for links; its following position means ‘any anchor inside an entry-title container’.)

So with that basic understanding of a basic example under your belt, we’re going to hand you the first few keys to the kingdom of your site’s styling — that is, the most commonly-tweaked page elements. Buckle up!

Commonly-tweaked CSS Selectors

  • #site-title (your site’s title) and #site-title a (see our explanation of applying colors to anchor text, above.)
  • #site-description (your site’s tagline)
  • .entry-title (covered above – the class assigned to page titles)
  • .widget-title (titles for content widgets — like a list of categories, or a tag cloud, or upcoming events — assigned to one of your theme’s widget areas, like the right sidebar)
  • .entry-content p (a paragraph within your site’s main content column)
  • blockquote (standard html styles a blockquoted chunk of text by simply indenting left and right, but you can achieve some really groovy pullquote effects by applying a bit of extra styling.)
  • body (the whole page on screen; this is the selector to which you’d add an image, if you want your site to have a wallpapered background)
  • #header-container (your site’s masthead area – the block containing your site title; usually your main navigation menu sits just below this masthead area)
  • #primary-menu (your site’s main navigation menu — give it a colorful background color for a navigation bar that really pops)
  • #primary.sidebar (the top widget area in your theme’s sidebar. Not every site uses sidebars, but if yours does, why not give it an interesting background color or a dashed left-hand border to help separate it from the main content area?)
  • .hentry img (any image that appears in the main article block of a page)

Styling commands you can apply to these selectors:

  • color (set with either an accepted css-defined color keyword, ‘blue’, or a hexadecimal color key of the form #0000FF (which describes blue). More information on specifying colors by hex value or by name in CSS. )
  • background-color (assigns a background color to this block of text — for example, for headlines that are white text on a gray background bar)
  • background-image (near the end of this article, we link to detailed instructions for attaching an image to the background of your whole page, for a wallpaper effect)
  • border (to put, for instance, a thin brown dashed line around your site’s blockquotes)
  • font (complete list of web-safe, cross-browser fonts)
  • font-weight (bold or regular)
  • font-style (italic or regular)
  • line-height (the space between lines of text; 1em is standard line-height, 2em would be double-spaced)
  • margin-bottom (space below a text element; ’30px’ would create a 30-pixel space between the styled text block and the next block following it. Our themes create space — between paragraphs, between headlines and paragraphs, and between most other text elements, with margin on the bottom of each element.)
  • float (left or right. ‘Floating’ an element takes it out of the regular positioning and positions it either left or right of the next element following it in your page source. Floating can be tricky — see this advanced discussion of css floats.)
This is just a short list of possibilities to start you out and get you thinking. If you want to branch out from the few examples we provide by way of introduction, you’ll want to consult W3School’s excellent excellent reference (linked below) for how to properly phrase your styling instructions for any and all of these styling commands.

Two Final Examples

As a reward for sticking with this introduction to CSS styling, here’s another example you can use or modify. Say you want old-style indented paragraphs in the main content area of your site. How to get that done with CSS?

.entry-content p {
margin-bottom:0px;
text-indent:5em;
}

…and, for an even more advanced example, click through here for a look at how to assign a background image to your whole site.

Further Reading

As a tool for controlling your site’s appearance, CSS is rich and deep; its capabilities stretch far beyond any introductory article’s possible scope. Here are a few jumping-in points if you want to really seize control of how your site displays.

Posted in Advanced, How-to Articles and tagged , .