Good looking heading styles for websites using CSS

612

Here is the simple tutorial that helps to insert good looking headings or the sub-headings to your website or blog using CSS. Instead of modifying the default header tags, I am going to create custom CSS styles that can be called, using class selectors inside the html div tags. This CSS can be added along with your CSS style or the custom CSS style or can be separately linked as an external style sheet. After applying these styles, the headings that use this CSS class look like,

Custom heading Styles
Custom Heading Styles
Adding the CSS

Copy the following CSS and paste it to your stylesheet. If you are using Blogger platform for blogging, this CSS can be added very easily by following the tutorial: Adding Custom CSS to Blogger Blog. If you want to link it as an external stylesheet, using Google Drive to host CSS and Javascript may help you. If your blog is powered by WordPress you can easily add it to the Custom CSS.

.gctheading {
    display: inline-block;
    margin: 10px 1px;
    min-width: 150px;
    padding: 5px 15px;
    font-weight: 600;
    text-align: justify;
    -moz-box-shadow: -4px 0 0 0 #000;
    -webkit-box-shadow: -4px 0 0 0 #000;
    box-shadow: -4px 0 0 0 #000;
}
.gctheader_orange {
    background-color: #FF6200;
    color: #fff;
}
.gctheader_blue {
    background-color: #0942FF;
    color: #fff;
}
.gctheader_green {
    background-color: #028B02;
    color: #fff;
}
.gctheader_black {
    background-color: #000;
    color: #fff;
}
.gctheader_red {
    background-color: #CB021A;
    color: #fff;
}
.gctheader_brown{
    background-color: #CE2301;
    color: #fff;
}
Usage

Whenever needed, You can use it by calling the CSS class in a div tag as given below.

<div class="gctheading gctheading_orange">Orange Heading Style</div>
<div class="gctheading gctheading_blue">Blue Heading Style</div>
<div class="gctheading gctheading_green">Green Heading Style</div>
<div class="gctheading gctheading_pink">Pink Heading Style</div>
<div class="gctheading gctheading_red">Red Heading Style</div>
<div class="gctheading gctheading_brown">Brown Heading Style</div>

Heading Styles – Live Demo

The following headings are rendered using the same CSS styles.

Orange Heading Style
Blue Heading Style
Green Heading Style
Pink Heading Style
Red Heading Style
Brown Heading Style
Quick Tips
  • Instead of adding this to the custom CSS, you can directly modify the default header tags. For example, if you want the <h2> tag to display the same styling use the code as given below
.h2 {
    display: inline-block;
    margin: 10px 1px;
    min-width: 150px;
    padding: 5px 15px;
    font-weight: 600;
    text-align: justify;
    -moz-box-shadow: -4px 0 0 0 #000;
    -webkit-box-shadow: -4px 0 0 0 #000;
    box-shadow: -4px 0 0 0 #000;
}

For different colors in the headings use gtcheading_orange, gctheading_blue, etc., as

<h2 class="gctheading_orange">Orange Heading Style</h2>
  • Play with the hex Colors used in the above CSS code and get the output according to your website’s color profile.
You have now added custom heading styles to your Website. Leave your valuable suggestions and feedback in the comment box below. Subscribe to our Newsletter for getting the future updates directly in your inbox.
Free Email Updates !
Join the visitors who are receiving our newsletter and receive the Daily Mass Readings, Prayers and other updates directly in your inbox.
We respect your privacy and take protecting it seriously.