FullStackCamp | Lesson 7: Styling Links, Lists, and Tables

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

Table of Contents

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

Example:

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

Example:

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

Example:

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

Create an HTML file with links, lists, and tables.
In a separate CSS file, style the links using the different pseudo-classes and properties.
Style the lists using list-style-type, list-style-image, and list-style-position.
Style the tables using border, border-collapse, padding, text-align, vertical-align, width, and height.
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.