One of the key pieces of any WordPress theme is the CSS – short for Cascading Style Sheet.

So what is it?

Long story short, the CSS is a set of instructions that tell Web browers how to display different elements on your site.

CSS was first developed in 1997, as a way for Web developers to define the look and feel of their Web pages. It was intended to allow developers to separate content from design so that HTML could perform more of the function that it was originally based on – the markup of content, without worry about the design and layout. via About.com Web Design/HTML – What is CSS – What are Cascading Style Sheets?

A line in the CSS file for your WordPress theme might look like this:

background: red url(image.gif) no-repeat fixed 0, 50%;

Translated into English, that means “the background color of every page on this site will be red, with the image called “image.gif” positioned once in the horizontal center of the page.

Why do I care?

Using the CSS can save you a lot of time and trouble, and help keep your site looking consistent. For example, imagine the pages on your site all have subheadings… like where it says “What do I care?” just above this section. You COULD style those subheadings in the WordPress text editor every time you create one… changing the font size and color, adding a background, etc. Or, you could use one of the styles already set in your theme’s CSS – a header, for example. Doing it that way means every time you create a subhead, it will have the same style settings – the same look and feel – on every page of your site. It also means that, if you ever decide to change what those headers should look like, you can change them all at once, either by manipulating the style sheet or by changing the theme itself.

Accessing the CSS

You can view and edit the CSS for your WordPress theme. Under the “Appearance” menu, select “Editor.” The CSS file is called “style.css” and will appear in the list of theme files in the rightmost column of the page. Some more intricate WordPress themes may include multiple style sheets, but in most cases, that one style.css file will include all the formatting instructions for every element on your site. That being the case, messing up the CSS file can have very severe repercussions. Always make a backup copy of the file before making any changes.

CSS and WordPress

The CSS file in a WordPress theme has another special function – it is where the theme’s name and some other key information is stored. A theme without a proper CSS file will not work at all. (This is another reason to be careful when editing style.css.)

Additional Reading

If you’re interested in learning more about CSS, check out Jennifer Kyrnin’s webdesign.about.com. She offers a free online course that covers the basics.

Share This
%d bloggers like this: