CSS Links and Lists

Links

Link defines a hyperlink which create a link from one page to another page. It has four different states i.e. link, visited, active and hover, which can be styled differently using CSS pseudo classes of anchor element.

• a:link set the styles for a normal or unvisited links which has no mouse pointer over it.
• a:visited set the styles for a visited link which has no mouse pointer over it.
• a:hover set the styles for a link when the user mouses over it.
• a:active set the styles for a link which is in the process of being clicked.

We can specify or define any CSS property on these pseudo classes like color, font-family, background ...etc to redefine the default styles of the link.

										    
											a:link { /* Unvisited link */
											    color: red;
												text-decoration: none;
											}
											a:visited { /* Visited link */
											    color: pink;
											}
											a:hover { /* Mouse over link */
											    color: green;
												text-decoration: underline;
											}
											a:active { /* Active link */
											    color: blue;
											}
											
										

Lists

Lists are used to represents the list of information. There are three different types of list in HTML, which include ordered list, unordered list, and description list. The CSS list properties allow us to do following-

• It allow us to control the shape or appearance of the marker.
• It allow us to define an image for the marker instead of a bullet or number.
• It allow us to control the distance between a marker and the text in the list.
• It allow us to add background color to lists and list items.

Different List Item Markers:- We can defines the various type of list item marker by the CSS list-style-type property for ordered and unordered lists. Possible values for list-style-type properties are none, circle, square, upper-roman etc.

										    
											ul.list-1 {
												list-style-type: none;
											}
											ul.list-2 { /* Ordered lists */
											    list-style-type: circle;
											}
											ul.list-3 { /* Ordered lists */
											    list-style-type: square;
											}
											ol.list-4 { /* Unordered lists */
											    list-style-type: upper-roman;
											}
											ol.list-5 { /* Unordered lists */
											    list-style-type: lower-alpha;
											}
											
										

Add an Image as the List Item Marker:- We can define an image as the list item marker by the CSS list-style-image property.

										    
											ul {
												list-style-image: url('image.png');
											}
											
										

Position the List Item Markers:- We can define the position of the list item marker by the CSS list-style-position property.

										    
											ul.list-1 {
												list-style-position: outside;
											}
											ul.list-2 {
												list-style-position: inside;
											}
											
										

The List Style Shorthand Property:- We can specify all the list style properties in one single property, known as shorthand property (i.e. list-style). The order of the list style property values are:- list-style-type, list-style-position, list-style-image. If any of the property values above are missing, the default value will be inserted.

										    
											ul {
												list-style: square inside url("image.png");
											}