CSS – Changing headline colors and styles

This tutorial shows you how to change headline colors and styles in a WordPress theme (this also works with any CSS styled template or HTML)

I am going to use the default WordPress theme as an example. This is called Kubrick v1.5.

There is a file called style.css in each theme and this is where your theme is styled.

You can find that file in /wp-content/themes/default/ for the default theme. If you have loaded any other theme, then it will be found in wp-content/themes/themeName/

Headlines or titles are defined by the H tag. H1 is the primary headline, followed by H2 and so on.

The style.css file code can be opened by Notepad or other text applications. I recommend Notepad because it doesn’t add any other code which unfortunately Word or others do. You can also use commercial programs to edit the code. Most packages include HTML and CSS editors. Always save a copy of the original file as a backup.

headline tutorial showing h1, h2 and h3

So as you can see above, the default theme H1 is in white with large writing. The others are all black, bolded and progressively getting smaller from H2 to H3.

The CSS code

Now lets look at some selected code in the default theme: (everything in red I have added to help you)

h1, h2, h3 { (everything after applies to all three headlines)
font-family: ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif; (this sets the font types)
font-weight: bold; (this makes them all bold)
} (closes this statement)

h1 { (applies to largest headline only)
font-size: 4em; (set size of font; can use pixels also)
text-align: center; (sets the text as centered on the page)
}

h2 { (applies to second level headline)
font-size: 1.6em; (set a smaller size font)
}

h3 { (applies to third level headline)
font-size: 1.3em; (set a smaller size font)
}

Change the color of the H1 tag

So now lets have fun and change some of the code above with one line added

h1 {

font-size: 4em;

text-align: center;

color: #ff3300; (changes the color of the headline in hexadecimal to red)

}

changing the color of a H1 headline

Now we have changed the color of the H1 headline. Don’t worry. I give you a link to the codes for colors in the Resources section at the bottom.

Learn about links and hover

As you can see below, if the cursor hovers over the headline which is linked to the page or post, then it turns from black to blue.

hover over headline to show color change

The code to do this is below

a, h2 a:hover, h3 a:hover { (sets color for a H2 and H3 link when hovered over)
color: #06c; (sets the color blue in shortened hexadecimal)
text-decoration: none;
}

The “a” above refers to a link.