How to Customize Your Blog’s Headers to Personalize Your Brand
How to Customize Your Blog’s Headers to Personalize Your Brand

While downloading and installing a free theme is a quick and simple way to add style and structure to your site, oftentimes certain design elements are booooring.

One of the first things I tackle CSS-wise when I choose a new theme is the headers. These are the titles that appear throughout your blog posts to separate your content and most of the time they suck.

I’m going to show you a super-easy way to customize your headers without digging into a lot of code.

We are going to use WordPress’ handy customizer to change the CSS without risking any damage to your site. (Because if you break the code within your site’s actual CSS, then you break your site. Ick.)

What Are Headers?

Within the HTML of your site, headers appear between two tags: <h> and </h>.

However, when you see these tags, they are usually paired with a number. Headers are identified on a range from 1 to 6:

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

In their most basic form, these numbers really only affect the size of the header text.

Headers are used to identify post titles, site titles and to break up your article content to improve readability. Just like paragraphs help to make the text easier to read, headers organize the content to create a smoother flow. Visitors to your site are more likely to stick around and read an article if it’s well laid out and organized.

These are headers in their most basic, boring form:

See the Pen Pimp My Headers 1 by Chelsy (@mamaneedscoffee) on CodePen.

Barf.

The cool thing about styling headers is that the sky is the limit on design. You can change their color, font style, font size as well as add borders and if you want to get real fancy, graphics.

How to Change the Style of Your Headers

Create a Test Post

The first thing I would suggest for you to do is to create a new post listing the headers from 1 to 6. This is going to make it easier to see the changes we make to the CSS. Simply copy and paste the following into the text tab of your post edit screen:

(Or add a “Custom HTML” block if you are using the new Gutenberg editor.)

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Publish the post. Don’t worry, we’re going to go back and unpublish it when we’re done.

Customizing the CSS

Now head to the WP Customize link – on the left-hand side, hover over Appearance and click on Customize:

Click on the Additional CSS tab at the bottom, pretend to read the information it provides you, then hit the little “close” link. You should now have a screen that looks like this:

The area to the left, with the number 1, is where we are going to start writing our code. Copy and paste the following into that space:

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

h6 {}

This is the CSS code that will control the look of your headers. If you’re not sure what any of this means, please read my post What the Heck is CSS?

Basically, each of those lines of code is now attached to the different headers of your site. If we add something in between the {} of h1, then it will change the way Header 1 looks in the preview screen.

Once we hit the publish button on the top, it will change the way it looks across your site, wherever there is a <h1> type header.

This is where all the magic is about to happen.

Elements of a Header

Without getting too fancy, you can easily change the header’s font color, size, and style to give them a more unique and custom look.

We’re going to start with the basics, then I’m going to show you some cool headers you can easily emulate for your own site.

Font Color

In order to change the font color, simply add this piece of code between the {} of the header selector:

color: #xxxxxx;

The x’s indicate the hex code for the color. Basic colors such as red and blue can be added in their English form, but more complex colors rely on a hex code in order for the CSS to understand what it is.

Google has a really nifty hex color gadget that lets you choose a color and it provides you with the hex code. You can find it here.

After choosing your colors, your header codes should look like this:

