HTML&CSS for Bloggers:How to Change Heading Style

Disclosure: This post may contain affiliate links, which means I may receive commissions if you click on the links and make a purchase.

Here is the tutorial on how to change heading styles on WordPress with five heading style CSS codes.

Even if you don’t know anything about HTML and CSS, that’s okay.

All you have to do is follow the easy steps! (You just need to copy and paste)

 

(Heading tags are usually used for the title and subheadings of posts. )

 

How to change heading style

Login to your WordPress Dashboard, go to Appearance >> Editor, then you will see Style.css.

Scroll down to the bottom, copy and paste at the end.

 

H1 is usually used for the largest title (like a title of each post) whereas H2 – H6 is used for subheadings. So, I highly recommend using H2-H6 when you need subheadings in a post.

I only use H2 for subheadings on this blog.

 

 

CSS Heading Tag

 

1. Simple Line

CSS:

h1 {
color:#737373;
border-bottom: solid 3px #afeeee;
}

The first color code (#737373) refers to the font color(Grey), while the second one (#afeeee) refers to the line color(light blue).  If you want other colors, just simply replace the code with the one you like.

You can find HTML color codes on htmlcolorcodes.com

 

 

2. Background

CSS:

h1 {
color:#ffffff;
background: #FFB7CF;
padding:0.2em;
}

 

 

3. Background with a vertical line

CSS:

h1 {
color: #494949;
padding: 0.2em 0.5em;
background: #FEE6F0;
border-left: solid 5px #FFB4D4;
}

4. Stripe

CSS:

h1 {
color: #D1AAC1;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: repeating-linear-gradient(-45deg, #FFF8FC, #FFF8FC 3px,#FFE6F5 3px, #FFE6F5 7px);
}

 

 

5. Heart Icon

This is my current heading style for h2 🙂

h2{
position: relative;
padding-left: 1em;
border-bottom: dashed 2px #f99;
}
h2:before,h2:after{
position: absolute;
background: #f99;
content: “”;
border-radius: 50% 50% 50% 0;
left: 0;
top: 0.25em;
width: 10px;
height: 15px;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

h2:after {
left: 4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

Check out WordPress themes on Creative Market:

Powered by Creative Market

Related Posts:

HOW TO START A BLOG IN 15 MINUTES: QUICK AND EASY WORDPRESS BLOG

Please follow and like us:

Related Post



Leave a Reply

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