Learning Report 7

For my learning report this week I wanted to learn how to do more with my links in my navigation bar. I was beginning to get bored with how my links were before and I thought that if my links were boring other visitors may be thinking the same. As you can see, there is what appears to be a box around the link and as you hover over the link a different color will be displayed. This was actually easier than I thought to do. I was mainly looking up how to add more spacing between the links but after doing my research I found out how simple it is to do more than this.

I implemented the following css code in my navigation bar to give it the effects that it has now:

#navigation ul li a { 

	text-decoration:none; 
 
	margin: 4px; 

	padding: 5px 20px 5px 20px; color: blue; 

	background: #C96; 

}

The above code is what puts a different color of box around the links using the padding attribute. Also, the margin attribute is what sets the spacing between each link.

#navigation ul li a:hover { 

	color: purple; 

	background: yellow; 

}

With the code above gives the hover effect is implemented as you can see with the word hover. As you hover over the links it changes to the color yellow. This is done with the background attribute. Also, you can see that when the background color for the link changes to yellow, the text color change to purple. This is because of the color attribute which is applied to those links.