Various HTML Heading Styles

Written by @kerixa 1 March 2021

HTML headings are very important. As a title or important tex, they are representative of some parts of your website.So, it is better to avoid simple headings and add some styles to the, In the following code, we have shown how headings can be stylish.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
/* ------------------- */
/* TEMPLATE        -- */
/* ----------------- */

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);


body {
    height: 100%;

    background-color: #333;
    color: whitesmoke;
    font-size: 16px;
    font-family: 'Lato';
}

h1 {
    font-size: 32px;
    margin-bottom: 50px;
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 18px;
}

p {
    margin: 15px 0;
    line-height: 24px;
    color: gainsboro;
}

a {
    color: dodgerblue;
    text-decoration: none;
    border-bottom: 1px dotted;
}

    a:hover {
        color: tomato;
    }

.container {
    max-width: 350px;
    height: 100%;
    margin: 0 auto;
   
    text-align: center;
}

/* ------------------- */
/* PEN STYLES      -- */
/* ----------------- */

/* ----------------- */

/* ----------------- */
/* Second */
h1.second {
    font-weight: 200;
}

    h1.second span {
        position: relative;
        display: inline-block;
        padding: 5px 10px;
        border-radius: 10px;
        border-bottom: 1px solid mediumseagreen;
    }

        h1.second span:after {
            content: '';
            position: absolute;
            bottom: calc(-100% - 1px);
            margin-left: -10px;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            border-top: 1px solid mediumseagreen;
        }

/* ----------------- */
/* Third */

h1.third span {
    display: inline;
    background-image: linear-gradient(to right, firebrick, darkorange);
    background-size: 100% 15%;
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* ----------------- */
/* Fourth */

h1.fourth {
    font-weight: 700;
}

    h1.fourth span {
        border-bottom: 1px solid transparent;
        transition: all 0.2s ease;
    }

    h1.fourth:hover span {
        border-bottom: 1px solid whitesmoke;
    }

    h1.fourth span:first-child {
        font-weight: 300;
    }

/* ----------------- */
/* Fifth */

h1.fifth {
    font-weight: 400;
    text-shadow: 3px 3px 0 dodgerblue;
    transition: all 0.2s ease;
}

    h1.fifth:hover {
        text-shadow: 0 0 0 dodgerblue;
    }

/* ----------------- */
/* Sixth */

h1.sixth {
    position: relative;
}

    h1.sixth:before,
    h1.sixth:after {
        content: '[';
        display: inline-block;
        position: relative;
        top: 1px;
        height: 100%;
        font-size: 1.25em;
        color: tomato;
        transition: all 0.5s ease;
    }

    h1.sixth:after {
        content: ']';
    }

    h1.sixth:hover:before {
        transform: translateX(-5px);
    }

    h1.sixth:hover:after {
        transform: translateX(5px);
    }
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="container">
	
	<h1 class="second"><span>Lalochezia Oculoplania Gowpen</span></h1>
	<h1 class="third"><span>Gossypiboma Wanweird<br>Ulotrichous Scacchic</span></h1>
	<h1 class="fourth"><span>Xylopolist</span><span>Sabrage</span></h1>
	<h1 class="fifth">Quidnunc Kyphorrhinos</h1>
	<h1 class="sixth">Gambrinous</h1>
</div>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300