CSS - Lesson 18: Lists | Andros Fenollosa

list-style-type

You can use the predefined styles.

ul {
  list-style-type: disc;
  list-style-type: circle;
  list-style-type: square;
  list-style-type: decimal;
}

Lorem.
Fuga.
Placeat.

Use a text or emoji.

ul {
  list-style-type: '👍';
}

Eat fruit
Exercise
Pay taxes

Predefine them with @counter-style.

@counter-style lista-de-ganadores {
  system: fixed;
  symbols: url(oro.png) url(plata.png) url(bronce.png);
  suffix: " ";
}

ul {
  list-style-type: lista-de-ganadores;
}

Linux
MacOS
Windows

Or remove them.

ul {
  list-style-type: none;
}

Home
FAQ
About us

More information

image

Uses an image as a marker in an unordered list.

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

Fernando Alonso
Michael Schumacher
Ayrton Senna

More information

position

You indicate where you want the marker to be placed.

Inside the <ul>.

ul {
  list-style-position: inside;
}

Lorem.
Fuga.
Placeat.

Outside the <ul>.

ul {
  list-style-position: outside;
}

Lorem.
Fuga.
Placeat.

More information

Activity 1

Implement in HTML the following list with square markers.

Activity 12-1 preview

Activity 2

Implement in HTML the following list with the names of your pets or children. If you don't have any, you can make them up.

Activity 12-2 preview

Activity 3

Implement in HTML the following list, equivalent to a real navigation bar for a website. Don't forget to add a state change when the cursor is over it.

Activity 12-3 preview