Almost every blogger would like their design to be different from everyone else’s. After all, that’s one more thing that can set you apart from the crowd. However, not every blogger has experience with CSS. If you fit that description, I’ve written this just for you!
This isn’t really an introduction to CSS. It’s more of a guide to change specific elements within your theme. Over the course of several posts, I’m going to cover some things you can do to your current theme to add your own flavor and style. In this post, we’ll take a look at the text.
In your theme directory, the style.css file will be our focus. Assuming you have an installed version of WordPress, there are two different approaches to editing the stylesheet. You can go to admin/presentation/theme-editor/stylesheet, and edit the file there, or you can open the stylesheet in a text editor, edit the file, then upload it to your server. I would recommend the latter. Any basic text editor will do the trick. In this example, we’ll edit the style sheet of my Paintbrush theme using Notepad. ***Before changing anything, make a back-up copy of the original style.css file.***
Font Family
How the text on your website looks is dependent on the font that’s chosen. Making changes to the fonts on a theme doesn’t seem like a big change, but they can change how your site looks more than you realize. The font you decide to use must be installed on each visitor’s computer to be displayed. Because of this, there are only a handful of different fonts that are commonly used for the text on a website. The most common ones are Arial, Helvetica, New Times Roman, Verdana, and Georgia.
When you open your theme’s stylesheet, in the body section, you’ll notice that there’s probably more than one font listed. The reason for this is because if your visitor’s computer doesn’t have the first listed font installed, it will go to the second, and on down the list.
Let’s change the first font listed from Verdana to Arial. Let’s save the changes and see how it looks.
Do you see the change? Arial is tighter and a little smaller. If you use Arial, I would recommend listing Helvetica second in your list, because it’s very similar to Arial. Most computers have one or the other.
Experiment with the other fonts to find what you think looks best.
Font Size
This is another element that comes down to personal preference. Although larger fonts are easier to read, smaller fonts arguably look more attractive. In Paintbrush, the default font size is 14px. Let’s change that to 12px, and check out the results.
Still in the body section of your stylesheet, change the font size from 14px to 12px.
Experiment with different font sizes until you find what fits best. There really is no right or wrong. Just fix it the way you like it. If you mess it up, you can always re-upload that copy you made of the original. 
Hey Anthony,
That’s a great starter tutorial. Really well written and easy to understand for anyone that doesn’t know CSS.
Another beginner tip … don’t forget the semicolon ; after each variable! I’ve done that a few times when I’m changing a whole bunch of stuff at once.
That’s a good point. All the “punctuation” is there for a purpose…..it’s code. If you leave one out, it has the potential of making everything go haywire!
just one punctuation can make it go haywire …
i guess customizing is not for me …
sounds scary … hehe …
back to readymade themes …
Well, as far as CSS goes, it’s a fairly standard format. It’s usually not too hard to find the problem if you mis-type something.
I’m tried to use your network 1.0 theme which i downloaded from theme.wordpress.net. However, it seems to show the complete post for each article. Am i missing something? I quite like to have the summary and have the read full entry link for each post instead. i feel it will quicken the loading time particularly if i embedded some youtube video within the post.
Also, i have updated with the newest versin of wp 2.2.3 and the widgets seem to be stuck to where it was on v 2.2.2. I can’t move them about anymore. Any help?
As far as the theme displaying the complete post, that is the default way it works. Generally to display an excerpt from a post, you would type what you want to appear on the front page followed by the “more” tag. Here’s the information straight from the source.
Regarding the widget issue……..I’m at a loss on that one. I would recommend searching the forum at WordPress.org.
I am using the “This Just In” Theme. Great.
However, I would like to reduce the size of the font in the “Recent Posts” plug in
I do not know where to modify.
Styles does not seem to work and I cannot seem to access the plug in.
Can you give me a pointer to where I could modify.
Thanks,
Hello,
I’m using “The Journalist” theme and I would like increase the width for the post area, change font to verdana, post’s heading color to red from black.
What changes that I should apply to the CSS code for the above mentioned things?
I don’t think you can edit a theme hosted on WordPress.com.
Ya I know that for a theme to be edited one need to have a self hosted blog.
I was asking this question because I’m planing to get a domain name for my blog and to make it self-hosted.
Any answers to my previous questions ???????
Thanks in advance!!!
Well Ankit,
That depends on exactly how the “Journalist” theme is coded. There is no answer that would fit every theme. I have a post about theme layout that may give you a better understanding of how to widen the post area. This post should give you an idea about the fonts. Hope that helps.
I was just browsing through your site and I have to say that I like what I see. I wish you the best of luck with it. And I really like your WordPress theme. I think you might be underselling yourself regarding your web skills.
Thanks alots.
John M
John M………thank you for the encouragement!
thanks .great post. Acturaly this is very useful
Try also new free PHP IDE – Codelobster PHP Edition with special WordPress plug-in for editing your themes.