HTML & CSS: The Good Parts

HTML & CSS: The Good Parts

by Ben Henick
Released February 2010
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449388751

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

HTML and CSS are the workhorses of web design, and using them together to build consistent, reliable web pages requires both skill and knowledge. The task is more difficult if you're relying on outdated, confusing, and unnecessary HTML hacks and workarounds. Author Ben Henick shows you how to avoid those traps by going beyond the standard tips, tricks, and techniques to connect the underlying theory and design of HTML and CSS to your everyday work habits.

With this practical book, you'll learn how to work with these tools far more effectively than is standard practice for most web developers. Whether you handcraft individual pages or build templates, HTML & CSS: The Good Parts will help you get the most out of these tools in all aspects of web page design-from layout to typography and to color.

  • Structure HTML markup to maximize the power of CSS
  • Implement complex multi-column layouts from scratch
  • Improve site production values with advanced CSS techniques
  • Support formal usability and accessibility requirements with tools built into HTML and CSS
  • Avoid the most annoying browser and platform limitations

Publisher resources

View/Submit Errata

Table of contents

  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
        1. What Are the Good Parts?
        2. What You Should Know Before You Read This Book
        3. The Ideal Reader
        4. A Warning About Familiarity (or Lack Thereof)
      2. Objectives of This Book
        1. What Is Not In This Book
        2. About Web Standards
        3. About Photoshop
        4. What You’ll Find on the Companion Website
        5. Nomenclature
        6. “Read the Source, Luke!”
      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
        1. Managing Links
        2. Improving the User Experience with Linking
        3. Hypertext Implementation Challenges
    4. 2. Working with HTML Markup
      1. HTML Syntax
        1. Tags, Elements, and Attributes
        2. Page Structure
      2. Rendering Modes, Flavors of HTML, and Document Type Declarations
        1. HTML or XHTML?
        2. Strict, Transitional, or Frameset?
        3. A Tale of Two Box Models
        4. Choosing the Right Document Type for Your Project
      3. Beautiful Parts: Universal Attributes
        1. Providing Stylesheet Hooks with class and id
        2. Describing Content with title and lang
        3. The contenteditable Attribute in HTML5
      4. Separating Content, Structure, Presentation, and Behavior
        1. Making Your Sites “Safe As Houses”
        2. Separation in Practice
        3. Working with Document Trees
      5. Browsers, Parsing, and Rendering
        1. Dynamic HTML, Ajax, and Rendering
    5. 3. CSS Overview
      1. Connecting Stylesheets to HTML Documents
        1. Referencing a Stylesheet with link
        2. Targeting Internet Explorer Versions with Conditional Comments
        3. Replacing link with style
        4. Using @import
        5. Beware of style Attributes!
        6. Targeting Rules to Specific Media
      2. Choosing the Elements You Want to Style: Writing Selectors
        1. Parents, Children, and Siblings: Element/Node Relationships
        2. Simple Selectors
        3. Multiple and Descendant Selectors
        4. Selecting Direct Child Elements
      3. Rule Conflicts, Priority, and Precedence
        1. Selector Priority
        2. Avoiding Rule Conflicts
        3. Value Inheritance
      4. CSS Property and Value Survey
      5. CSS Units
        1. Cross-Media Length and Size Units
        2. Pitch and the Value of a Pixel
        3. Print-Friendly Length Units
        4. font-size Keywords
        5. Color 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?
        1. Interoperability
        2. Market Forces
        3. Forward Compatibility
        4. Accessibility
        5. Vendor Priorities
        6. Legacy Asset Inertia
        7. Best Practices (and Lack Thereof)
        8. Strict Constructionism
      3. Taking the Middle Road: Standards-Friendliness
        1. Benefits of Standards-Friendliness
        2. Rules of Standards-Friendly Development
    7. 5. Effective Style and Structure
      1. The Four Habits of Effective Stylists
        1. Habit #1: Keeping It Simple
          1. Simplicity and huge sites
        2. Habit #2: Keeping It Flexible
          1. Flexibility, internal libraries, and code reuse
        3. Habit #3: Keeping to Consistency
          1. Managing templates to achieve consistency
        4. Habit #4: Keeping Your Bearings
          1. Product documentation as an effective “compass”
      2. CSS Zen and the Stylist’s Experience
        1. The Functional Principles of CSS Zen
      3. Information Architecture and Web Usability
        1. Multidimensionality
        2. Navigation: Orientation and Wayfinding
        3. Visit Strategies
        4. Guideposts for Creating Usable Interfaces
          1. Disabling links to the current document
        5. Predicting Visitor Behavior with Scenarios and User Testing
        6. Taxonomy and Nomenclature
        7. Applying Taxonomy Through the Cascade
        8. New Structural Elements (HTML5)
    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
        1. The overflow Property
        2. Limiting But Not Fixing Element Dimensions
        3. Handling the Unpredictable
      4. Margins, Borders, and Padding
        1. Negative Margins
        2. Collapsed Margins
        3. Borders
        4. Padding
        5. The Box Behavior of the Document Root Elements
        6. Box Property Dimensions and the % Value
      5. Element Flow
        1. Inline Elements
        2. Block Elements
        3. Inline-Block Elements
      6. Using the display Property to Change an Element’s Flow
        1. The display Property
      7. The float and clear Properties
        1. The Rules of the float Property
        2. Canceling float Values with Corresponding clear Values
        3. float Context
      8. Implementing Multicolumn Layouts
        1. Converting the Two-Column Layout from Markup Tables to CSS
        2. How the Two-Column Styles Work
        3. Benefits of Confining Layout Specifications to Stylesheets
        4. Moving from Two Columns to Three
        5. Dealing with More Than Three Columns
        6. Semantically Empty Containers for Multicolumn Layouts
        7. Advanced Layout in CSS3
      9. CSS Positioning Properties
        1. How Positioning Works
        2. Bounding Positioned Elements
      10. The visibility and z-index Properties
        1. Altering Visibility Without Affecting Document Flow
        2. Stacking
      11. Obtaining Precise Navigation Source Order and Layout
        1. Orienting the List
        2. Forcing the Navigation List into the Desired Coordinates
      12. Layout Types and Canvas Grids
        1. Fixed, Proportional, and Flexible Layouts
        2. Defining Grids
        3. The Rule of Thirds, the Golden Ratio, and the Fibonacci Sequence
        4. Implementing a Flexible Page Grid
    9. 7. Working with Lists
      1. Ordered and Unordered Lists
        1. User Agent Default Styles for Ordered and Unordered Lists
        2. Creating Valid Ordered and Unordered Lists
        3. The list-style-type Property and the type Attribute
        4. The nav Element (HTML5)
          1. Accessibility and usability concerns
          2. Enabling user agents to present navigation through alternate means
        5. Changing the Range of an Ordered List
          1. Greater Wavelengths
          2. Shorter Wavelengths
      2. Other Uses for Lists
        1. Outlines
        2. Inline Serial Lists
        3. Altering the Layout of Footer Links
        4. Bullets in Backgrounds?
      3. Styling Navigation Elements
        1. Placing the Primary Site Navigation Within the Source Order
        2. The Primary Navigation Layout Recipe
        3. The Footer Navigation Recipe
      4. Definition Lists
        1. Styling Definition Lists
        2. Dictionary Example
        3. Dialogue Example
    10. 8. Headings, Hyperlinks, Inline Elements, and Quotations
      1. Headings and Good Writing
        1. Headings in Print
        2. Optimal Heading Insertion
      2. Styling Heading Elements
        1. Heading Sizes and Type Treatments
        2. Normalizing Heading Dimensions
        3. Heading Accents
      3. Link Markup
        1. Link Attributes
        2. Virtuous Use of the href Attribute
        3. Linking to Specific Passages Within Documents
        4. Creating Effective Link Content and title Values
      4. Styling Links
        1. Link Pseudoclasses
        2. Using display: block to Increase the Footprint of a Link
        3. The text-decoration Property
        4. The cursor Property
      5. Adding Semantic Value with Inline Elements
      6. Quotations
    11. 9. Colors and Backgrounds
      1. Color Theory and Web Color Practice
        1. Usability, Accessibility, and Color
        2. The Additive Color Model
        3. The HSB Color Model
        4. The Subtractive Color Model
        5. Design, Contrast, and Complements
        6. Identifying Colors, in Brief
        7. Display Environments and the Web-Safe Palette
        8. Creating Your Own Palettes
      2. CSS Backgrounds
        1. Setting background-position Values
        2. The CSS background Shorthand Property
      3. Composing Background Images
        1. “Faux Columns”
        2. Tiled Background Textures and Patterns
        3. Large Background Textures and Nonrepeating Devices
        4. Drop Shadows, Gel Effects, and Rounded Corners
      4. Bitmapped Copy and Fahrner Image Replacement
        1. The FIR Stylesheet Rules
        2. Drawbacks of FIR
      5. Reducing Server Load with Sprites
    12. 10. (Data) Tables
      1. The Disadvantages of Layout Tables
        1. Source Order: Square Peg, Round Hole
        2. CSS Zen Becomes a Myth
        3. Template Slavery Is Unavoidable
        4. Positioning Is Rendered Useless
      2. The Parts of a Data Table
        1. Example: The Full Smash of Table Markup
      3. Composing Cells
        1. Table and Data Composition
      4. Table Headers, Footers, and Heading Cells
        1. Attribute and Child Selectors
        2. Reducing Header and Footer Contrast
        3. Adding Rollover Accents to a Table
    13. 11. Images and Multimedia
      1. Replaced Elements
      2. Preparing Images for Production
        1. The alt Attribute Explained
        2. Image Dimensions and Borders
      3. Image Production
        1. Cropping
        2. Matting: Creating a Virtual “Frame”
        3. Resampling: Altering the Absolute Size of an Image
        4. Level Changes: Optimizing the Contrast of Photographs
        5. Applying Multiple Adjustments
      4. Working with Color Profiles
      5. Image Optimization
        1. Choosing the Right Image Format
        2. Finding the Happy Medium Between Size and Quality
      6. Publishing Images
        1. Keeping Images Organized
        2. Image Publishing and Management in a CMS
        3. Image Publication Etiquette
      7. Styling Images and Plug-in Content
        1. Composing Image Layout Within a Column
        2. Captioning Images
        3. Working with Previews (Thumbnail Images) in a Gallery or Slideshow Setting
        4. Lightbox: Previews, Galleries, and Slideshows
        5. SlideShowPro
      8. Adding Motion and Sound: Using SWFObject to Insert Flash Videos and Presentations
      9. Inserting Unwrapped Multimedia
        1. A Tale of Three Companies
        2. Enter Flash
        3. Using Bare Markup to Publish Multimedia Content
        4. A Caveat of Plug-in Content Styling
        5. Sidestepping Plug-ins with the HTTP Content-Disposition Header Field
        6. Keeping an Open Mind
        7. The video and audio Elements (HTML5)
          1. Embedding a video
          2. Supporting alternative video formats
          3. Providing video content for browsers that don’t support the video element
        8. The canvas Element (HTML5)
          1. The CanvasRenderingContext2D API
          2. SVG as an alternative to canvas
    14. 12. Web Typography
      1. A Brief History of Letterforms
        1. Origins of Modern Western Letterforms
        2. Gutenberg’s Press and the Art of Typography
        3. The Emergence of Digital Typesetting
        4. Different Limitations Without Changed Expectations
      2. A Visual Glossary of Typography
      3. Aliasing and Anti-Aliasing
      4. Type Styles, Readability, and Legibility
        1. Styling for Readability
        2. Styling for Legibility
        3. “The Fold” and Tiny Type
      5. Sizing Type
        1. Choosing the Right Units for Sizing Type
        2. Em/Percentage Size Telescoping
        3. Size Keywords
      6. Working with Typefaces and Fonts
        1. The Challenge of Limited Choices
        2. Applying Type Choices: the font-family Property
        3. Finding Canonical Typeface Names
        4. Accessing System Default Type with the font Property
      7. Character Encoding in Brief
        1. What Is Character Encoding?
        2. ASCII, ISO 8859-1, Unicode, and UTF-8
        3. Choosing an Encoding Scheme
        4. Inserting Entities to Provide Non-ASCII Characters
      8. Creating Balanced Type Treatments
        1. Predictability, Preference, and Panic
        2. Assessing Content Scope
        3. Distinguishing Type: Face, Size, Weight, Style, Color
        4. Setting Type Around Blowouts
        5. Styling Passages of Similar Priority
        6. Enter Type Treatments
      9. Typographical Miscellany in CSS
        1. The line-height Property
        2. The font-variant and text-transform Properties
        3. The letter-spacing and word-spacing Properties
        4. The white-space Property
      10. The Practice of Good Web Typography
    15. 13. Clean and Accessible Forms
      1. Building Effective Forms
        1. Web Applications, User Perspective, and Design Choices
        2. Organizing User Interfaces by Function
        3. Ten Rules for Effective Web Forms and Applications
      2. Assessment and Structure
        1. Establishing Requirements
        2. Markup and Structure
      3. Basic Form Structure, Presentation, and Behavior
        1. Form-Originated get Requests
        2. The post Method and File Uploads
        3. Manipulating the Size and Appearance of Individual Controls
      4. Prototyping and Layout
        1. Prototyping 101
        2. Design Patterns, Style Resets, and Form Layout
        3. Grouping Controls by Appearance
      5. Required Fields and Other Submission Constraints
        1. Identifying Required Fields
        2. Discovering and Identifying User Input Errors
        3. The disabled and readonly Attributes
      6. Creating Accessible Forms
        1. Implementing Forms for Accessibility
        2. Supporting Keyboard Navigation of Forms
      7. Form Features in HTML5
        1. New Input Types
        2. The required Attribute
    16. 14. The Bad Parts
      1. The Numbing Nature of Internet Explorer (Especially IE 6)
        1. Browser Wars 2.0
        2. Absent or Poor Selector Support
        3. hasLayout
        4. Margin Doubling
        5. expression() Values
        6. ActiveX Filters and Transitions
        7. PNG Support (or Lack Thereof)
        8. Poor Property Support
        9. Issues with XHTML and XML
      2. Systemic Ugliness
        1. Template Fragility and Third-Party Content
        2. Markup Validation As a Prerequisite to Proper Style Implementation
        3. “Best Viewed with”
        4. Graded Support
        5. embed Versus object
        6. Form Controls, Plug-in Instances, and Element Stacking
        7. Invalid Markup for Stupid Reasons
      3. HTML’s Bad Neighborhoods and Cul-de-Sacs
        1. Frames
        2. The strike Element
        3. The name Attribute
        4. The noscript and noframes Elements
        5. Semantic Contortions and the Limited Vocabulary of HTML
        6. Inline Presentation Elements
        7. Manipulating Vertical Space: hr and br
        8. The pre Element Versus the white-space Property
      4. CSS Travesties
        1. @-Rules
        2. Computed Values and Rounding Differences
        3. Vendor-Specific -moz and -webkit Property Prefixes
        4. The inherit Value
        5. Hiding Stuff: z-index and clip
        6. Counters
        7. Element Flow Rules
        8. Unicode Code Position Values and the content Property
      5. The Awful Parts
        1. The marquee and blink Elements
        2. MSIE User Interface Properties
        3. The align Attribute
        4. The style Attribute
        5. div-itis
        6. Event Handler Attributes
        7. Gratuitous Underlining
        8. The http-equiv Attribute
      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

Product information

  • Title: HTML & CSS: The Good Parts
  • Author(s): Ben Henick
  • Release date: February 2010
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449388751