You are previewing HTML & CSS: The Good Parts.

HTML & CSS: The Good Parts

Cover of HTML & CSS: The Good Parts by Ben Henick Published by O'Reilly Media, Inc.
  1. HTML & CSS: The Good Parts
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. The Who and What of This Book
      2. Objectives of This Book
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact O’Reilly
      7. Acknowledgments
    3. 1. Hypertext at the Core
      1. The Web Without Links
      2. URIs
    4. 2. Working with HTML Markup
      1. HTML Syntax
      2. Rendering Modes, Flavors of HTML, and Document Type Declarations
      3. Beautiful Parts: Universal Attributes
      4. Separating Content, Structure, Presentation, and Behavior
      5. Browsers, Parsing, and Rendering
    5. 3. CSS Overview
      1. Connecting Stylesheets to HTML Documents
      2. Choosing the Elements You Want to Style: Writing Selectors
      3. Rule Conflicts, Priority, and Precedence
      4. CSS Property and Value Survey
      5. CSS Units
      6. Key CSS Layout Properties
    6. 4. Developing a Healthy Relationship with Standards
      1. The Broad Landscape of Web-Related Standards
      2. Why Web Standards?
      3. Taking the Middle Road: Standards-Friendliness
    7. 5. Effective Style and Structure
      1. The Four Habits of Effective Stylists
      2. CSS Zen and the Stylist’s Experience
      3. Information Architecture and Web Usability
    8. 6. Solving the Puzzle of CSS Layout
      1. The CSS Box Model and Element Size Control
      2. Quirks Mode and Strict Mode
      3. auto Values
      4. Margins, Borders, and Padding
      5. Element Flow
      6. Using the display Property to Change an Element’s Flow
      7. The float and clear Properties
      8. Implementing Multicolumn Layouts
      9. CSS Positioning Properties
      10. The visibility and z-index Properties
      11. Obtaining Precise Navigation Source Order and Layout
      12. Layout Types and Canvas Grids
    9. 7. Working with Lists
      1. Ordered and Unordered Lists
      2. Other Uses for Lists
      3. Styling Navigation Elements
      4. Definition Lists
    10. 8. Headings, Hyperlinks, Inline Elements, and Quotations
      1. Headings and Good Writing
      2. Styling Heading Elements
      3. Link Markup
      4. Styling Links
      5. Adding Semantic Value with Inline Elements
      6. Quotations
    11. 9. Colors and Backgrounds
      1. Color Theory and Web Color Practice
      2. CSS Backgrounds
      3. Composing Background Images
      4. Bitmapped Copy and Fahrner Image Replacement
      5. Reducing Server Load with Sprites
    12. 10. (Data) Tables
      1. The Disadvantages of Layout Tables
      2. The Parts of a Data Table
      3. Composing Cells
      4. Table Headers, Footers, and Heading Cells
    13. 11. Images and Multimedia
      1. Replaced Elements
      2. Preparing Images for Production
      3. Image Production
      4. Working with Color Profiles
      5. Image Optimization
      6. Publishing Images
      7. Styling Images and Plug-in Content
      8. Adding Motion and Sound: Using SWFObject to Insert Flash Videos and Presentations
      9. Inserting Unwrapped Multimedia
    14. 12. Web Typography
      1. A Brief History of Letterforms
      2. A Visual Glossary of Typography
      3. Aliasing and Anti-Aliasing
      4. Type Styles, Readability, and Legibility
      5. Sizing Type
      6. Working with Typefaces and Fonts
      7. Character Encoding in Brief
      8. Creating Balanced Type Treatments
      9. Typographical Miscellany in CSS
      10. The Practice of Good Web Typography
    15. 13. Clean and Accessible Forms
      1. Building Effective Forms
      2. Assessment and Structure
      3. Basic Form Structure, Presentation, and Behavior
      4. Prototyping and Layout
      5. Required Fields and Other Submission Constraints
      6. Creating Accessible Forms
      7. Form Features in HTML5
    16. 14. The Bad Parts
      1. The Numbing Nature of Internet Explorer (Especially IE 6)
      2. Systemic Ugliness
      3. HTML’s Bad Neighborhoods and Cul-de-Sacs
      4. CSS Travesties
      5. The Awful Parts
      6. Picking Up the Pieces
    17. A. URIs, Client-Server Architecture, and HTTP
      1. The Underlying Client-Server Architecture
      2. What Every Web Developer Should Know About HTTP
      3. MIME Types, in Brief
      4. Controlling Request Volume
    18. Glossary
    19. Index
    20. About the Author
    21. Colophon
    22. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Chapter 7. Working with Lists

Lists are everywhere: checklists, shopping lists, to-do lists, “Best of” and “Worst of” lists, procedure lists, and simple rankings turn up every day. Lists are pretty easy to find in web markup, too, used for all of those purposes and often for navigation. HTML supports three types of lists: ordered, unordered, and definition lists.

Ordered and Unordered Lists

The principal difference between ordered and unordered lists is semantics: sometimes there’s a need to rank items by some criterion (e.g., importance, order of execution, time, order of addition, alphabetic order), and sometimes a list contains nothing more than a group of data with something in common.

User Agent Default Styles for Ordered and Unordered Lists

At first glance, unstyled lists look like block elements (which they are) containing a series of still more block elements, each of which is offset from the apparent left margin of the list. However, current browsers apply different user agent styles to lists than their legacy counterparts, as shown in Table 7-1.

Table 7-1. User agent styles for unordered, ordered, and definition lists (ul, ol, dl)

User agents

User agent style

  • Firefox 2+

  • Internet Explorer 7+

  • Safari 3+

margin: 1em auto 1em 0; padding-left: 40px;

  • Firefox 1.0.x–1.4.x

  • Internet Explorer 6

  • Quirks rendering modes

margin: 1em auto 1em 40px;

Note the 40px values. Their consequence is that if type is especially large and an ordered list runs long, list item markers are likely to be obscured in part ...

The best content for your career. Discover unlimited learning on demand for around $1/day.