CSS Links and Lists

CSS allows you to override the default styles added by browsers to the links in HTML. It helps you to make your links become attractive and prominent too. Links can be styled using the text formatting CSS properties as well as the CSS font properties.

a{
  color: #fff;
  background: #222;
  padding: 5px 15px;
  text-decoration: none;
}

Links can also be styled depending on their state like unvisted link, visited link, style on hover, style on focus or style on the active state.

a:link - an unvisited link
a:visited - a visited link
a:hover - a link on mouse over it
a:active / a:focus - a link the moment it is clicked

a:link {
  color: #fff;
  background: #222;
  padding: 5px 15px;
  text-decoration: none;
}
a:visited {
  color: #f00;
  background: #fff;
  padding: 5px 15px;
  text-decoration: none;
}
a:hover {
  color: #069;
  background: #ccc;
  padding: 5px 15px;
  text-decoration: none;
}
a:active {
  color: #fff;
  background: #096;
  padding: 5px 15px;
  text-decoration: none;
}
a:focus{
  color: #fff;
  background: #222;
  padding: 5px 15px;
  text-decoration: none;
}

To make all the style properties work properly in a web page, you need to follow an order. Style for link on active or focus state must be written after hover styles while the hover style itself must be written after the unvisted and visited styles are added to CSS.

Styling Links as Buttons

You can display HTML links as buttons in web pages to make them more prominent and visually appealing. Here's an example on how you can style links as buttons using CSS.

Button

<a href="#" class="mybutton">Button</a>

<style>
.mybutton{
  background: #096;
  color: #fff;
  padding: 5px 15px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #4cae4c;
} 
.mybutton:hover, .mybutton:focus{
  background: #4cae4c;
  color: #fff;
  padding: 5px 15px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #096;
  box-shadow: 2px 2px 3px #333;
}  
</style>

CSS Lists

You can also use CSS to style HTML Lists. Lists can be styled as web page navigation items which you will learn later. In this lesson, you will learn to make the HTML lists look visually appealing by changing the list item types, removing default stylings as well as adding text formatting and font properties.

Different List Item Markers

You can change the list item marker from HTML lists <ul> or <ol> using CSS property list-item-type.

ul{ list-style-type: circle; } ol li{ list-style: lower-alpha; }

Add Image as List Item Marker

You can also add image as list item marker using CSS instead of the list item markers HTML allows you to add.

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

Position The List Item Markers

The list item markers are positioned outside of the defined list item width by default which can be changed using list-item-position property.

ul{
  list-style-position: inside;
}

Remove Default Settings for List Items

The HTML lists have default padding on the left i.e. padding-left: 40px as well as a default list item marker. You can use CSS and remove those default stylings.

ul {
  list-style-type: none;
  padding: 0;
}

Styling HTML Lists with CSS

You can use CSS to make the HTML lists more appealing visually. Any CSS properties added to the parent list tag will affect the entire list while any properties added to the list item li affects the list items only. Moreover, you will need to style the link items (if any) separately as browsers style them separately.

<ul class="myul">
  <li><a href="#">List Item 1</a></li>
  <li><a href="#">List Item 2</a></li>
  <li><a href="#">List Item 3</a></li>
  <li><a href="#">List Item 4</a></li>
  <li><a href="#">List Item 5</a></li>
</ul>

<style>
ul{
  padding: 10px;
  list-style-type: none;
}
ul li a{
  color: #fff;
  background: #333;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  margin-bottom: 5px;
}
ul li a:hover, ul li a:focus{
  background: #fff;
  color: #333;
}
</style>

0 Like 0 Dislike 0 Comment Share Tweet