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.
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)
}
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.
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.
Resources
There are many other styles you can set for headlines and text. Here is a great resource to learn about them:
Colors in CSS I highly recommend you use the web safe palette of colors shown towards the end of this link.
Here is a more advanced color wheel
{ 1 comment… read it below or add one }
Hi,
this is one of the clearest explanation, I have found. The only thing is that I want a different headline color for each page. I have been able to change my Home’s, as it is my blog post’s, but how would I go for my About that I want green and my art page that I want orange.
Thanks for your help!