Customizing H1, H2, H3 heading fonts

[Malt]

I would like to change the size and colour of my h1, h2, h3 headings in the Quattro theme. I'm not CSS savvy, so the simpler the solution, the better. Thanks.

[dabyrom]

Hi Malt,

You are going to have to dive into CSS.  It's not as bad as you think, I just started a few weeks ago and feel like I've got a good grasp now.

Use the inspect element tool in your web browser to practice CSS as it allows you to make changes and see the results in real time in your browser without actually changing the CSS on your website.  Once you get it right, you go in and officially change your CSS.  This is how I learn and it works well.  Firebug add-on for Firefox seems to be the most popular but I'm partial to Safari and Chrome built in element tool.  Just right click the screen and you should see an option to inspect element.  Now, to answer your question:

Starting around line 614 of your CSS is the headlines.  Looks like:  /* Headlines.  Under this are the settings for the H1, H2, etc.  What you want to target is "font-size: ?px;"  The question mark will have actual numbers that dictate the size of text.  Your H3 looks like this:

h3 {
font-size: 30px;
}

So play with it until it looks like you want it to.  Again, best to play around with the inspect element tools before making real changes.

[Malt]

Hi dabyrom,

Thanks for the advice. It's a little more complicated on my CSS for some of the headings. There's more coding that I don't understand. But I'll start playing with the inspect element tool and see what happens!

[Author]

Posts