HTML

Styling Links and Lists

updated on

Programmingempire

In this article, I will explain Styling Links and Lists. In fact, we can use various CSS properties to style hyperlinks. Hence, we can use font, font-style, font-size, color, background-color, and so on for hyperlinks. The following example demonstrates how to style links on a web page.

Examples of Styling Links and Lists

<html>
 <head>
   <title>Styling Links</title>
   <style>
     body{
	margin: 10px;
	padding: 20px;
	text-align: center;
     }
     .link{
	border: 5px solid #aaff11;
	margin: 30px;
        padding: 20px;
	background: #ffaadd;
        color: #1199aa;
        font-family: 'Comic sans MS', monospace;
        font-size: 20px;
        font-weight: bolder;
     }
   </style>
 </head>
 <body>
    <h1>Examples of Styling Links</h1><br/><br/>
    <a class="link" href="https://www.google.co.in/" target="_blank">Google</a>
 </body>
</html>

Output

Styling Links
Styling Links

Apart from these properties, we can style links on the basis of their state. Hence, we can style links for these states – hover, visited, link, and active. Accordingly, we can use a:link, a:visited, a:active, and a:hover in the stylesheet. Moreover, the styles should be in this order only – a:link, a:visited, a:hover, a:active. The following example demonstrates how to style different link states.

<html>
 <head>
   <title>Styling Links</title>
   <style>
     body{
	margin: 10px;
	padding: 20px;
	text-align: center;
     }
     a:link{
	border: 5px solid #aaff11;
	margin: 30px;
        padding: 20px;
	background: #ffaadd;
        color: #1199aa;
        font-family: 'Comic sans MS', monospace;
        font-size: 20px;
        font-weight: bolder;
     }
     a:visited{
	border: 3px dashed #11ffaa;
	margin: 30px;
        padding: 20px;
	background: #113311;
        color: #ff99aa;
        font-family: 'Forte', monospace;
        font-size: 10px;
        font-weight: lighter;
     }
     a:hover{
	border: none;
        outline: none;
	margin: 30px;
        padding: 20px;
	background: #334422;
        color: #ff99aa;
        font-family: 'aerial', monospace;
        font-size: 25px;
        font-weight: bold;
     }
     a:active{
	border: 15px inset #ddaa99;
	margin: 30px;
        padding: 20px;
	background: #112233;
        color: #bbcc11;
        font-family: 'Comic sans MS', monospace;
        font-size: 10px;
        font-weight: bolder;
     }
   </style>
 </head>
 <body>
    <h1>Examples of Styling Links</h1><br/><br/>
    <a class="link" href="https://www.google.co.in/" target="_blank">Google</a><br/><br/><br/><br/><br/>
    <a class="link" href="newslink.html" target="_blank">News Link</a>
 </body>
</html>

Output

Styling Links - a:visited and a:link
Styling Links – a:visited and a:link

The above output shows that the first link is the visited link. While the second link is not yet visited. Hence, it is styled using a:link. The following output demonstrates a:hover.

Styling Links - a:hover
Styling Links – a:hover

Similarly, the following out shows a:active.

Styling Links – a:active

Meanwhile, we can also provide the common styles to a specific state for all links in the document. In order to do this, we use the attributes of body tag. These attributes are link, alink, and vlink. Further, they represent links, active links, and visited links respectively. The following example demonstrates the attributes of body tag.

<html>
<head>
  <title>Links</title>
</head>
<body link="#aabb22" alink="#bb22aa" vlink="#221111">
  <a href="http://google.com">Google</a><br/>
  <a href="http://ipu.ac.in">IPU</a><br/>
  <a href="http://mysite.com">Home Page</a><br/>

  <a href="links.html">Link</a><br/>
  <a href="links1.html">Links1</a><br/>
</body>

</html>

Styling Lists

In order to apply the styles on ordered and unordered lists, we can use the following properties.

  1. list-style-type. Basically this property sets the type of bullets for the unordered list. In case of ordered list we can change the type of numbering. For instance, this property takes the values decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, upper-greek, decimal-leading-zero, and so on. For orordered list, this property takes three values – circle, disc, and square. Moreover, we can removing an existing style by setting the value of list-style-type to none.
  2. list-style-image. We use this property to set an image as the bullet.
  3. list-style-position specifies whether the bullets will be inside the list items or outside. Accordingly, it takes two values – inside, and outside.
  4. list-style. This property includes the above three properties. Hence we can specify the style, image, and position using a single list-style property.
<html>
  <head>
    <title>List Properties Example</title>
    <style>
      ul{
          list-style-position: inside;
          list-style-image: url('bullet1.jfif');
       }
      ol{
          list-style-position: outside;
          list-style-type: lower-alpha;
       }
    </style>
  </head>
  <body>
    <h1>Courses in Institute</h1>
    <ul>
      <li>AI and Machine Learning</li>
      <li>Deep Learning</li>
      <li>Python Programing</li>
      <li>MEAN Stack</li>
      <li>Spring and JSP</li>
      <li>PHP Programming</li>
      <li>Web Development</li>
    </ul>
    <h1>Committees in Institute</h1>
    <ol>
      <li>Sports Committee</li>
      <li>Debating Committee</li>
      <li>Environment Committee</li>
      <li>Cultural Committee</li>
    </ol>
  </body>
</html>

Output

Styling Lists
Styling Lists

Further Reading

HTML Practice Exercise

Example of Column Properties in CSS

CSS Box Model

Examples of Outline Properties in CSS

Styling Links and Lists

You may also like...
HTML

Examples of Display and Position Properties in CSS
HTML

Examples of Formatting Tags in HTML
HTML

HTML Examples for Beginners