DIY WordPress: How To Teach Yourself CSS For WordPress

(Reading time: 9 – 14 minutes)

I recently offered a person on the DIY Themes private forum some options for handling a CSS issue for the Thesis theme. As noted in the previous article “Thesis Theme For WordPress: pros and cons,” Thesis CSS is “stylistically complete.” That is, while the default styling is pretty good, if you want something different (say because some plugin-supplied html renders funny) you may have to do some work.

[Updated: 3/27/2010, cleaned up some spelling and grammar.]

In a followup, he asked for more information from me:

“Anyway, if overriding the CSS is the answer how is that accomplished? I appreciate the help.”

Following that, he then stated in response to another person who had given him some code:

“I put that code in the CSS Stylesheet and it didn’t change much. Is there a particular declaration I am overlooking?”

I can definitely relate to his extreme frustration. I’ve suffered in the same way many times in the past. So this stays anonymous, because I have nothing personal against this person, and I came across as a little snippy. (I can be a bit brusque when I’m up to my eyebrows in technical material). There is absolutely nothing personal in any of my comments.

Yet I believe there really is a fundamental misconception implied here, which is this:

“It would be so easy if only someone would only give me The Answer.”

I suffer from this misconception myself, or, I have suffered from it greatly in the past even when I knew better. Now I’m a lot smarter. If I don’t know how to do something, and I can’t find “the answer” within a few minutes searching the web, I don’t do it. Or I might do it later when I have some time to poke at it. But in general I choose to work within the bounds of the technology.

There’s two real problems here. The first is that this person did not do any research on their own to determine how styles could be overridden. Or if he did, he didn’t have quite enough technical skill to understand the answer he was looking for, even if he saw it.

The second is assuming that there is “an answer” and that somebody else has it.

Often, there isn’t an answer. The question may be poorly posed. Or there are multiple answers, any of which could be correct depending on the context of the problem.

Let’s look at style sheet overriding first. Here’s one of my replies to him:

Overriding is explicit in the notion of “Cascading.” As in Cascading Style Sheets. CSS.

This is one of those “Let me Google that for you” type of questions. For example, here’s my second result for the search terms “cascading style sheet override”: Chapter 6 of the W3C’s specification of CSS2, 6 Assigning property values, Cascading, and Inheritance. (Your results may vary. But not by much.)

Here’s my reply to the other question, where I cover both high level and low-level concepts. At the high level I provide some general techniques for learning CSS. At the low-level, I have several tips I’ll share that will help you tremendously for getting started. But you still have to do the work.

Looking for answers

Here’s what I do when tweaking CSS: I open up the thesis style sheets, find the selectors, ids and classes applicable, and trace their effects through my code. Sometimes, like for this article (and another project) I’ll print out the style sheets. Below is a screenshot of the PDF file for Thesis theme’s style.css.

I printed this PDF file on paper.

Circle the relevant selectors with red marker. Or red pencil. Or crayon. It doesn’t matter. What matters is that learning CSS requires active learning. You cannot learn CSS as a result of getting questions answered.

Let me repeat that:

You cannot learn CSS as a result of getting specific questions answered.

You have to actively use it. Create with it.

Create a dummy web page. Include the CSS style sheet into that web page. Make changes, watch the effects ripple through the html output.

Active learning.

Getting questions answered is passive learning.

Here’s an analogy. Suppose you are a craftsman of fine furniture. You have worked in your craft your years, maybe 15 or 20 years. Now someone shows up at your door with a question:

“How do I attach the legs to my chairs?”

To a person not well-versed in your craft, this seems – on the face of it – a perfectly normal question with a perfectly normal answer.

To you, this person knows just enough to NOT be a customer. But he’s insistent. He wants an answer, and he wants it now. Your attempt to explain that attaching legs to chairs depends on many factors: the style of the chair, the type of wood, the fasteners or lack of fasteners at hand, the tools available, probably many more. But this answer is unacceptable. He demands an answer. You’re the expert, you should know, it takes you so little time, and it would save him so much of his precious time. Never mind the couple of hours you might spend are based on your 15 years experience. So what do you do?

Books are great!

