Lesson 7: Styling Links, Lists, and Tables

In this lesson, we will explore the techniques for styling links, lists, and tables in HTML/CSS.

Styling links

Links can be styled using the following CSS properties:

  • color: Sets the color of the link text
  • text-decoration: Sets the decoration applied to the link text, such as underline, line-through, or none
  • font-weight: Sets the weight (thickness) of the link text

Additionally, there are several link states that you can target using pseudo-classes:

  • :link: Unvisited link
  • :visited: Visited link
  • :hover: Link when the mouse pointer is over it
  • :active: Link when it is being clicked


a:link {
  color: blue;
  text-decoration: none;

a:visited {
  color: purple;

a:hover {
  color: red;
  text-decoration: underline;

a:active {
  color: green;

Styling lists

Lists can be styled using the following CSS properties:

  • list-style-type: Sets the type of bullet point or numbering for a list, such as disc, circle, square, decimal, or none
  • list-style-image: Sets an image as the bullet point for a list
  • list-style-position: Sets the position of the list marker, either inside or outside the list item


ul {
  list-style-type: square;

ol {
  list-style-type: decimal-leading-zero;

.custom-list {
  list-style-image: url('bullet-image.png');

Styling tables

Tables can be styled using the following CSS properties:

  • border: Sets the border width, style, and color on all four sides of the table or table cells
  • border-collapse: Determines whether borders should be collapsed into a single border or not
  • padding: Sets the padding inside table cells
  • text-align and vertical-align: Sets the horizontal and vertical alignment of content inside table cells
  • width and height: Sets the width and height of the table or table cells


table {
  border-collapse: collapse;
  width: 100%;

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
  vertical-align: top;

th {
  background-color: #f2f2f2;
  font-weight: bold;

Actionable Work

  1. Create an HTML file with links, lists, and tables.
  2. In a separate CSS file, style the links using the different pseudo-classes and properties.
  3. Style the lists using list-style-type, list-style-image, and list-style-position.
  4. Style the tables using border, border-collapse, padding, text-align, vertical-align, width, and height.
  5. Link your CSS file to your HTML file and preview your work in a web browser to see the effects of your styling on links, lists, and tables.