One moment, we're cooking some code examples

   
Header image

Styling Headings

Ways you can style a heading

How to style headings

Learn how to style headings. Using different fonts, colours, gradients, borders and many more different ways to style your header!

Heading Lowercase

CSS

h1 {
 text-transform: lowercase;
}

Heading Uppercase

CSS

h1 {
 text-transform: uppercase;
}

Heading Spacing

CSS

h1 {
 letter-spacing: 0.3em;
}

Heading Shadow

CSS

h1 {
 text-shadow: 2px 2px #ccc;
}

Heading Color

CSS

h1 {
 color: red;
}

Heading Gradiant

CSS

h1 {
  background: -webkit-linear-gradient(180deg, #FC0320, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display:inline-block;
  padding: 0 0 10px;
}

Heading Multicolor

CSS

h1 {
 span{
  color: lightblue;
 }
}

Heading Bold

CSS

h1 {
 font-weight: bolder;
}

Heading Light

CSS

h1 {
 span{
  font-weight: lighter;
 }
}

Heading Border

CSS

h1 {
 padding: 3px;
 border: 2px solid #141414;
 display:inline-block;
}

Heading SubTitle

And the story of...

CSS

div.HeadingSubTitle{
  display:inline-block;
  p{
    font-size: 1em;
    text-align: center;
  }
}