How to Adjust Header Styles with CSS and Bootstrap

Headers remain one of the best and most functional parts of your website’s content. They help organize thoughts throughout a piece, and they also clue readers into the main parts of your content with just a cursory skim. There’s the H1, which serves as the title fixture of your content. Then H2s can divide up other major subtopics, with H3s and H4s further subdividing really long content.

More often than not, your WCMS has a prescribed style for each H1/2/3/4. These vary in both font styles and sizes. Sometimes, the H1 will be in a serif font with H2-4 being in sanserif fonts or vice versa.

But what if your headers no longer convey the style you need for a particular page? You should be able to just switch up the H4 instead of the H2 because you like that look more, right?

Wrong. Here’s why.

H1/H2/H3/H4 all affect the backend of your website’s content in two major ways:

1) Headings affect your website’s SEO.

H1 and H2 tags ultimately work in combination with your page title and url in determining the primary keywords of a given page. Ensuring these elements are (1) on the page and (2) are optimized for your keyword is crucial for SEO purposes. Better rankings in terms of SEO lead to more people potentially visiting your website (and more people mean more traffic and more traffic means the potential for more business). 

2) Headings greatly affect your website’s ADA compliance.

Screen readers use the order of your H1-H4s to figure out the order of the content and the priority of said content. Throwing around those headers simply for the sake of style creates a hodgepodge of content that a screen reader (and thus a user with a disability) won’t have any idea how to comprehend. While ADA compliance might seem like the last thing on your mind as you build a website (or even build up page content), it still affects millions of people around the world. To learn more about ADA compliance and why it matters, check out our resource guide here.

So, how can you change the style of your headers without changing the order and still get the visual elements you want? This tutorial will show you exactly how to do that with just a bit of CSS.

Here’s the basic HTML for modifing the styles/classes of your header tags.:

As you can see, the class name is simply the header tag name itself. If using Bootstrap, the classes "h1", "h2", "h3", and so on are all included by default. You can modify these classes in your own stylesheet. For example, the classes for "h1" and "h2" on the solodev website are:

As you can see from the CSS, we're defining both the class "h1" and the tag "h1" all in the same go. This is best practice as you now can ensure consistency between the tag and the class.

To many, this may seem like a trivial exercise but it definitely saves both time and consistency. Many sites try to accomplish this same practice by creating complex classes that are unrelated to the heading tag itself. By using this tutorial -- either by relying on default classes or creating your own -- you now have full control over your heading styles while maintaing best SEO and ADA practices.