You are previewing The Essential Guide to CSS and HTML Web Design.
O'Reilly logo
The Essential Guide to CSS and HTML Web Design

Book Description

The Essential Guide to CSS and HTML Web Design is a special book-it will tell you all you need to know to design great web sites that are standards compliant, usable, and look great, but not overwhelm you with waffle, theory, and obscure details.

It is designed to be invaluable to you, whatever stage you are at in your career, with a mixture of practical tutorials and reference material-beginners will quickly pick up the basics, while more experienced web designers and developers will keep returning to the book again and again to recap on techniques they maybe haven't used for a while, or look up properties, attributes and other details. It is destined to become a close friend, adopting a permanent place on your desk.

It starts off by giving a brief introduction to the internet, and the broad area of web design, before diving straight in to HTML and CSS basics, reusing code, other best practices. It then focuses on all the most important areas of a successful web site-typography, images, navigation, tables, layouts, forms and feedback (including ready made PHP scripts for you to use,) and browser quirks, hacks and bugs. The book is completely up-to-date, covering support of the newest standards in all the latest browsers, including IE 7 and Firefox 2.

Table of Contents

  1. Copyright
  2. ABOUT THE AUTHOR
  3. ABOUT THE TECHNICAL REVIEWER
  4. ACKNOWLEDGMENTS
  5. FOREWORD
  6. INTRODUCTION
      1. This book is different
    1. Layout conventions
  7. 1. An Introduction to Web Design
    1. 1.1. A brief history of the Internet
    2. 1.2. Why create a website?
    3. 1.3. Audience requirements
    4. 1.4. Web design overview
      1. 1.4.1. Why WYSIWYG tools aren't used in this book
    5. 1.5. Introducing HTML and XHTML
      1. 1.5.1. Introducing the concept of HTML tags and elements
      2. 1.5.2. Nesting tags
      3. 1.5.3. Web standards and XHTML
      4. 1.5.4. Semantic markup
    6. 1.6. Introducing CSS
      1. 1.6.1. Separating content from design
      2. 1.6.2. The rules of CSS
      3. 1.6.3. Types of CSS selectors
        1. 1.6.3.1. Class selectors
        2. 1.6.3.2. ID selectors
        3. 1.6.3.3. Grouped selectors
        4. 1.6.3.4. Contextual selectors
      4. 1.6.4. Adding styles to a web page
      5. 1.6.5. The cascade
      6. 1.6.6. The CSS box model explained
    7. 1.7. Creating boilerplates
    8. 1.8. Working with website content
      1. 1.8.1. Information architecture and site maps
      2. 1.8.2. Basic web page structure and layout
      3. 1.8.3. Limitations of web design
  8. 2. WEB PAGE ESSENTIALS
    1. 2.1. Starting with the essentials
    2. 2.2. Document defaults
      1. 2.2.1. DOCTYPE declarations explained
        1. 2.2.1.1. XHTML Strict
        2. 2.2.1.2. XHTML Transitional
        3. 2.2.1.3. XHTML Frameset
        4. 2.2.1.4. HTML DOCTYPEs
      2. 2.2.2. Partial DTDs
      3. 2.2.3. What about the XML declaration?
    3. 2.3. The head section
      1. 2.3.1. Page titles
      2. 2.3.2. meta tags and search engines
        1. 2.3.2.1. Keywords and descriptions
        2. 2.3.2.2. revisit-after, robots, and author
      3. 2.3.3. Attaching external documents
        1. 2.3.3.1. Attaching external CSS files: The link method
        2. 2.3.3.2. Attaching CSS files: The @import method
        3. 2.3.3.3. Attaching favicons and JavaScript
        4. 2.3.3.4. Checking paths
    4. 2.4. The body section
      1. 2.4.1. Content margins and padding in CSS
      2. 2.4.2. Zeroing margins and padding on all elements
      3. 2.4.3. Working with CSS shorthand for boxes
      4. 2.4.4. Setting a default font and font color
    5. 2.5. Web page backgrounds
      1. 2.5.1. Web page backgrounds in CSS
        1. 2.5.1.1. background-color
        2. 2.5.1.2. background-image
        3. 2.5.1.3. background-repeat
        4. 2.5.1.4. background-attachment
        5. 2.5.1.5. background-position
        6. 2.5.1.6. CSS shorthand for web backgrounds
      2. 2.5.2. Web page background ideas
        1. 2.5.2.1. Adding a background pattern
      3. 2.5.3. Drop shadows
        1. 2.5.3.1. A drop shadow that terminates with the content
        2. 2.5.3.2. Gradients
        3. 2.5.3.3. Watermarks
    6. 2.6. Closing your document
    7. 2.7. Naming your files
    8. 2.8. Commenting your work
    9. 2.9. Web page essentials checklist
  9. 3. Working with Type
    1. 3.1. An introduction to typography
    2. 3.2. Styling text the old-fashioned way (or, why we hate font tags)
    3. 3.3. A new beginning: Semantic markup
      1. 3.3.1. Paragraphs and headings
      2. 3.3.2. Logical and physical styles
        1. 3.3.2.1. Styles for emphasis (bold and italic)
        2. 3.3.2.2. Deprecated and nonstandard physical styles
        3. 3.3.2.3. The big and small elements
        4. 3.3.2.4. Teletype, subscript, and superscript
        5. 3.3.2.5. Logical styles for programming-oriented content
        6. 3.3.2.6. Block quotes, quote citations, and definitions
        7. 3.3.2.7. Acronyms and abbreviations
        8. 3.3.2.8. Elements for inserted and deleted text
      3. 3.3.3. The importance of well-formed markup
        1. 3.3.3.1. The importance of end tags
    4. 3.4. Styling text using CSS
      1. 3.4.1. Defining font colors
      2. 3.4.2. Defining fonts
        1. 3.4.2.1. Web-safe fonts
        2. 3.4.2.2. Sans-serif fonts for the Web
        3. 3.4.2.3. Serif fonts for the Web
        4. 3.4.2.4. Fonts for headings and monospace type
        5. 3.4.2.5. Mac vs. Windows: Anti-aliasing
      3. 3.4.3. Using images for text
        1. 3.4.3.1. Image-replacement techniques
      4. 3.4.4. Defining font size and line height
        1. 3.4.4.1. Setting text in pixels
        2. 3.4.4.2. Setting text using keywords and percentages
        3. 3.4.4.3. Setting text using percentages and ems
        4. 3.4.4.4. Setting line height
      5. 3.4.5. Defining font-style, font-weight, and font-variant
      6. 3.4.6. CSS shorthand for font properties
      7. 3.4.7. Controlling text element margins
      8. 3.4.8. Using text-indent for print-like paragraphs
      9. 3.4.9. Setting letter-spacing and word-spacing
      10. 3.4.10. Controlling case with text-transform
      11. 3.4.11. Creating alternatives with classes and spans
      12. 3.4.12. Styling semantic markup
      13. 3.4.13. Creating drop caps and pull quotes using CSS
        1. 3.4.13.1. Adding reference citations
    5. 3.5. Working with lists
      1. 3.5.1. Unordered lists
      2. 3.5.2. Ordered lists
      3. 3.5.3. Definition lists
      4. 3.5.4. Nesting lists
      5. 3.5.5. Styling lists with CSS
        1. 3.5.5.1. list-style-image property
        2. 3.5.5.2. Dealing with font-size inheritance
        3. 3.5.5.3. list-style-position property
        4. 3.5.5.4. list-style-type property
        5. 3.5.5.5. List style shorthand
      6. 3.5.6. List margins and paddingd
      7. 3.5.7. Inline lists for navigation
      8. 3.5.8. Thinking creatively with lists
  10. 4. Working with images
    1. 4.1. Introduction
    2. 4.2. Color theory
      1. 4.2.1. Color wheels
      2. 4.2.2. Additive and subtractive color systems
      3. 4.2.3. Creating a color scheme using a color wheel
      4. 4.2.4. Working with hex
      5. 4.2.5. Web-safe colors
    3. 4.3. Choosing formats for images
      1. 4.3.1. JPEG
      2. 4.3.2. GIF
        1. 4.3.2.1. GIF89: The transparent GIF
      3. 4.3.3. PNG
      4. 4.3.4. Other image formats
    4. 4.4. Common web image gaffes
      1. 4.4.1. Using graphics for body copy
      2. 4.4.2. Not working from original images
      3. 4.4.3. Overwriting original documents
      4. 4.4.4. Busy backgrounds
      5. 4.4.5. Lack of contrast
      6. 4.4.6. Using the wrong image format
      7. 4.4.7. Resizing in HTML
      8. 4.4.8. Not balancing quality and file size
      9. 4.4.9. Text overlays and splitting images
      10. 4.4.10. Stealing images and designs
    5. 4.5. Working with images in XHTML
      1. 4.5.1. Using alt text for accessibility benefits
      2. 4.5.2. Descriptive alt text for link-based images
      3. 4.5.3. Null alt attributes for interface images
      4. 4.5.4. Using alt and title text for tooltips
    6. 4.6. Using CSS when working with images
      1. 4.6.1. Applying CSS borders to images
      2. 4.6.2. Using CSS to wrap text around images
      3. 4.6.3. Displaying random images
  11. 5. 5 USING LINKS AND CREATING NAVIGATION
    1. 5.1. Introduction to web navigation
    2. 5.2. Navigation types
      1. 5.2.1. Inline navigation
      2. 5.2.2. Site navigation
      3. 5.2.3. Search-based navigation
    3. 5.3. Creating and styling web page links
      1. 5.3.1. Absolute links
      2. 5.3.2. Relative links
      3. 5.3.3. Root-relative links
      4. 5.3.4. Internal page links
      5. 5.3.5. Backward compatibility with fragment identifiers
      6. 5.3.6. Top-of-page links
      7. 5.3.7. Link states
      8. 5.3.8. Defining link states with CSS
      9. 5.3.9. Correctly ordering link states
      10. 5.3.10. The difference between a and a:link
      11. 5.3.11. Editing link styles using CSS
        1. 5.3.11.1. The :focus pseudo-class
      12. 5.3.12. Multiple link states: The cascade
      13. 5.3.13. Enhanced link accessibility and usability
        1. 5.3.13.1. The title attribute
        2. 5.3.13.2. Using accesskey and tabindex
        3. 5.3.13.3. Skip navigation links
      14. 5.3.14. Link targeting
    4. 5.4. Links and images
      1. 5.4.1. Adding pop-ups to images
      2. 5.4.2. Image maps
      3. 5.4.3. Faking images maps using CSS
    5. 5.5. Enhancing links with JavaScript
      1. 5.5.1. Creating a pop-up window
      2. 5.5.2. Creating an online gallery
        1. 5.5.2.1. Automated gallery scripts
      3. 5.5.3. Collapsible page content
        1. 5.5.3.1. Enhancing accessibility for collapsible content
        2. 5.5.3.2. Modularizing the collapsible content script
        3. 5.5.3.3. How to find targets for collapsible content scripts
    6. 5.6. Creating navigation bars
      1. 5.6.1. Using lists for navigation bars
      2. 5.6.2. Working with inline lists
      3. 5.6.3. Graphical navigation with rollover effects
    7. 5.7. The dos and don'ts of web navigation
  12. 6. TABLES: HOW NATURE (AND THE W3C) INTENDED
    1. 6.1. The great table debate
    2. 6.2. How tables work
      1. 6.2.1. Adding a border
      2. 6.2.2. Cell spacing and cell padding
      3. 6.2.3. Spanning rows and cells
      4. 6.2.4. Setting dimensions and alignment
        1. 6.2.4.1. Vertical alignment of table cell content
    3. 6.3. Creating accessible tables
      1. 6.3.1. Captions and summaries
      2. 6.3.2. Using table headers
      3. 6.3.3. Row groups
      4. 6.3.4. Scope and headers
      5. 6.3.5. Building a table
    4. 6.4. Styling a table
      1. 6.4.1. Adding borders to tables
      2. 6.4.2. Adding separator stripes
        1. 6.4.2.1. Adding separator stripes with PHP
    5. 6.5. Tables for layout
  13. 7. PAGE LAYOUTS WITH CSS
    1. 7.1. Layout for the Web
      1. 7.1.1. Grids and boxes
      2. 7.1.2. Working with columns
      3. 7.1.3. Fixed vs. liquid design
      4. 7.1.4. Layout technology: Tables vs. CSS
      5. 7.1.5. Logical element placement
    2. 7.2. Workflow for CSS layouts
      1. 7.2.1. Anatomy of a layout: Tables vs. CSS
      2. 7.2.2. Creating a page structure
      3. 7.2.3. Box formatting
    3. 7.3. CSS layouts: A single box
    4. 7.4. Nesting boxes: Boxouts
      1. 7.4.1. The float property
    5. 7.5. Advanced layouts with multiple boxes and columns
      1. 7.5.1. Working with two structural divs
      2. 7.5.2. Placing columns within wrappers and clearing floated content
      3. 7.5.3. Working with sidebars and multiple boxouts
      4. 7.5.4. Creating flanking sidebars
      5. 7.5.5. Automating layout variations
    6. 7.6. Scrollable content areas
      1. 7.6.1. Working with frames
      2. 7.6.2. Working with internal frames (iframes)
      3. 7.6.3. Scrollable content areas with CSS
  14. 8. GETTING USER FEEDBACK
    1. 8.1. Introducing user feedback
      1. 8.1.1. Using mailto: URLs
      2. 8.1.2. Scrambling addresses
    2. 8.2. Working with forms
      1. 8.2.1. Creating a form
      2. 8.2.2. Adding controls
      3. 8.2.3. Improving form accessibility
        1. 8.2.3.1. The label, fieldset, and legend elements
        2. 8.2.3.2. Adding tabindex attributes
    3. 8.3. CSS styling and layout for forms
      1. 8.3.1. Adding styles to forms
      2. 8.3.2. Advanced form layout with CSS
    4. 8.4. Sending feedback
      1. 8.4.1. Configuring nms FormMail
        1. 8.4.1.1. Multiple recipients
      2. 8.4.2. Script server permissions
      3. 8.4.3. Sending form data using PHP
      4. 8.4.4. Using e-mail to send form data
    5. 8.5. A layout for contact pages
    6. 8.6. Using microformats to enhance contact information
      1. 8.6.1. Online microformat contacts resources
    7. 8.7. Contact details structure redux
  15. 9. DEALING WITH BROWSER QUIRKS
    1. 9.1. The final test
    2. 9.2. Weeding out common errors
    3. 9.3. A browser test suite
      1. 9.3.1. Installing multiple versions of browsers
    4. 9.4. Dealing with Internet Explorer bugs
      1. 9.4.1. Outdated methods for hacking CSS documents
      2. 9.4.2. Conditional comments
      3. 9.4.3. Dealing with rounding errors
      4. 9.4.4. Alt text overriding title text
      5. 9.4.5. Common fixes for Internet Explorer 5.x
        1. 9.4.5.1. Box model fixes (5.x)
        2. 9.4.5.2. Centering layouts
        3. 9.4.5.3. The text-transform bug
        4. 9.4.5.4. Font-size inheritance in tables
      6. 9.4.6. Common fixes for Internet Explorer 6 and 5
        1. 9.4.6.1. Fixing min-width and max-width
        2. 9.4.6.2. Double-float margin bug
        3. 9.4.6.3. Expanding boxes
        4. 9.4.6.4. The 3-pixel text jog
        5. 9.4.6.5. Whitespace bugs in styled lists
        6. 9.4.6.6. Problems with iframes
        7. 9.4.6.7. Ignoring the abbr element
        8. 9.4.6.8. PNG replacement
        9. 9.4.6.9. Problems with CSS hover menus (drop-downs)
      7. 9.4.7. Fixing hasLayout problems (the peekaboo bug)
    5. 9.5. Targeting other browsers
  16. 10. PUTTING EVERYTHING TOGETHER
    1. 10.1. Putting the pieces together
    2. 10.2. Managing style sheets
    3. 10.3. Creating a portfolio layout
      1. 10.3.1. About the design and required images
      2. 10.3.2. Putting the gallery together
      3. 10.3.3. Styling the gallery
      4. 10.3.4. Hacking for Internet Explorer
    4. 10.4. Creating an online storefront
      1. 10.4.1. About the design and required images
      2. 10.4.2. Putting the storefront together
      3. 10.4.3. Styling the storefront
      4. 10.4.4. Fonts and fixes for the storefront layout
    5. 10.5. Creating a business website
      1. 10.5.1. About the design and required images
      2. 10.5.2. Putting the business site together
      3. 10.5.3. Styling the business website
    6. 10.6. Working with style sheets for print
  17. A. XHTML reference
    1. A.1. Standard attributes
      1. A.1.1. Core attributes
      2. A.1.2. Keyboard attributes
      3. A.1.3. Language attributes
    2. A.2. Event attributes
      1. A.2.1. Core events
      2. A.2.2. Form element events
      3. A.2.3. Window events
    3. A.3. XHTML elements and attributes
  18. B. WEB COLOR REFERENCE
    1. B.1. Color values
      1. B.1.1. Web-safe colors
    2. B.2. Color names
  19. C. ENTITIES reference
    1. C.1. Characters used in XHTML
    2. C.2. Punctuation characters and symbols
      1. C.2.1. Quotation marks
      2. C.2.2. Spacing and nonprinting characters
      3. C.2.3. Punctuation characters
      4. C.2.4. Symbols
    3. C.3. Characters for European languages
    4. C.4. Currency signs
    5. C.5. Mathematical, technical, and Greek characters
      1. C.5.1. Common mathematical characters
      2. C.5.2. Advanced mathematical and technical characters
      3. C.5.3. Greek characters
    6. C.6. Arrows, lozenge, and card suits
    7. C.7. Converting the nonstandard Microsoft set
  20. D. CSS REFERENCE
    1. D.1. The CSS box model
    2. D.2. Common CSS values
    3. D.3. CSS properties and values
    4. D.4. Basic selectors
    5. D.5. Pseudo-classes
    6. D.6. Pseudo-elements
    7. D.7. CSS boilerplates and management
      1. D.7.1. Modular style sheets
  21. E. Browser Guide
    1. E.1. Internet Explorer
    2. E.2. Opera
    3. E.3. Safari
    4. E.4. Other browsers
  22. F. Software Guide
    1. F.1. Web design software
    2. F.2. Graphic design software
    3. F.3. The author's toolbox