CSS Headings

This tutorial is about CSS headings and how to use them. When making layouts, you almost always have headings. They are used as titles or to emphasize something. For example, if you look to the top of this tutorial, it says CSS Headings. Right now I'm using a heading to make the title. So, the html code to use them is:



There are six ranges of headings. They go from 1-6. All you would need to do is replace the 1 with another number and the heading size would get smaller. Like so:



They would look like this:



So now I will be showing you how to make these plain headings more interesting. How to add a background, change the first letter to something different, change the font and etc..

To change the headings to your liking, you would need to put this code in your CSS.



So, the font means changing the font of the heading. The size of the font comes first, then the font face and then the style. You can leave the italics out if you want or you could change it to some other styling. Next is the color of the heading that you want it to be. Just change it to whatever colour of your liking.

To add a background you add this,



So, you would change the url to the url of your heading background and you would put the height and width of the background image into the width and height part. If you don't do this it may mess up the heading and it not work.

To change the first letter of the heading you would need to add another piece of CSS along with the original heading CSS.



So it would look like this:



Okay, so now, if you want you could also change the spacing between the letters in the heading. You would need to put this in,



You can also change the text alignment of the heading. It could start from the right side, the left side or from the center.



Another thing you can do is add a border around the heading. Like so,



If you just want one side of the border, two sides of the border or three sides to show you can add the following. You can make up combinations of whatever you want.



You'll notice that the borders would be a solid line, you can also change that line to dashed line or to a dotted one. Just replace solid to dashed or dotted.

So that's what you can pretty much do to headings. There's some other stuff but you'll have to figure that out. =P Hopefully this has helped you out.


Last Modified: 08/25/08.

&etc

{ back } { refresh } { forward }
Content and layout copyright © Stephanie of Winter Days. Resources copyright © to the respective owners. No copyright infringement intended.
Affiliates: { Bittersweeted } { Eternal Masque } { Guardian Dreams } { KristinX } { Sayarynth } { Serene Anime } { Apply? }
Being reviewed by: { Oh Lovely }