CSS LINKS AND LISTS PAGE 7

CSS LINKS AND LISTS

 CSS –LINKS


Links can be styled with any CSS property (e.g. color, 
font-family, background, etc.)  and links can be styled
 differently depending on what state they are in.
The four links states are:
1.	a:link - a normal, unvisited link
2.	a:visited - a link the user has visited
3.	a:hover - a link when the user mouses over it
4.	a:active - a link the moment it is clicked..

Text Decoration:
The text-decoration property is mostly used to remove 
underlines from links.
Example:20
Example: link.html
<html><head>
<style>
a:link {color:#FF0000;text-decoration:none; background-color:green;}    
a:visited {color:#00FF00; text-decoration:none;background-color:blue;} 
a:hover {color:#FF00FF;  text-decoration:underline;background-color:red;font-size:150%;font-fami ly:monospace;}   
a:active {color:#0000FF;text-decoration:underline;background-color:yellow;}  
</style></head>
<body>
<p><b><a href="d:\css\font.html" target="_blank">css-links</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS 
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body></html>



CSS-LISTS



Css List properties sets different list item markers and to ordered and unordered lists.also sets images as list item markers to lists.
Css-list properties:
1. list-style-type:  It Allows you to control the shape or appearance of the marker.
2.list-style-position:  It specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.
3. list-style-image:  It specifies an image for the marker rather than a bullet point or number.
4. list-style:  It serves as shorthand for the preceding properties.
5.marker-offset:  It specifies the distance between a marker and the text in the list.
Example:21     [csslist.html]
<html><head>
<style>
ul.a {list-style-type:square;}
ul.b {list-style-image:url('purple2.gif');
ol.c {list-style-type:lower-alpha;}
ol.d {list-style-type:upper-roman;}
</style></head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>jAVASCRIPT</li>
</ul>
<ul class="b">
 <li>HTML</li>
  <li>CSS</li>
  <li>jAVASCRIPT</li>

</ul>
<p>Example of ordered lists:</p>
<ol class="c">
 <li>HTML</li>
  <li>CSS</li>
  <li>jAVASCRIPT</li>
</ol>
<ol class="d">
 <li>HTML</li>
  <li>CSS</li>
  <li>jAVASCRIPT</li>
</ol>
</body></html>