How to Customize Heading Tags With CSS

Hi Ashley! I was just wondering if you knew of a tutorial on how to customize heading tags? (h1, h2, etc.) I can’t seem to find any that worked online!

This will require a bit of CSS knowledge, but for the most part it’s pretty simple!

In the CSS, each heading element is targeted using their HTML tag. So for h1 you just use h1, for h2 you use h2. Simple, right? With that in mind, here’s what some sample HTML might look like:

h1 {
    color: #000000;
    font-family: Helvetica, 'Open Sans', Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;
}

I think all the styles in there are pretty self explanatory.

  • color changes the colour of the text. You want to insert a hex value, which you can obtain from ColorPicker.com.
  • font-family changes the font. But you can’t just name any font. You have to use a web safe font or one that’s been included in your theme elsewhere (using Google Fonts, for example).
  • font-size adjusts the size of the font (in pixels). You can make it bigger or smaller by changing the number.
  • font-weight determines the thickness of the font. The most commonly used values are normal and bold.

And you can even add extra styles for background and border like this:

h1 {
    background: #000000;
    border: 2px solid #000000;
}

For the background you can specify a colour (as shown in the example), an image, or both. Here’s an example for using an image:

h1 {
    background: #000000 url('URL TO IMAGE') no-repeat;
}

The border property takes in three values: the width of the border, the style, and the colour. In the example above, we have a 2 pixel wide border that is solid and black (#000000). Other styles include: dotted, dashed, double.

Photo of Ashley
I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

Leave a Reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

7 comments

  1. This is such an awesome resource!! Easy to follow for dummies like me 😉 I’m stuck though – I just went into my style sheet, made some changes and updates the file, but it isn’t showing the new changes on any of my posts or when I test on a new blog post. Any idea why this could be?

Recent Posts

    Random Posts