In this blog post, we will explore a technique to create SEO friendly headlines using CSS. By replacing default headlines with CSS headlines, you can achieve a visually appealing text layout without being limited to using only real headlines like H1 and H2. With CSS classes, you have the flexibility to strategically choose where to use real headlines and where to utilize CSS friendly headlines.

In the accompanying video tutorial, you will learn step-by-step how to implement this technique. This tutorial will guide you through the process of replacing default headlines with CSS headlines, allowing you to optimize your website’s readability and aesthetics.

Keep both design and SEO 

By following this approach, you can enhance your website’s design while maintaining a strong SEO foundation. Creating visually appealing headlines with CSS provides you with the freedom to express your creativity and effectively communicate your content’s hierarchy.

Watch the video tutorial, and let’s dive into the exciting world of writing SEO friendly headlines with CSS!

Free CSS code for SEO-Friendly headline

If you’re using the Flatsome theme for your website, we’ve got you covered! We have included a free CSS code snippet that you can easily insert into your own Flatsome website. Grab the free CSS code snippet below and start writing SEO-friendly headlines with CSS on your Flatsome website!

Copy + Paste CSS

/* ==================================================
    CUSTOM HEADLINES - by sebdelaweb.com
==================================================== */
.h1, .h2, .h3, .h4 {
    font-family: 'Lato', Helvetica, sans-serif !important; /* Change font family */
    font-weight: 700; /* Change font weight */
    color: #555; /* Change font color */
    text-rendering: optimizeSpeed;
    width: 100%;
    margin-top: 0;
    margin-bottom: .5em;
}
.h1 {
	font-size: 1.7em;
}
.h2 {
	font-size: 1.6em;
}
.h3 {
	font-size: 1.25em;
}
.h4 {
	font-size: 1.125em;
}
@media(max-width:549px){ /* Mobile font size */
    .h1{
        font-size:1.2em
    }
    .h2{
        font-size:1.2em
    }
    .h3{
        font-size:1em
    }
   .h4{
        font-size:0.9em
    }
}
.collapse p, .collapse h1, .collapse h2, .collapse h3, .collapse h4 {
    margin-bottom:0px; /* Force remove margin */
}