Index > CSS Tutorials > Custom CSS Header Tutorial

This tutorial will explain how to create a custom header using css for layouts. In order to do this you will need HTML to set up the header, and CSS to design it. So for the HTML we will use a premade header that is in HTML, the <h2></h2> tag. This tag is pretty ugly to begin with, but with CSS we can make it pretty! We will be using different properties in CSS to accomplish this (ie: font-weight, color, text-align).

The HTML

Here is the code you will be using. This created a header with the standard h2 format. We want to change that, and we will with CSS.

<h2>This is my header :D</h2>

So far this Looks like:

This is my header :D

The CSS: Color

It's pretty boring. So we'll have to add CSS to it in order to make it look purty! First, let's add some color. To do this we need to add the following code to the CSS of our page.

h2 {
color: #555555;
}
  • You can change the color to any hex value.

Here is how it will look now

This is my header :D

The CSS: Removing the bold

Now, I want to remove the bold property of the h2 tag. To do this I will add the following CSS.

font-weight: normal;
  • Other values for font-weight: bold, bolder, lighter, 100-900(100=normal, 700=bold).

So now in my CSS I have:

h2 {
color: #555555;
font-weight: normal;
}

This gives me

This is my header :D

The CSS: Bottom border

Now I want to give it a border on the bottom. To do this you add the following to the CSS:

border-bottom: 1px solid #555555;
  • You can do border-bottom, border-top, border-right, border-left, or just border. If you specify no side then the border will be on all the sides.
  • You can also use none, hidden, dotted, dashed, double, groove, ridge, inset, and outset as a property for the border(solid in my example). Try playing with the different ones to see which you like best!
  • You can also change the thickness of the border by changing 2px to any size width you want.
  • Last but not least, you can change the color to whatever hex value you want :D

Now overall I have:

h2 {
color: #555555;
font-weight: normal;
border-bottom: 2px solid #555555;
}

Giving me:

This is my header :D

The CSS: Alignment

And now I want it to be aligned to the right. Why? Because I want to :D So! Back to the CSs. This time I am adding:

text-align: right;
  • Other values for text-align: center, left, and justify.

Now overall I have:

h2 {
color: #555555;
font-weight: normal;
border-bottom: 2px solid #555555;
text-align: right;
}

Which results in:

This is my header :D

The CSS: Background color

I'm never content! Now I want a background color. to do this we use the property background-color.

background-color: #cfcfcf;
  • Other values for background-color: Any color.

So overall it is:

h2 {
color: #555555;
font-weight: normal;
border-bottom: 2px solid #555555;
text-align: right;
background-color: #cfcfcf;
}
This is my header :D

The CSS: Background image

More more! Now I want an image in the background. Now I use background-image for the css.

background-image: url(URLOFIMAGE);
  • Other values for background-image: URL to your image.

So overall it's now:

h2 {
color: #555555;
font-weight: normal;
border-bottom: 2px solid #555555;
text-align: right;
background-color: #cfcfcf;
background-image: url(URLOFIMAGE);
}
This is my header :D

The CSS: Background image with no repetition

But I only wanted it to repeat once! Good thing I know how to fix it.

background-repeat: no-repeat;
  • Other values for background-repeat: Repeat, repeat-x(horizontal repeat), and repeat-y(Vertical repeat).

So overall it's now:

h2 {
color: #555555;
font-weight: normal;
border-bottom: 2px solid #555555;
text-align: right;
background-color: #cfcfcf;
background-image: url(URLOFIMAGE);
background-repeat: no-repeat;
}
This is my header :D

The CSS: Background image positioning

Now I want it to be on the other side where my text is. Here's how I do that:

background-position: top right;
  • Other values for background-align: top left, top center, center left, center center, center right, bottom left, bottom center, bottom right.
  • You can also use x% y%(EX: 50% 40%) and xpos ypos(EX: 30px 50px;). The first value is the horizontal position, and the second is the vertical position.

So overall it's now:

h2 {
color: #555555;
font-weight: normal;
border-bottom: 2px solid #555555;
text-align: right;
background-color: #cfcfcf;
background-image: url(URLOFIMAGE);
background-repeat: no-repeat;
background-position: top right;
}
This is my header :D

The CSS: Font padding

Oh no! But I wanted the font to be next to the picture, not on it! I know just what to do! I'll use padding:

padding-right: 50px;
  • Other values for background-align: padding-top, padding-left, padding-bottom.
  • You can also use _px _px _px _px format. Each value corresponds with a side. The first is top, then right, then bottom, and lastly left. Basically it goes from the top to the left in a clockwise fashion. This way takes less coding if you want padding on all sides.

So overall it's now:

h2 {
color: #555555;
font-weight: normal;
border-bottom: 2px solid #555555;
text-align: right;
background-color: #cfcfcf;
background-image: url(URLOFIMAGE);
background-repeat: no-repeat;
background-position: top right;
padding-right: 50px;
}
This is my header :D

And that's it folks! <3 Hope it helped!

Sitemap | Copyright 2008 Demoria.net