Style Lists with CSS Attributes

Introduction

In this lab, students will explore the art of styling lists using CSS, focusing on transforming the default appearance of ordered, unordered, and description lists. Participants will learn how to customize list markers through various CSS properties such as list-style-type, list-style-image, and list-style-position, enabling them to create visually appealing and unique list designs.

The lab guides learners through a step-by-step process of creating an HTML project with different list types and then applying CSS techniques to modify list styles. By the end of the lab, students will have practical experience in changing list marker types, replacing default markers with custom images, adjusting marker placement, and using the shorthand list-style property to efficiently style lists.

Set Up HTML Project and Create Basic List

In this step, you'll set up a basic HTML project and create your first list to prepare for exploring CSS list styling. We'll start by creating a simple project structure and an HTML file with different types of lists.

First, navigate to the project directory:

cd ~/project

Create a new directory for your CSS list styling project:

mkdir css-list-styling
cd css-list-styling

Now, create an HTML file named index.html using the WebIDE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
  </head>
  <body>
    <h1>My Favorite Programming Languages</h1>

    <h2>Ordered List (Numbered)</h2>
    <ol>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
    </ol>

    <h2>Unordered List (Bulleted)</h2>
    <ul>
      <li>Web Development</li>
      <li>Data Science</li>
      <li>Machine Learning</li>
      <li>Mobile Apps</li>
    </ul>

    <h2>Description List</h2>
    <dl>
      <dt>HTML</dt>
      <dd>Hypertext Markup Language for web structure</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets for web design</dd>
    </dl>
  </body>
</html>

This HTML file demonstrates three types of lists:

Ordered List (<ol>): Automatically numbered
Unordered List (<ul>): Uses default bullet points
Description List (<dl>): Used for term and description pairs

Example output when viewed in a browser:

Ordered list will show numbers (1, 2, 3, 4)
Unordered list will show bullet points
Description list will show terms and descriptions

Apply list-style-type to Change List Marker

In this step, you'll learn how to use the list-style-type CSS property to customize the appearance of list markers. The list-style-type allows you to change the default bullet points or numbers to various predefined styles.