Something else I like to do when learning any technical book is to purchase a book on the subject. I like to read technical books at bedtime. They help put me to sleep, but more importantly, when I’m reading about programming or other technical topics, I have to use my imagination to understand the material. Since I am not at the computer, I have to think about how I would put the material to work once I sit down at at computer. Sometimes, I get up and go work for an hour or two applying what I read, turning information into knowledge! And that’s good too.

In fact, while we’re on the topic of CSS, let’s take a look at one of the absolute best books on the subject you could ever hope to find: Eric Meyer’s “Cascading Style Sheets The Definitive Guide.” This book is good. It was first published in 2000, and covers CSS1 in detail, and parts of CSS2. If you’re a beginner, you have no excuse, you can pick up the 2nd edition used for $3.50. The price of a latte. Honestly, before Amazon, in the 1990s, I had to purchase these books almost always new. The few that hit the used book stores didn’t stay on the shelves very long, and weren’t marked down very much either. Half off at best. Put aside a your natural tendency to assign value by price… if you’re running a web site, this is one of the best $3.50 (or $29.95) you will ever spend!

An example from WordPress Thesis theme

As I mentioned in “Thesis Theme For WordPress: pros and cons,” Thesis CSS is a bit overdone. But CSS can be learned, whether you’re using Thesis or any other theme for WordPress. Here’s some tips:

1. Override the styles you’re interested inline. That is, use <p style="color: red;"> to get your style correct for the block your currently working with, then create a class in your style file with those attributes. Then replace the inline style. If it doesn’t work, check your spelling, try again. If it still doesn’t work, check how the style sheets are being loaded. Then check how the selectors are being used.
2. Divide and conquer, work your way from bottom up. If you have a special block element, work out the styles for that all at once, and make sure to override any global elements that conflict.

   For example, long time Website In A Weekend reader may be wondering where those “Upshot” boxes went, the bordered summaries on many of my early posts, which all have a common style. As it turns out, I stopped using them for two reasons. One is I need to rework the styling for Thesis theme. The other is that I am using the Hackadelic Table of Contents plugin, which places a name element ahead of headers… which increases internal padding… which makes my Upshot boxes look ugly.

   So I stopped using “Upshot” boxes, in favor of spending that time working on the 101 articles for Website In A Weekend pillar content. Maybe I’ll write a blog post when I fix them. For what it’s worth, I originally styled these “Upshot” boxes inline, then copied the styling into the style sheet once I had it figured out.

3. Generalize, find a common style to work from top down. For example, I use a sibling selector to get the indentation I want on this website: no indentation globally… but single em indentation for all

   elements after the first. This is a very classical style, look it up in academic journals.

4. Test locally. It’s super easy to create a really simple web page with all the CSS embedded in the element. You can throw these web pages away once you’re done with them. Or save them in an archive somewhere. If you’re really clever, you will write these little example web pages as mini-tutorials for yourself… which of course you could post on your blog…
5. Teach CSS to someone else. College professors sometimes get a bad rap in the real world on several counts: “If you can’t do, teach” etc. What most people don’t know is that a college (esp. university) professor is expected to be able to teach classes outside of his or her specific specialty, from a cold start. Obviously, the further from the professor’s specialty area, the lower level the class would be, but the principle is the same: preparing lecture materials is an incredibly intensive learning experience.
6. Use better tools. Here’s another useful link: Firefox Web Development Toolbar. Firebug allows to easily examine how all the margins and padding are behaving after each sizing style you specify. I would be lost without the Firefox Firebug extension on CSS block problems. I can’t recommend it highly enough.

If you sincerely implement any of these tips, your knowledge of CSS will improve rapidly and permanently as well. If you implement ALL of them, expect your knowledge to increase very rapidly.

NOTE: Different design settings in Thesis may result in different display behavior. That is, getting it correctly displaying for my settings may not guarantee the same code will display how somebody else wants it. But it might. Which makes it difficult to provide “an answer” to a styling question without having more context. It’s even worse when the themes are different. This is the same sort of issue as why something may display one way in the sidebar, and a different way in a post.

In closing, with some little thought you should agree that this article really applies to teaching yourself CSS for any reason, not just for WordPress or for Thesis theme.

In fact, the broader principles here apply to all learning, of any subject, anytime.

I’ll have more on WordPress and Thesis CSS in the future. It’s a skill I’m in the process of teaching myself, and I’ll pass on what I learn as I learn it. If you have any specific question, leave a comment. If I can’t answer it I may be able to help you find an answer.