One of the best things about WordPress is how easy it is to customize. There are thousands of WordPress themes available, designed for everything from travel blogs to flash game arcades. You can have an attractive website up and running in minutes with just the default WordPress install and a free theme chosen from one of the many options available on WordPress.org. The downside of running one of the free themes is that there is a good chance that a lot of other people will be running exactly the same theme. Fortunately, it’s easy to make your site look unique by customising the CSS.
What is CSS?
CSS stands for Cascading Style Sheets – these are the files that tell your browser what your website should look like. If you made your own web pages back in the days before CSS existed, then you will remember how annoying it was to have to customize every single link, image, or other tag by hand. CSS solves this problem. If you want all of your links to be coloured green, italic, and not underlined, you simply set that in your CSS file, and you’ll never have to worry about it again.
You can edit the CSS for your WordPress themes in your favourite web development program, or you can use the WordPress CSS editor, which can be found under Appearance | Edit CSS in your WordPress admin panel.
Simple Theme Changes With CSS
If you want to make your mark on one of the free themes, then the easiest way to do that is by changing the colour scheme or the fonts. The main font for the your theme is usually defined in the body, and the code will likely look something like this:
body {font-family: Verdana, Arial, Helvetica, Futura, sans-serif;
font-size: 1em;
padding:0;
margin:0; }
Be careful if you change the font-family – try to use only fonts that are available on most computers, such as Verdana, Century Gothic, Lucida Sans and Tahoma.
The post content areas are usually styled using the following CSS classes:
? post
? post-entry
? entry
? content
However, every theme is different, and not all theme designers follow the same conventions. If you are struggling to figure out which CSS classes to change for your theme, visit your blog in Chrome, Opera or Firefox and right-click on the part of your blog that you want to change, then select Inspect Element – this will show you what CSS classes affect that part of the page.
You may be able to change the colours of your chosen WordPress theme without having to use a WordPress CSS editor. Many WordPress themes offer simple customisation options under Appearance | Theme Options in the admin panel:
You can use CSS to change any part of your theme, from the colour scheme and the fonts used to the appearance of links, and the general layout. Covering CSS in-depth would require a whole book, however. There are lots of free resources online for learning about CSS. Here are a few of the best places to look for CSS tutorials:
This post was written by James Harper on behalf of Themeover, the WordPress CSS editor specialists.
I have been wanting to know how these work and was excited to see this CSS for dummies blog. I’m off to customize my CSS! Thanks!