• Beginner's Guide
  • Python is free and easy to learn after reading this tutorial.

Wednesday, 24 October 2012

5 Examples to Style Headings With CSS

Last updated on 04:09 - by Ramandeep Singh - Tags :

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 :)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat volutpat nibh nec posuere. A die shopuf pogest concludi cum administrasset slushie intus calidum brioche.
Follow me @ramantoday
Subscribe to this Blog via Email :


Text Widget

Recent News

About Us

© 2014 DesignRapid. Designed by Ramandeep Singh
Powered by Blogger.
back to top