One of the most required tasks in Wordpress when defining a new theme or switching from a theme to another or simply when you want to set a display role for your widgets or plugin options is changing your CSS styles to gain the desired effect on your pages. The first thing you need to know is that Wordpress is not only a complex CMS system but also a complex CSS system. In fact, a significant number of layouts that you see in Wordpress is the result of a combination of multiple different styles. CSS styles are bound to the HTML structure generated by the PHP code of Wordpress. When you use a core function such as the_content(), you're actually generating an HTML structure that needs to be styled. Further, when you're inside the Loop and retrieve all posts for each category page, another HTML structure is generated and so on.
First, know your HTML structure. Open your Wordpress pages with CSS disabled, look at the source code of each HTML page and see how such page is marked up. CSS can't work without structure. First define your structure, then apply styles. When you have to create a brand new theme, don't delete the default one. Simply rename it, open its main CSS file, put everything inside a comment block and then begin to add your CSS styles. Why so? Because you still need to see the old styles and the order in which they're written to create new styles. It's easier to see how the old styles worked and the elements they were applied to than starting with a blank style sheet.
Second, know CSS cascading and specificity. The overwhelming majority of quirky behaviors with CSS is due to problems with cascading and specificity. There are many good tutorials on this subject, such as this one from SitePoint, but the point with Wordpress is that CSS styles can be combined together in a massive way. Wordpress themes, plugin and widgets use an enormous number of CSS classes. For example:
<body class="home promo info"></body>
You have several classes on the same element. Which styles will win? Things to consider are:
- specificity
- cascading order
An example of specificity:
.home {
background: url(wp-content/themes/name/bg1.png) no-repeat;
}
.promo {
background: url(wp-content/themes/name/bg2.png) no-repeat;
}
body.info {
background: url(wp-content/themes/name/bg3.png) no-repeat;
}
The last rule wins, because it's more specific. There are also cases of conflicting rules that can be fixed with the !important statement, like so:
body.promo {
background: url(wp-content/themes/name/bg2.png) no-repeat !important;
}
body.info {
background: url(wp-content/themes/name/bg3.png) no-repeat;
}
The first rule wins in this case, because it has the !important statement in it. Instead, the cascading order comes into play when all the rules have the same specificity. In this case, the rule that comes after in the source wins. For example:
.home {
background: url(wp-content/themes/name/bg1.png) no-repeat;
}
.promo {
background: url(wp-content/themes/name/bg2.png) no-repeat;
}
.info {
background: url(wp-content/themes/name/bg3.png) no-repeat;
}
In the example above, the last rule wins because it comes later in the source.
Finally, know browser bugs. If you want your Wordpress site run in all the major browser versions and brands, you need to know that not all browsers interpret your styles in the same way. A browser, in fact, does interpret your styles. Major problems currently arise with versions 6 and 7 of Internet Explorer. For IE's bugs, check out Position Is Everything and, most of all, the seminal article on the hasLayout property of IE 6 and 7.