CSS Lists and Text Decoration

Hello friends 👋 welcome back. In the last tutorial, we explored CSS backgrounds and learned how to use colors, images, and gradients to make our pages stand out. Today, we are going to style something we often use in web design, lists and text decoration.

Styling Lists in CSS

HTML gives us two main types of lists, unordered lists <ul> and ordered lists <ol>. By default, unordered lists show bullets, and ordered lists show numbers. With CSS, you can customize these lists to look more attractive.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Lists</title>
  <style>
    ul {
      list-style-type: square;
      color: darkblue;
    }
    ol {
      list-style-type: upper-roman;
      color: green;
    }
  </style>
</head>
<body>
  <h1>My Favorite Fruits</h1>
  <ul>
    <li>Mango</li>
    <li>Apple</li>
    <li>Banana</li>
  </ul>
  <h1>Steps to Make Tea</h1>
  <ol>
    <li>Boil water</li>
    <li>Add tea leaves</li>
    <li>Add sugar and milk</li>
  </ol>
</body>
</html>

In this example, the unordered list uses square bullets, and the ordered list uses Roman numerals.

Other values for list-style-type include, disc, circle, decimal, lower-alpha, upper-alpha, lower-roman, and none (to remove bullets or numbers).

You can also use images as list markers with list-style-image:

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

This will replace the bullets with your own image.

Text Decoration

Text decoration controls extra styling for text, such as underlines, lines through text, and overlines.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Text Decoration</title>
  <style>
    h1 {
      text-decoration: underline;
    }
    p {
      text-decoration: overline;
    }
    span {
      text-decoration: line-through;
      color: red;
    }
    a {
      text-decoration: none;
      color: purple;
    }
  </style>
</head>
<body>
  <h1>This heading is underlined</h1>
  <p>This paragraph has a line over it</p>
  <p>This is <span>crossed out text</span> using line-through</p>
  <p>Here is a <a href="#">link without an underline</a></p>
</body>
</html>

Common values for text-decoration are underline, overline, line-through, and none.

Try It Yourself

Create a file called lists.html. Inside it, write one unordered list and one ordered list. Use CSS to change the bullet styles and number styles. Then add some paragraphs and try different text decorations. Experiment with combining colors, fonts, and text-decoration to see how creative you can get.

Awesome work 🎉 You just learned how to style lists and decorate text with CSS. In the next tutorial, we will move on to CSS Fonts and Google Fonts, where we will explore how to use custom fonts to make your website look modern and unique. 🚀