Customized Links

This section will show you how to edit the links for your layout. I own this tutorial. Please let me know if this has helped you or if you need help.


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



Font Family - This is your desired link 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 link text size to around 12px (12 pixels).

Color - This is your desired font color for the link. 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.

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

Display - This is where you decide how on the link formation e.g do you want them in a list style (if so display: block; is your code) or do you want them in-line with each other (if so display: inline-block; is your code).

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

Padding - This is similar to the margin code, except this code expands from the inside of the selected area. I usually have a padding set to 3px (3 pixels) just so my text has a gap from the edges, this makes it look neater.

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

Background Color - This allows you to customize the background color to match your layout, this code is optional and if you want it to have no background color then either leave it blank or delete it. For those who want a background color 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.