5 Examples to Style Headings With CSS

Nowdays heading tags are one of the important factors that effects the ranking of a website in search engines. You need to give lower heading tag as per the importance of sentence or keyword. To make it look good we need to style headings with css. It provides search engine a better structured webpage, where it can concentrate on more important keywords. Same goes for your readers, now a days search engines are trying to work like human. As real human readers give more importance to bold, italic, underlined and bigger text, search engines are doing the same. So to style headings with CSS tag, today i come up with some examples, try them all

Style 1

h2 {
font-family: 'Patua One',Arial;
font-weight: normal;
font-size: 24px;
line-height: 32px;
color: #333;
border-top: 0px dotted #CDE0F5;
border-bottom: 3px dotted #CDE0F5;
padding: 3px;

Style 2

h2 {
font-family: 'Ubuntu Condensed',sans-serif;
font-size: 26px;
font-weight: bold;
margin: .7em 0 .8em;
letter-spacing: -0.02em;
border: 1px solid #6CC;
background-position: 7px 50%;
text-align: left;
padding: 10px 10px 15px 15px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
position: relative;
-webkit-box-shadow: 2px 2px 10px 2px silver;
-moz-box-shadow: 2px 2px 10px 2px silver;
h1, h2, h3, h4, h5, h6 {
font-family: "Segoe UI",Helvetica,Sans-serif;
font-weight: 700;

Style 3

.h2 {
font-size: 28px;
font-weight: normal;
line-height: 120%;
font-family: 'Open Sans Condensed',helvetica neue, helvetica, arial;
line-height: 119%;

Style 4

.h2 {
color: #555;
font-size: 30px;
font-weight: normal;
font-family: "Helvetica Neue",Arial,sans-serif;
font-weight: bold;
font-size: 2em;
font-weight: bold;

Style 5

h2 {
font-family: 'BreeSerifRegular', Arial, sans-serif;
font-size: 36px;
line-height: 44px;
border-bottom: 4px solid #EEE;
padding-bottom: 5px;
margin: 10px 0;

I hope you will like them. I am using Style 5 on this blog. Share you style in comments :)

Pencil drawing online course - Download here

Join 40,000+ readers and get free notes in your email


Post a Comment