Open the index.html file in the WebIDE and add a <style> section in the <head> to define CSS rules:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
    <style>
      /* Unordered List Styles */
      .square-list {
        list-style-type: square;
      }

      .circle-list {
        list-style-type: circle;
      }

      .disc-list {
        list-style-type: disc;
      }

      /* Ordered List Styles */
      .decimal-list {
        list-style-type: decimal;
      }

      .lower-alpha-list {
        list-style-type: lower-alpha;
      }

      .upper-roman-list {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>List Style Type Examples</h1>

    <h2>Unordered List Styles</h2>
    <ul class="square-list">
      <li>Square Markers</li>
      <li>Web Development</li>
      <li>Design Techniques</li>
    </ul>

    <ul class="circle-list">
      <li>Circle Markers</li>
      <li>Programming</li>
      <li>Software Engineering</li>
    </ul>

    <h2>Ordered List Styles</h2>
    <ol class="decimal-list">
      <li>Decimal Numbers</li>
      <li>Standard Numbering</li>
      <li>Default Style</li>
    </ol>

    <ol class="lower-alpha-list">
      <li>Lowercase Letters</li>
      <li>Alphabetical Ordering</li>
      <li>a, b, c Style</li>
    </ol>

    <ol class="upper-roman-list">
      <li>Uppercase Roman Numerals</li>
      <li>Classic Numbering</li>
      <li>I, II, III Style</li>
    </ol>
  </body>
</html>

Key list-style-type values:

Unordered Lists: disc (default), circle, square
Ordered Lists: decimal, lower-alpha, upper-roman, and more

Example output in a browser:

Square markers for the first unordered list
Circle markers for the second unordered list
Decimal numbers for the first ordered list
Lowercase letters for the second ordered list
Uppercase Roman numerals for the third ordered list

Use list-style-image to Replace Default Markers

In this step, you'll learn how to use list-style-image to replace default list markers with custom images. First, you'll need to download some sample icons to use as list markers.

Create an images directory in your project:

cd ~/project/css-list-styling
mkdir images

Download sample icons using curl:

curl -o images/check-icon.png https://labex.io/courses/icons/check-icon.png
curl -o images/star-icon.png https://labex.io/courses/icons/star-icon.png

Now, update your index.html file to include custom list marker images:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling with Images</title>
    <style>
      .check-list {
        list-style-image: url("images/check-icon.png");
      }

      .star-list {
        list-style-image: url("images/star-icon.png");
      }

      /* Adjust icon size if needed */
      .check-list li,
      .star-list li {
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Custom List Markers with Images</h1>

    <h2>Checklist</h2>
    <ul class="check-list">
      <li>Complete CSS Tutorial</li>
      <li>Practice List Styling</li>
      <li>Create Web Project</li>
    </ul>

    <h2>Favorite Topics</h2>
    <ul class="star-list">
      <li>Web Development</li>
      <li>Design Principles</li>
      <li>User Experience</li>
    </ul>
  </body>
</html>

Key points about list-style-image:

Uses url() to specify image path
Replaces default list markers with custom images
Works with both ordered and unordered lists
Image size can be controlled with CSS padding

Example output in a browser:

Checklist with check icon markers
Favorite topics list with star icon markers

Adjust list-style-position for Marker Placement

In this step, you'll explore the list-style-position CSS property, which controls how list markers are positioned relative to the list content. This property has two main values: outside (default) and inside.

Update your index.html file to demonstrate different list marker positions:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>List Style Position</title>
    <style>
      .outside-list {
        list-style-position: outside;
        background-color: #f0f0f0;
        padding: 10px;
        width: 300px;
      }

      .inside-list {
        list-style-position: inside;
        background-color: #e0e0e0;
        padding: 10px;
        width: 300px;
      }

      /* Add some visual separation */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>List Style Position Demonstration</h1>

    <h2>Outside List Markers (Default)</h2>
    <ul class="outside-list">
      <li>Markers positioned outside the content area</li>
      <li>Default CSS behavior</li>
      <li>Markers align to the left of the text</li>
    </ul>

    <h2>Inside List Markers</h2>
    <ul class="inside-list">
      <li>Markers positioned inside the content area</li>
      <li>Markers are part of the list item text</li>
      <li>Content starts immediately after the marker</li>
    </ul>
  </body>
</html>

Key points about list-style-position:

outside: Markers are positioned outside the content box (default)
inside: Markers are positioned inside the content box
Affects the layout and alignment of list items
Useful for creating compact or visually distinct lists

Example output in a browser:

Outside list: Markers are to the left of the text
Inside list: Markers are within the text area
Background colors help visualize the difference

Combine List Styles with Shorthand list-style Property

In this step, you'll learn how to use the shorthand list-style property to combine multiple list styling attributes in a single declaration. This property allows you to set list-style-type, list-style-image, and list-style-position in one line.

Update your index.html file to demonstrate the shorthand list-style property:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shorthand List Styles</title>
    <style>
      /* Shorthand with type and position */
      .todo-list {
        list-style: square inside;
      }

      /* Shorthand with image and position */
      .project-list {
        list-style: inside url("images/star-icon.png");
      }

      /* Full shorthand with type, image, and position */
      .complete-list {
        list-style: lower-roman inside url("images/check-icon.png");
      }

      /* Reset to default */
      .default-list {
        list-style: initial;
      }

      /* Remove list styling */
      .no-style-list {
        list-style: none;
      }

      /* Add some spacing for readability */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Shorthand List Style Demonstration</h1>

    <h2>Todo List (Square Markers)</h2>
    <ul class="todo-list">
      <li>Learn CSS List Styling</li>
      <li>Practice Shorthand Properties</li>
      <li>Create Stylish Lists</li>
    </ul>

    <h2>Project List (Star Icons)</h2>
    <ul class="project-list">
      <li>Web Development Project</li>
      <li>Design System</li>
      <li>Interactive Tutorials</li>
    </ul>

    <h2>Completed Projects (Check Icons)</h2>
    <ol class="complete-list">
      <li>CSS Fundamentals</li>
      <li>Responsive Design</li>
      <li>Advanced Styling Techniques</li>
    </ol>

    <h2>No Style List</h2>
    <ul class="no-style-list">
      <li>Removed List Markers</li>
      <li>Clean Unstyled List</li>
      <li>No Visual Indicators</li>
    </ul>
  </body>
</html>

Key points about the list-style shorthand:

Combines list-style-type, list-style-image, and list-style-position
Order doesn't matter for most values
none removes all list styling
initial resets to default browser styles

Example shorthand combinations:

list-style: square inside;
list-style: inside url('image.png');
list-style: lower-roman inside url('icon.png');

Summary

In this lab, participants explore CSS list styling techniques by creating an HTML project with various list types, including ordered, unordered, and description lists. The lab guides learners through customizing list appearances using CSS properties such as list-style-type, list-style-image, and list-style-position.

The hands-on exercise demonstrates how to modify default list markers, replace standard bullets with custom images, and adjust marker placement, providing practical skills for enhancing web page design and improving the visual presentation of lists using CSS attributes.

Style Lists with CSS Attributes

Introduction

Set Up HTML Project and Create Basic List

Apply list-style-type to Change List Marker

Use list-style-image to Replace Default Markers

Adjust list-style-position for Marker Placement

Combine List Styles with Shorthand list-style Property

Summary

Other CSS Tutorials you may like