Google Developers Academy

Customizing the User Interface with CSS

Learning objectives
  • Override the default cursor, margins, and padding values applied to your list.
  • Use advanced CSS selectors to apply alternating background colors and hover styles to each list element.

The previous lessons created a player with clickable chapter marker links. However, while the links are functional using the default HTML element styles, the user interface doesn't really provide a good user experience. In this step, we'll add custom CSS rules to enhance the chapter marker player's visual appeal.

Override the default styles applied to your list

By default, most browsers add margins and padding to <ol> elements and the <li> elements they contain. The appearance of this extra space doesn’t fit in with the design of the chapter marker player, so we'll define a couple of custom CSS rules. The first rule removes the margins from the list and list items and also removes padding from the list as a whole. The second rule sets a small amount of padding around each list item.

ol.chapter-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ol.chapter-list > li {
  padding: 0.5em;
  margin: 0;
  cursor: pointer;
}

Applying advanced styles to each list element

The CSS psuedo-class nth-child(odd) matches all odd-numbered elements in a sequence of children, and nth-child(even) matches all even-numbered elements. In this example, the pseudo-classes produce an alternating pattern of different background colors to make the clickable areas in each chapter marker more distinct.

ol.chapter-list > li:nth-child(odd) {
  background-color: #ececec;
}

ol.chapter-list > li:nth-child(even) {
  background-color: #e4e4e4;
}

Similarly, the CSS psuedo-class hover matches the HTML element below the mouse cursor. In the code below, the pseudo-class applies a slightly different background color to indicate that the item can be clicked.

ol.chapter-list > li:hover {
  background-color: #c0c0c0;
}

Try it out

View Full Source Code

Live Demo

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.