This post was written for the students of the Columbia College Chicago class Blogging: Beyond the Basics in the Fall semester of 2014. It likely refers to specific software or settings that may quickly be out of date and may not apply to your situation, even in a future semester of the same class.

In class this week I talked about Survival CSS—knowing enough CSS to be able to troubleshoot an issue with a plugin or change a color of an element of your Theme.

CSS stands for Cascading Style Sheets. The “Style Sheet” part means just what it sounds like—it’s what gives a web page its style and appearance. The “Cascading” part means that you can have multiple style sheets applied to the same web page; styles get processed in order and later or more specific styles “win”. That’s what will let us tweak our CSS without actually editing the original CSS files—we can add our own CSS styles into a special style sheet that gets applied last of all to our blog, so it’ll always win.

A CSS style consists of a selector (what part of an HTML document the style will be applied to) and then pairs of properties and values assigned to that property.

For example, if we wanted to set the font and color of everything in a paragraph tag in our HTML, the CSS would look like:

p {

font-family:”Helvetica Neue”,Helvetica,Arial,sans-serif; color: black;

}

To get more specific in CSS, we can assign a class or id to tags. In survival CSS, you’re mostly going to be dealing with classes and ids that have already been set up in the themes you’re using. Classes are noted with a period and ids with a hashmark.

One of the most common things you’re going to want to edit in CSS is the color of something. Colors in CSS can be represented in several ways and the most common are:

• As names—140 colors have specific names in CSS, ranging from common colors like blue and red to things like mediumorchid.
• As RGB (Red, Green, Blue) values in hexadecimal notation. For example, blue is #0000FF, red is #FF0000, and mediumorchid is #BA55D3.
• If both the numbers in each pair of RGB values are the same, a shortcut is to simply type the repeated digits once. So blue is #00F, red is #F00, and mediumorchid cannot be written with this shortcut, because the BA and D3 pairs are each different.

Let’s say we’ve got a Theme we like for our blog, but we want to change the color of just the description text under our blog name. In any of the major browsers, right-click on the description and choose “Inspect Element”. This will open a new panel in the webpage that shows you the HTML of that part of the page and the CSS that is being applied. Each of the browsers deals with this slightly differently and I happen to like the one in Chrome. In the CSS panel we see all the different styles that are being combined to produce this section, in reverse order. If you scroll down the list you’ll see more and more elements with a line through them, indicating that they’re replaced by a later direction above. Right at the top we can see that the element we’re interested is part of the header and has the id “description” and is getting it’s color from a style that contains a few other properties as well: header #description { color: #888; margin-bottom: 40px; font-style: italic; } To change that color, we’ll go to our WordPress dashboard to Appearance > Edit CSS and create a style that overrides just the color definition. header #description { color: red; } Ta Da!