Headers

This section will show you how to edit the headers for your layout. I own full rights to this tutorial. Let me know if it's helped you or if you require assistance.


Below is the headers coding I use, I'll explain what each code means and what it's purpose is.



Margin - This is the gap around your header, this will separate your regular text from your header so they're not close together. If they're to close then the layout just doesn't look right so I always set my margin to around 2px (2 pixels).

Font Family - This is your desired header font. Most common fonts include Arial, Verdana, Times New Roman, Courier New and Georgia.

Font Size - This is your desired font size. On most of my layouts I'll set the header text size to around 18px (18 pixels).

Colour - This is your desired font colour for the header. You can use any 6 digit colour code for this bit. The hex code remember is a mixture of numbers and letters e.g. #b52bad.

Letter Spacing - This is the spacing between the letters. A positive number pulls them further apart where as a negative number will push them closer together. 3 (positive number // -3 (negative number).

Font Weight - This is usually done in percentage or sometimes you can just write bold in this section. However, I always set it to 0 because it's personal preference.

Text Align - This is the alignment of your text. E.g. left, right or centered.

Text Transform - This defines whether your text is all in UPPERCASE, lowercase or Capitalized.

Font Style - This speaks for itself, it's basically the font style e.g. italic.

Background Colour - This allows you to customize the background colour to match your layout, this code is optional and if you want it to have no background colour then either leave it blank or delete it. For those who want a background colour you need to either type the name of the code e.g. background-color: black; or you can enter the 6 digit hex code e.g. background-color: #000000; (black).

}- This is a mandatory code. Without it, the entire style sheet could go wrong. You must make sure you put one at the end of every section of coding (all codes provided for this tutorial have them done for you, therefore this is only to be used as a future reference when you go solo on your first layout)

This section of the tutorial has now been covered. You may proceed to the next stage.