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

## The "display" property

Common values:

- block
- inline
- none
- inline-block

### display: inline

Key points:

- remove list styling
- change from "block" to "inline" display

`ul { list-style: none; }`
`li { display: inline; }`

### display: none

Example 6.1 - display: none; - Example 6.1 (Without Styles) | <ul><li>American League <ul><li id="ale">East <ul><li>Baltimore</li><li>Boston</li><li>New York</li><li>Toronto</li><li>Tampa Bay</li></ul></li><li id="alc">Central <ul><li>Chicago</li><li>Cleveland</li><li>Detroit</li><li>Kansas City</li><li>Minnesota</li></ul></li><li id="alw">West <ul><li>Los Angeles</li><li>Oakland</li><li>Texas</li><li>Seattle</li></ul></li></ul></li></ul> #ale { display: none; } #alw { display: none; } * { font-family: arial,helvetica,sans-serif; }

- Markup
- Style
- Screenshot

     <ul>
    <li>American League<ul>
    <li id="ale">East<ul>
    <li>Baltimore</li>
    <li>Boston</li>
    <li>New York</li>
    <li>Toronto</li>
    <li>Tampa Bay</li>
    </ul></li>
    <li id="alc">Central<ul>
    <li>Chicago</li>
    <li>Cleveland</li>
    <li>Detroit</li>
    <li>Kansas City</li>
    <li>Minnesota</li>
    </ul></li>
    <li id="alw">West<ul>
    <li>Los Angeles</li>
    <li>Oakland</li>
    <li>Texas</li>
    <li>Seattle</li>
    </ul></li>
    </ul></li>
    </ul>

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

    #ale { display: none; }
    #alw { display: none; }
    * { font-family: arial,helvetica,sans-serif; }

Full list for the American League:

Copyright © David Heitmeyer