How to Use CSS to Stylize Headings in Your WordPress Content

So the extra-large font on the post titles and teeny-tiny text on the headings of Twenty Eleven are not doing it for you? This tutorial will show you how to spice up any theme headings using CSS and discuss the pros and cons of doing so.

Styling Headings with the WordPress Customizer or Appearance Settings

Maybe just changing the font and colors will be enough for you to style the headings.

Experiment with the WordPress Customizer settings in Appearance > Customize. It’s all automatic, so there is no need to know how to code CSS.

Pros: You can customize the appearance of your theme to your exact specifications, though the specifications maybe limited or constrained.

Cons: If you switch themes the fonts will carry over, but the CSS will not. You will also lose your customization if you upgrade your current theme for security reasons. Take a look at the Frequently Asked Questions about Customizer for all the other restrictions.

Styling Headings with the Child Theme Stylesheet

WordPress users may edit the Child Theme to set the styles for the headings. This is available on WordPress.com with the paid Custom Extras feature, or Appearance > Editor for self-hosted versions of WordPress. Both work the same, though you may have to add a Child Theme to a self-hosted site if you don’t have one setup.

Pros: All your modifications will be saved when you update your parent theme. It’s also a great way to learn about theme development because you can experiment to your hearts content without messing up the foundation of your site.

Cons: There really aren’t any cons to this approach and WordPress recommends using this method to change the style of your theme.

Since the technique is the same, let’s assume you know a little bit about HTML and CSS, and let’s go through the process one at a time.

Screenshot of the CSS panel.

Whether using the Custom Design option or creating a Child Theme, changing the appearance of your headings is easy. Some themes use the headings throughout the site so you will need to drill down where they are used. Below are the default headings in a post using the Twenty Eleven theme.

Screenshot of default headings in Twenty Eleven theme.Heading One <h1> is used in the site title, post titles and content heading.

Heading Two <h2> is used in the site tagline, content headings and comments.

Heading Three <h3> is used in the widgets titles and content headings.

Heading Four <h4> is commonly used to separate sections in a post.

In Twenty Eleven the <h1> and <h2> headings in the content area are coded the same. Let’s change them so they are different.

The following is the HTML code for the headings.

<div class="entry-content">;
<h1>This is a Heading One</h1>
<h2>This is a Heading Two</h2>
</div>

And, the CSS looks like this for the headings.

.entry-content h1, .entry-content h2 {
color: #000;
font-weight: bold;
margin: 0px 0px 0.8125em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0.8125em;
margin-left: 0px;
}

Change heading one’s color and add a font size.

.entry-content h1 {
color: #FB1010;
font-weight: bold;
margin: 0px 0px 0.8125em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0.8125em;
margin-left: 0px;
font-size: 125%;
}

List of headings with a red heading.

Now the heading is red and the text is slightly larger.

Refer back to the original CSS code above for heading two.

Let’s change the second heading so the font color is white on a green background.

Change the color and add a background color.

 .entry-content h2 {
color: #ffffff;
font-weight: bold;
margin: 0px 0px 0.8125em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0.8125em;
margin-left: 0px;
background-color: #39D156;
}

Your headings should now look like this.

List of headings showing one read and the other with a green background.A red title and green background may not be your design choice so check out other properties you can change in CSS to customize your headings. Add an image, run a border along the bottom, increase the font size, have fun.

For More Information

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s