Styling lists

Tags
Lists, Fonts, Colors, Margins, Padding
Fill in the blank

Unordered list tag

What tag do you use to start a bulleted list? (Bullets are those big dots.)

Your answer:
Saving
Not graded. So why do it?
Fill in the blank

Shared style

You have 15 p tags on a page. You want to apply a special look just to three of them. What HTML attribute would you use to specify those three?

Your answer:
Saving
Not graded. So why do it?
Show all

Lesson contents

You can style lists, like other elements. Let's see some common options.

Fonts

Here's some HTML:

  • <ul>
  •     <li class="female">CC</li>
  •     <li class="male">Oscar</li>
  •     <li class="female">Renata</li>
  •     <li class="female">Rosie</li>
  • </ul>

Some CSS to style it.

  • .female {
  •     font-family: cursive;
  •     font-size: 200%;
  •     font-weight: bold;
  •     text-transform: uppercase;
  •     font-style: italic;
  •     color: hotpink;
  • }
  • .male {
  •     font-family: monospace;
  •     font-size: 150%;
  •     text-transform: lowercase;
  •     color: green;
  • }

It looks like this:

Output

You should be able to figure out the CSS properties. The only strange one is the font-family of monospace. In a monospace font, each character is the same width. So an "i" and an "m" take the same amount of space. Looks like it came from an old-timey typewriter.

Show all

Bullet

You can change the bullet in an unordered list. For example:

Different bullets

For the states, the items have a circle. For the cities, the items have a square.

Some HTML:

  • <ul class="states">
  •     <li>Queensland</li>
  •     <ul class="cities">
  •         <li>Brisbane</li>
  •         <li>Ipswich</li>
  •         <li>Townsville</li>
  •     </ul>
  •     <li>Victoria</li>
  •     <ul class="cities">
  •         <li>Ballarat</li>
  •         <li>Melbourne</li>
  •     </ul>
  • </ul>

Here's the CSS:

  • .states li {
  •     list-style-type: circle;
  • }
  • .cities li {
  •     list-style-type: square;
  • }

.states li selects elements with the states class, and then li elements inside them.

Show all

Ordered lists

You can change the numbers that ordered lists use, and where they start. Say you have this HTML:

  • <ol start="2">
  •     <li class="pig">Sticks</li>
  •     <li class="pig">Bricks</li>
  • </ol>

With this CSS:

  • li.pig {
  •     list-style-type: lower-roman;
  • }

Here's what you'd get:

Output

The list uses roman numerals and starts at 2.

Show all

Exercise

Exercise

Style list

Make a page with a list, that looks like this:

Goal

Hints:

  • Check the bullet types.
  • What element does the border go around?
  • Try margin-left for the li.

Full HTML page, as usual. Use a separate stylesheet. Upload to your server. Put your work behind a username and password.

Submit the URL, and the username and password.

Show all

Summary

  • You can style lists, like any other element.
  • You can change the bullet that ul lists use.
  • You can change the number style and start point that ol lists use.

Up next

Let's get some images on your pages.