How to Pimp Your Headers
How to Pimp Your Headers

While downloading and installing a free theme is a quick and simply 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 identity post titles, site titles and to break up your article content to improve readability. Just like paragraphs help to make 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 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 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 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’s 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) control the horizontal direction of the shadow. The number 0 would place it directly behind the text, whereas positive numbers moves 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! 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 control the look of the text – mainly the color, font-family and font-size selectors. The rest just pertains to 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

On-Page SEO: How to Boost Your Site’s Traffic

On-page SEO has sort of become a buzz term when it comes to building traffic on the interwebs. No longer can you just write good stuff and throw it out there - if you want organic traffic, you have to work for it. Thankfully, when it comes to on-page SEO, you really...

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...

How to Use Tailwind for FREE (Pinterest Without Paying!)

Have you been banging your head over your Pinterest marketing strategy and trying to figure out a way to organize your pinning schedule without spending money on Tailwind? Once upon a time, I did. I made up fancy Google spreadsheets that listed all of my blog posts...

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

You May Also Like…

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...

Why You Should Learn CSS as a Blogger

Why You Should Learn CSS as a Blogger

Even though this article is titled Why You Should Learn CSS as a Blogger, I wrote it in my schedule as "Why You Learn CSS" and that made me laugh. So, why you learn CSS? While there are many fancy plugins out there that give you a buttload of control over the look of...

10 Online Courses to Learn HTML and CSS for Free

10 Online Courses to Learn HTML and CSS for Free

Are looking to learn HTML and CSS for free? While this site can certainly give you cool little coding tidbits to apply for your site, you may have a hankering to learn how to do this coding all on your own. I know I did once upon a time - and I had so much fun...

0 Comments

Submit a Comment

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

Skip to content