Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Fall 2019

## Lists with Image

And now, let's add a basketball icon as a list bullet (image is at images/basketball.gif,

An unordered list controlled by CSS:

Example 4.29 - List with images as bullets - Example 4.29 (Without Styles) |
<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ul class="basketball"><li>Mark Few</li><li>Roy Williams</li><li>John Calipari</li><li>Mike Krzyzewski</li><li>Bill Self</li><li>Steve Prohm</li><li>Thad Matta</li><li>Ray Harper</li><li>Dave Rose</li><li>Sean Miller</li></ul>ul.basketball { list-style-image: url('http://cscie12.dce.harvard.edu/resources/images/basketball.gif'); }

- Markup
- Style
- Display

    <strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><ul class="basketball">
    <li>Mark Few</li>
    <li>Roy Williams</li>
    <li>John Calipari</li>
    <li>Mike Krzyzewski</li>
    <li>Bill Self</li>
    <li>Steve Prohm</li>
    <li>Thad Matta</li>
    <li>Ray Harper</li>
    <li>Dave Rose</li>
    <li>Sean Miller</li>
    </ul>

In `style` element (`<style type="text/css">`) within `head` element:

    ul.basketball {
        list-style-image: url('images/basketball.gif');
    }

Winningest Active Coaches, Division I NCAA Men's Basketball

- Mark Few
- Roy Williams
- John Calipari
- Mike Krzyzewski
- Bill Self
- Steve Prohm
- Thad Matta
- Ray Harper
- Dave Rose
- Sean Miller

See: Men's Basketball Coaching Records

Copyright © David Heitmeyer