link coding tutorial

Okay there are like sooo many ways to create links, but this is like a "general" outline of a link.
Coding is NOT easy when you're learning. If you're not willing to take your time to read and learn than you shouldn't be here because you're not ready to rip your hair out yet lmao.

The Steps

1. So copy and paste this in your style.css (KEEP IN MIND THIS IS LABELED AS AN AFFIE LINK. YOU NEED TO CHANGE WHERE IT SAYS AFFIE TO WHATEVER YOU WANT. For example - elite. Keep it the same if you're doing an affie link. This is empty inside because you are going to add stuff to it.

2. Place this coding inside of the coding you pasted. Choose your font and font size. Change the font and font size below to what you want
Some fonts: calibri, helvetica, arial, tahoma, georgia, verdana, courier-new.
You can also put it like font: 8px calibri;

3. Do you want a background color on your link?

Here is the coding for a background. Place this inside the coding you pasted if you want a background on your link. Change the #eee to the color you want
You can also use background-color: #ddd;

and here is the entire code so far incase I lost you.

4. You already chose your font and font size. Now you need to choose your font color. Change where it says #aaa to the color you want.

5. I'm gonna list some more coding you can add to your link styling. I'll explain each.

margin: 1px; This is the space OUTSIDE of your link. I usually choose 1 or 2px.

padding: 4px; This is the space INSIDE of you link. Change the size to whatever you want.

display: block; This will put your links on different lines (and more but I can't explain it for shit).

The link will span the entire distance of the area its in. For example: here it is spanning the entire size of my sidebar

****IMPORTANT**** You more than likely need to add a display: block; to your link, even if your link is going in a table. Once you put the link in a table, it will work itself out to fitting 2 (or 3) on each line. Look below for an example of it in a table:

This is what the coding looks like so far

A few more things you can add

text-transform: lowercase; This will make the text ALL lowercase. You can also make it uppercase.

letter-spacing: 1px;: This is the space in between each letter.

text-align: center; : this will center the text. You can also make it aligned to the left or the right.

You can also set a width and height for your links (change the size)! (be careful when using padding and a set height or width. sometimes it can make your shit crazy)

width: 60px;

height: 15px;

This is not even close to all of the things you can do with link coding, but hopefully you have a better understanding now. Don't be afraid to experiment.
I'm going to link you to some stuff that might help with coding (you should read and try these and other stuff! Experiment with coding, don't be afraid):

click here for tips on padding

click here for tips on margin

click here for tips on borders

the hover

Add this coding below your link coding if you want it to add something special for when people hover a link. Again, there's SO many things you can do for this! I put a border-left in there just as an example. Put whatever you want in there!

***IMPORTANT*** If you changed the title of the link (aka from affie to elite or whatever) than you need to CHANGE this where it says affie to whatever you named your link.

Here are some websites where you can find some cool ass hovers

#1 click here

#2 click here

linking your link

Copy and paste this coding where you're putting THE ACTUAL LINK. For example: on the header page if it's your affies or elites.

***IMPORTANT*** If you changed the title of the link (aka from affie to elite or whatever) than you need to CHANGE this where it says affie to whatever you named your link