Customizing Headers

HTML Tutorials

Tutorial

Click on thumbnailed images to enlarge

this applys also for learning how to make a stylesheet:]
Have you ever seen those headers and just went like "wooohhhh..." well heres how to make them


first lets start out by putting style tags

<style type=\"text/css\">


Now lets tell the CSS what to stylize


h1 {



}

your style is going to go in between the {





lets first start out by telling the CSS that I want the font to be Century gotic then simply add "font-family" tags


*//remember you must always add the semicolon at the end//*
h1 {font-family:century gothic;

}



lets set the color of the text to white:]

*//remember you must always add the semicolon at the end//*
h1 {font-family:century gothic; color:white;

}


now lets make a background for the text
* you may either put an image or color
to put and image put
background-image: url('URLHERE');

to put color put
background-color:COLOR OR HEX NUMBER;


I want to put color so here I go

*//remember you must always add the semicolon at the end//*
h1 {font-family:century gothic; color: white; background-color:#000000;

}


now lets pick a font size

*//remember you must always add the semicolon at the end//*
h1 {font-family:century gothic; color: white; background-color:#000000; font-size:18;

}
good but I want the letters to be less spaced so
add "letter-spacing" tags

*//remember you must always add the semicolon at the end//*
h1 {font-family:century gothic; color: white; background-color:#000000; font-size:18; letter-spacing:-1px;

}
however since this is a header, I want the text to be aligned to the center
add "text-align" tags

*//remember you must always add the semicolon at the end//*
h1 {font-family:century gothic; color: white; background-color:#000000; font-size:18; letter-spacing:-1px; text-align:center;

}

pretty easy right? hopefully people will learn this and stop stealing the stylesheets of designers:]

Tutorial Comments

Showing latest 10 of 16 comments

It really Helped for the biggners ^_^ thanks.

By Haineko on Jan 23, 2010 10:22 pm

it wasnt yours to be begin with.

By itsk4yl4duh on Apr 26, 2009 7:00 pm

it wasnt your code in the first place , so people dont really steal it.

By Lucyrebeccababes on Feb 15, 2009 4:26 pm

well you can't really "steal" coding. it wasnt' made by you afterall.

By xoChel on Jan 9, 2009 1:28 pm

awesome tutorial
thanks so much :D

By jacobjayrocks on Nov 28, 2008 12:36 am

Great tutorial [:

By dilligrout on Oct 28, 2008 3:21 am

thankyou this helps :]

By peypey2011 on Sep 14, 2008 10:40 am

Thanx I get it now

By OniTenshi on Sep 3, 2008 3:47 pm

woah! you made it simple to learn! xD THANKS!

By SnowMiyu on Sep 1, 2008 3:43 am

I agree with MissHygienic, do not attempt to claim origenator of this. Header codes have been around for decades, all you did was customize it with a CSS. I am a HTML/XML Web Graphic Design Artist.
Your perception of "a Designer" is misleading. If you were met by people who reacted that way toward you, either the reason is that you did not ask in the right or the person was short tempered.

I will say this though, your code was of use for many people.
Do not attempt to down-side people who design. If one may not assist you, then you must find another source.



-jonsito_salas@ yahoo.com

By Juan-Latin on Aug 30, 2008 3:31 am
View all »

Tutorial Details

Author synatribe View profile
Submitted on Apr 8, 2008
Page views 27,324
Favorites 88
Comments 16
Reviewer MissHygienic View profile
Approved on Apr 8, 2008