Wednesday, August 5, 2020
Home Web Designing Good looking heading styles for websites using CSS

Good looking heading styles for websites using CSS

Must Read

An overview on top 3 File Converters to convert your files free

It’s time to learn some best tools which are helpful to act as a file converter for...

How to install WordPress manually on a web server

Almost all the hosting providers have their own way of delivering WordPress to their users. They call it one-click-installation...

How to install WordPress on WAMP server

WampServer or simply WAMP is a Windows web development environment. It is a local server package for Windows, allowing...
Pradeep Augustine
Pradeep Augustinehttps://www.catholicgallery.org
Pradeep Augustine is the founder of Get Cool Tricks. He is a passionate Writer, An Artist, a computer geek and a part-time Blogger who loves to write a lot of technical Contents related to blogging, Windows, Softwares, Android Development and other cool tricks and tutorials in his free time. Stay connected with him on his social profiles.

Here is the simple tutorial that helps you to insert good professional 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 to an external style sheet. After applying these styles, the headings that use this CSS class look likes the heading shown in the following image.

Custom heading Styles
Custom Heading Styles

Adding the CSS

Copy the following CSS and paste it into 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. To link it to 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>

 

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.

Other People are reading

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 to your inbox.

Related Articles

Pradeep Augustine
Pradeep Augustinehttps://www.catholicgallery.org
Pradeep Augustine is the founder of Get Cool Tricks. He is a passionate Writer, An Artist, a computer geek and a part-time Blogger who loves to write a lot of technical Contents related to blogging, Windows, Softwares, Android Development and other cool tricks and tutorials in his free time. Stay connected with him on his social profiles.
guest
0 Comments
Inline Feedbacks
View all comments

More Articles Like This