Project One: Useful code and tips

Just a recap of some useful tips and bits of code I have come across the past couple of weeks.

Styling your links and lists (useful for menu and sidebar links):

list-style-type: none;  (this gets rid of  the bullet points in your list)

Your links can be in different states as followed:
a:link; - this is the physical link as it first appears on the webpage.
a:visited; - This is how the link will appear once it has been visited.
a:hover; - This is the how the link will appear when you hover over it.
a:active; - This is how the link will appear while it is in use.

Underneath each of these commands you can style them by using the following code:
text-decoration: none; (gets rid of the underlining on the link).
color:#8D9195;  (changes the colour that the link will be).
background-color:#8D9195; (specifies the background colour of the link).

When setting the style for several link states, there are some rules to remember:
a:hover MUST come after a:link and a.visited.
a:active MUST come after a:hover.

Background-repeat property:

The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally. The following code can be used:
background-repeat: repeat-x; (the background will only be repeated horizontally).
background-repeat: repeat-y; (the background will only be repeated vertically).
background-repeat: no-repeat; (the background image will not be repeated).


I found that I had to use the background-repeat: no-repeat; in my redesign for the Evoke website because the main image on the home page kept repeating when i didn't want it to. 


Margins vs Padding:

Margins and Padding is something I keep getting confused. Here is a diagram to help explain the difference between the two.

This diagram is also known as the CSS Box Model.  The Box Model allows us to add a border around elements and to define space between elements. The 'content' is where text and images appear. The 'padding' clears an area around the content and is transparent. The 'border' is what gores around the 'padding' and 'content' and the 'margin' is what clears an area outside the border and is transparent also. 

For further explanation on the above tips you can go to these links:
http://www.w3schools.com/css/css_link.asp
http://www.yourhtmlsource.com/stylesheets/csstext.html
http://www.w3schools.com/cssref/pr_background-repeat.asp
http://www.w3schools.com/css/css_boxmodel.asp