Wordpress uses style sheets to control the look and feel of just about every aspect of your Wordpress site.    If you want to make changes to fonts, layouts, colours, etc, you’ll have to roll up your sleeves and open up the style sheet for your theme. 

When you do open it, you are likely to be a little over-whelmed by what you see.  There is line after line of code, and each line is defining some aspect of the look at feel of your site.  I highly recommend using a dedicated CSS editor.  I use Topstyle Pro, which you can see in the screenshot below, but Topstyle do have a free, Lite version as well.

Cascading Style sheets are a great idea, and something all sites should use.  If you have ever built a standard HTML site, you might be thinking that your site worked perfectly well without a style sheet, and it probably did.  However, using a style sheet has a number of advantages.  The first advantage is that all of the “formatting” of the content is held in a separate file meaning your content pages are shorter, and load more quickly. 

The style sheet will need to be loaded in memory of your machine, but once there, pages all of the pages on your site that use that style sheet will be able to access the formatting commands, and respond appropriately. 

In today’s ever increasing internet speeds, this might be less of an issue than it was several years ago, but there are other very good reasons to use style sheets.  Suppose you want to change the font your site uses, or maybe the colour of the text?  With style sheets, you make the change in one file, and that change is immediately applied to your entire site.  There is no need to edit each page individually.

OK, so let’s look at an example.  One of the things you might like to do is modify the size of the header tags.  This is fairly straight forward.  When you open up your style.css file, look for the sections that refer to h1, h2, h3, h4, h5 & h6.

Here is the section in my style sheet:

h1, h2, h3, h4, h5, h6 {
    font-family: Arial,sans-serif;
    margin: 0px;
    padding: 0px;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: black;
}

h2{
 font-size: 114%;
 color: black;
}

h3{
 font-size: 100%;
 color: black;
}

h4{
 font-size: 100%;
 font-weight: normal;
 color: black;
}

h5{
 font-size: 100%;
 color: black;
}

You will notice that the first block of code refers to all 6 header tags, whereas the next 6 sections of the style sheet only refer to one of the six.

When a section of your style sheet refers to several items like this one:

h1, h2, h3, h4, h5, h6 {
    font-family: Arial,sans-serif;
    margin: 0px;
    padding: 0px;
}

The style will be applied to ALL of the items.  The above code will apply the formatting to h1, h2, h3, h4, h5 & h6 header tags.  The code that follows this piece shows that each of the 6 headers have their own custom formatting as well.  Here is the one for the H1 tag:

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: black;
}

So, when an H1 tag is rendered in a web browser, the H1 tag will have the following rules applied to it first:

    font-family: Arial,sans-serif;

    margin: 0px;

    padding: 0px;

(these are taken from the common formatting of all 6 headers).

The H1 will then be modified with these formatting rules:

font-family: Verdana,Arial,sans-serif;

font-size: 120%;

color: black;

The font will be changed from the one used by the “common” formatting rules, and a size and colour rule will further modify the H1.  The full formatting for the H1 tag on my site will therefore be:

    font-family: Verdana,Arial,sans-serif;

    margin: 0px;

    padding: 0px;

    font-size: 120%;

    color: black;

(ie, a combination of all rules applied to the H1).

OK, so to change the size of the H1 header, we need to modify the font-size variable.  At the moment it is set to 120%, which basically means it is 120% larger than normal text.  There are various options here, including using a percentage value like this example, or using absolute size in pixels and a whole range of other units that are beyond the scope of this tutorial.

I could make my H1 header bigger by changing the font-size line to:

    font-size: 125%;

    font-size: 130%;

    font-size: 135%;

    font-size: 140%;

    font-size: 150%;

E.t.c…

I could make the font size of the H1 header smaller by reducing the percentage:

    font-size: 115%;

    font-size: 110%;

    font-size: 105%;

    font-size: 100%;

The last line would make the font size the same size as the rest of the content on the page.

I’ll try to write some more CSS tutorials on this site, so if there is anything you would like me to cover, please add a comment at the end of this post.

If you would like to learn more about CSS in a simple, step-by-step manner, you can order my CSS Tutorial.  You can download the first two chapters of this CSS tutorial.