Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 3.11: Styling Lists

Lists have some special styling considerations. There are options for controlling what “image” to use for bullets, how to position the bullets, and the type of bullet or numbering to use for the list. These options can all be defined in a single composite list-style attribute that lets you control all three options:

list-style image position type

The image, which can be independently set using list-style-image, which simply specifies the image that will be used for bullets, with none indicating to use the built-in bullet styles. This supports images that you specify by using the url("image") to use a downloaded image, but graphic commands such as gradient (which we will be covering in a future chapter) can be used. An example of this would be using the style:

list-style-image: url("crystal.png")

Resulting in:

  • First crystal bullet item
  • Second crystal bullet item

The list position is where the bullet will be displayed for multi-lined items. You can independently specify this attribute using list-style-position, with the options for this being inside or outside. The default is outside where the text will align with the text above it, while inside aligns the text with the bullet. The image below shows the two options.

outside (default)

  • Here is the first item in the list
  • Here is the second item in the list

inside

  • Here is the first item in the list
  • Here is the second item in the list

Finally, the type is simply the way to display the bullet or number. This can be independently set using list-style-type. Unordered lists and Ordered lists have different options here.

For unordered lists, the options are none, disc, circle, square, or a string such as “*” or "👍" or whatever string you wish to use. This image below shows these different options

none
  • First item
  • Second item
  • Third item
disc
  • First item
  • Second item
  • Third item
circle
  • First item
  • Second item
  • Third item

square
  • First item
  • Second item
  • Third item
string "*"
  • First item
  • Second item
  • Third item
string "👍"
  • First item
  • Second item
  • Third item

The ordered list have their own list, with several language specific options as well. Here are the common formats:

decimal
  1. First item
  2. Second item
  3. Third item
decimal-leading-zero
  1. First item
  2. Second item
  3. Third item
lower-roman
  1. First item
  2. Second item
  3. Third item

upper-roman
  1. First item
  2. Second item
  3. Third item
upper-alpha
  1. First item
  2. Second item
  3. Third item
lower-alpha
  1. First item
  2. Second item
  3. Third item

As long lists can be difficult to read so it is often that the list will have different colors to distinguish the different items making it easier to understand the list. CSS supports this option by using a state delimiter similar to that for fonts. :nth-child() is used to specify the count. This is done using mathematic notation so 2n is ever second item while 2n+1 would be every odd item. Since these two options are so common, CSS provides the shortcuts odd and even. So li:nth_child(odd) would be used to specify the styling of odd list items while li:nth_child(even) covers the even items.

This is a bit difficult to grok without a demo, so lets create a list that has 3 different colors, red for 1,4,7,… then green for 2,5,8, then blue for 3, 6, 9… . Here is the code for the style sheet

.listBox {
    width: 150pt;
    border: 1px solid darkblue;
    display: inline-block;
}.rgbList li:nth-child(3n+1) {
    color:red;
}
.rgbList li:nth-child(3n+2) {
    color:green;
}
.rgbList li:nth-child(3n) {
    color:blue;
}

The code for the lists

<div class="listBox">
    <strong>unordered</strong>
    <ul class="rgbList">
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
    </ul>
</div>
<div class="listBox">
    <strong>ordered</strong>
    <ol class="rgbList">
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
    </ol>
</div>

With the result being:

unordered
  • first
  • second
  • third
  • fourth
  • fifth
  • sixth
ordered
  1. first
  2. second
  3. third
  4. fourth
  5. fifth
  6. sixth

The demo for all the lists shown in this chapter is available on the git repository.

Of course, if we can style lists, we should be able to style tables, so lets look at tables next.

Chapter contents

Chapter 3 Contents

3.1 CSS Basics Cheat Sheet

A cheat sheet covering the basics of CSS.

3.2 What is CSS

A brief look at what CSS is and how it came to be.

3.3 Setting up Style Sheets

A look at the three different ways to add style to your document.

3.4 Blocks, Spans, and Selectors

Setting the style for different types of elements.

3.5 Classes

An easy way of having multiple styles on the same element type and across different elements.

3.6 Colours

The use of named colors, the RGB color model, and creating RGB colors.

3.7 Hexadecimal color codes

Using hexadecimal color codes and other color models.

3.8 Fonts

Controlling what text looks like.

3.9 Box Model

The box model controls how elements are positioned within their layout box.

3.10 Link styles

Anchor element states and turning a link into a button.

Christmas Bonus

Hunt the Santa logo
A total conversion of Hunt the Webbus with a Christmas Theme.

3.11 Styling lists

Lists can have style applied to their layout, placement, and bullet.

3.12 Styling tables

Tables have a grid as well as rows and columns that can be controlled.

3.13 Webbus project

The project for this chapter is a variation of a classic text game

3.14 Webbus solution

My solution for the Webbus project

3.15 Christmas Total Conversion

Converting the Webbus game into a Christmas game.


← previous section
Link Style next section →
Table Styles Table of Contents