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.