h1 {color: #000000;}

You’ll see the changes in the preview window to the right.

Font Size

While headers by default have a pretty good range in font size, you may want to change their size depending on the look and feel of your site.

The easiest way to determine font size is to think about a word processor. A standard size for a word document is 12pt – you can even use a word document to play around with sizes.

To change the size of a header, use this code:

font-size: Xpt;

X being the size you want the font and “pt” being the unit of measurement.

Now, your code should look something like:

h1 {color: #000000; font-size: 32pt;}

You’ll notice that the colon (:) is indicating the property you want to change and its new value while the semi-colon (;) is separating properties. You can learn more about that in my What the Heck is CSS? post.

Font Style

This is where we are going to change the actual font of the headers.

If you don’t want to get into the whole rigger-ma-roll of using Google Fonts (although it’s definitely worth learning how), you can stick to what are called “web-safe” fonts that all web browsers will recognize and display.

You can click here a list of the best web-safe fonts.

Once you’ve chosen a font, you can add it into your CSS code like this:

font-family: ‘Name of Font’;

Be sure to enclose the name of the font with single quotation marks (‘). Also, make sure to write in the exact name of the font.

Tada! Now your CSS code looks like this:

h1 {color: #000000; font-size: 32pt; font-family: ‘Arial Black’;}

And your headers should look a little different.

Here is an example of what the code should look like:

While I wouldn’t recommend going so crazy with the colors, this simply gives you an idea of how changing 3 elements of your headers can give such a different look.

Let’s Get Crazy

Now that you know how to change the basic elements of your headers, let’s get a little fancy and make them look a bit more stylish and unique.

Header With Background Image

See the Pen Pimp My Headers 2 by Chelsy (@mamaneedscoffee) on CodePen.

You’ll notice there are a few new snippets of CSS in here beyond font size and color.

First of all, the font-weight property sets the boldness of the text while the text-align code centers the text.

Second, the background property is what tells our site to display a background behind the header. The #fff indicates that if there are any transparent portions of the background image then white will be shown. The next piece, url(”), contains a direct link to the background image.

If you want to use a background image for your header, upload the image to your WordPress media library, click on the image and then copy the link it provides at the bottom right-hand corner.

Header With Text Shadow

See the Pen Pimp My Headers 3 by Chelsy (@mamaneedscoffee) on CodePen.

You can add a bit of depth to your header by creating a text shadow using the property text-shadow.

Within this selector, there’s a lot going on. The first number (in this case, 5px) controls the horizontal direction of the shadow. The number 0 would place it directly behind the text, whereas positive numbers move the shadow to the right and a negative number would move it to the left.

(By the way, “px” stands for pixels, which is just a unit of measurement.)

The second number, again 5px, indicates the vertical direction of the shadow. A positive number moves the shadow down and a negative number moves the shadow up.

The third number, 1px, controls the fuzziness of the shadow. A zero makes it sharp and crisp – as you increase the number, the fuzzier it gets.

Lastly is the rgba value. Unfortunately, you cannot control the color of the shadow using a hex color code – you need to use the rgba value (which stands for red green blue alpha). You can use this handy-dandy tool to convert your color’s hex value to rgba value.

The order of the numbers in the brackets goes: Red, Blue, Green. The 0.4 indicates the opacity of the color. A 1.0 would display the true color, while 0.0 would be invisible.

Phewf! Are you doing okay? I’m going to show you one more nifty little header trick:

Header With Left Border

See the Pen Pimp My Headers 3 by Chelsy (@mamaneedscoffee) on CodePen.

The left-hand border creates a very simple, yet very effective, header style but the code seems a little hinky compared to what we’ve looked at before.

This is because we are using the :before to create that little tiny border. All the :before next to the h1 selector does is tell the browser it wants this section of style code to be displayed after the header tag.

In this case, we want the sliver of green to show BEFORE the header tag.

There’s a lot of other code here that makes it work but is not really necessary in customizing this look. If you look at the first chunk of CSS, h1:after, there’s a selector called width and it is measured in pixels (px). You can change the number to make the sliver wider or thinner, depending on your preference.

In this section, you can also change the color of the border by changing the background color.

The last chunk controls the look of the text – mainly the color, font-family, and font-size selectors. The rest just pertains to the positioning of the header.

Your Headers Await!

There are so many ways you can customize your headers to match the personality and brand image of your site – these are just a few of the basic things you can do to make your headers unique.

(PS: Don’t forget to delete that test post or throw it in drafts when you are done!)

As always, if you have any questions at all, feel free to contact me or leave a comment below!

Coding, design, and writing are my happy places. I can lose all track of time when I’m working on my blogs.

I hope here at MNC you will find the answers to your questions and some inspiration to make your blog or site really totally cool!

Learn More.

Latest Posts

How to Create Your Blog in HTML: The Ins and Outs

When I see questions about code, most of them pertain to CSS. While CSS is important in making your site look and feel the way you want it to, HTML is crucial in building a website. I started learning about HTML when I was in high school and began building little...

How to Become a Virtual Assistant From Home

Wouldn't it be nice to make money and stay at home? A pipe dream, you say? Not anymore! For almost two years now I have been working from home as a freelance writer making more than I did when I worked full-time. But freelance writing isn't the only way you can enjoy...

How to Start a Mom Blog in 2022

Welcome to 2022! Are you ready to start a mom blog? Nowadays, having a blog can be a lucrative business that you can run from your very own home! How much do mom bloggers make? It all depends on how much work they put into their blog and how they monetize their...

Don’t forget to sign up for the FREE Blogger Toolkit!

You May Also Like…

How to Create Your Blog in HTML: The Ins and Outs

How to Create Your Blog in HTML: The Ins and Outs

When I see questions about code, most of them pertain to CSS. While CSS is important in making your site look and feel the way you want it to, HTML is crucial in building a website. I started learning about HTML when I was in high school and began building little...

How to Start a Mom Blog in 2022

How to Start a Mom Blog in 2022

Welcome to 2022! Are you ready to start a mom blog? Nowadays, having a blog can be a lucrative business that you can run from your very own home! How much do mom bloggers make? It all depends on how much work they put into their blog and how they monetize their...

Do I Have to Know CSS to Create a Blog?

Do I Have to Know CSS to Create a Blog?

Ugh, another article about CSS. I know, I know. But the experts say to write what you know and I, well, know CSS! Ever since I learned how to code with CSS, I've never looked back. When it comes to web design my mind automatically goes, "Blog Layout HTML CSS". I get...

0 Comments

Trackbacks/Pingbacks

  1. On-Page SEO: How to Boost Your Site's Traffic - Mama Needs Coffee - […] can also use H2 tags to optimize your on-page SEO. That’s why I tend to title lists using an…

Submit a Comment

Your email address will not be published. Required fields are marked *

Skip to content