Books & Videos

Table of Contents

  1. Chapter 1 Using HTML Basics

    1. Introduction

    2. Picking a Text Editor

    3. Coding a Basic HTML Page

    4. Understanding DOCTYPEs and Effects on Browser Layout

    5. Marking Up Headers

    6. Making Appropriate Quotations

    7. Adding an Image

    8. Adding Audio with HTML5

    9. Incorporating Video with HTML5

    10. Using strong and em Effectively

    11. Creating Lists

    12. Making a Link to a Web Page

    13. Coding Tables

    14. Creating an HTML vCard (hCard)

    15. Marking Up an Event (hCalendar)

    16. Validating HTML

  2. Chapter 2 CSS Basics

    1. Introduction

    2. Applying CSS Rules to a Web Page

    3. Using Basic Selectors to Apply Styles

    4. Applying Child Selectors

    5. Applying Adjacent Selectors

    6. Applying Attribute Selectors

    7. Using Pseudo-Classes

    8. Using Pseudo-Elements

    9. Determining When to Use Class and ID Selectors

    10. Understanding CSS Properties

    11. Understanding the Box Model

    12. Associating Styles to a Web Page

    13. Understanding the Origin

    14. Understanding the Sort Order Within CSS

    15. Using !important to Override Certain CSS Rules

    16. Clarifying Specificity

    17. Setting Up Different Types of Stylesheets

    18. Adding Comments Within Stylesheets

    19. Organizing the Contents of a Stylesheet

    20. Working with Shorthand Properties

    21. Setting Up an Alternate Stylesheet

    22. Using Floats

    23. Using Self-Clearing Floated Elements

    24. Using Absolute Positioning

    25. Using Relative Positioning

    26. Using Shackling Positioning

    27. Stacking Elements with z-index

    28. Validating CSS Rules

  3. Chapter 3 Web Typography

    1. Introduction

    2. Specifying Fonts

    3. Using Web-Safe Fonts

    4. Setting an Ampersand Flourish

    5. Embedding Font Files

    6. Forcing a Break on Really Long Words

    7. Specifying Font Measurements and Sizes

    8. Gaining More Cross-Browser Consistency with Font Sizes

    9. Setting Hyphens, Em Dashes, and En Dashes

    10. Centering Text

    11. Setting Text to Be Justified

    12. Indicating an Overflow of Text with an Ellipsis

    13. Removing Space Between Headings and Paragraphs

    14. Setting a Simple Initial Cap

    15. Setting a Larger, Centered Initial Cap

    16. Setting an Initial Cap with Decoration (Imagery)

    17. Creating a Heading with Stylized Text

    18. Creating a Heading with Stylized Text and Borders

    19. Stylizing a Heading with Text and an Image

    20. Creating a Pull Quote with HTML Text

    21. Placing a Pull Quote to the Side of a Column

    22. Creating a Pull Quote with Borders

    23. Creating a Pull Quote with Images

    24. Setting the Indent in the First Line of a Paragraph

    25. Setting the Indent of Entire Paragraphs

    26. Creating a Hanging Indent

    27. Styling the First Line of a Paragraph

    28. Styling the First Line of a Paragraph with an Image

    29. Creating a Highlighted Text Effect

    30. Changing the Text Selection Color

    31. Changing Line Spacing

    32. Adding a Graphic Treatment to HTML Text

    33. Placing a Shadow Behind Text

    34. Adjusting the Space Between Letters and Words

    35. Applying Baseline Rhythm on Web Typography

    36. Styling Superscripts and Subscripts Without Messing the Text Baseline

    37. Setting Up Multiple Columns of Text

  4. Chapter 4 Images

    1. Introduction

    2. Transforming Color Images to Black and White in IE with CSS

    3. Setting a Border Around an Image

    4. Setting a Rounded Border Around an Image

    5. Removing Borders Set on Images by Default in Some Browsers

    6. Setting a Background Image

    7. Creating a Line of Background Images

    8. Positioning a Background Image

    9. Using Multiple Background Images on One HTML Element

    10. Setting Images on a Border

    11. Creating a Stationary Background Image

    12. Stretching Images As the Browser Resizes

    13. Stretching an Image Across the Entire Browser Window

    14. Making Images Scalable

    15. Setting How a Browser Renders an Image

    16. Rotating Images with CSS

    17. Setting Gradients with CSS

    18. Creating Transparent PNG Images for IE6 and Later

    19. Using Transparent PNG Images with JavaScript

    20. Overlaying HTML Text on an Image

    21. Replacing HTML Text with an Image

    22. Building a Panoramic Image Presentation

    23. Combining Different Image Formats

    24. Rounding Corners with Fixed-Width Columns

    25. Rounding Corners (Sliding Doors Technique)

    26. Rounding Corners (Mountaintop Technique)

    27. Rounding Corners with JavaScript

    28. Setting a Shadow on an Element with CSS

    29. Placing a Drop Shadow Behind an Image

    30. Placing a Smooth Drop Shadow Behind an Image

    31. Making Word Balloons

    32. Hindering People from Stealing Your Images

    33. Inserting Reflections on Images Automatically

    34. Using Image Sprites

    35. Clipping Background Images

    36. Applying Masks to Images and Borders

  5. Chapter 5 Page Elements

    1. Introduction

    2. Eliminating Page Margins

    3. Resetting Browser-Style Defaults for Elements

    4. Coloring the Scroll Bar in IE

    5. Techniques for Centering Elements on a Web Page

    6. Placing a Page Border

    7. Placing a Border Around the Browser’s Viewport

    8. Customizing a Horizontal Rule

    9. Adding a Lightbox

    10. Changing the Opacity on Elements

    11. Adjusting the Opacity of Background Colors

  6. Chapter 6 Lists

    1. Introduction

    2. Changing the Format of a List

    3. Changing the Color of a List Bullet

    4. Writing Cross-Browser Indentation in Lists

    5. Placing Dividers Between List Items

    6. Creating Custom Text Markers for Lists

    7. Creating Custom Image Markers for Lists

    8. Inserting Larger Custom Image Markers for Lists

    9. Making a List Presentation Rich with Imagery

    10. Creating Inline Lists

    11. Making Hanging Indents in a List

    12. Moving the Marker Inside the List

    13. Styling a Definition List

    14. Styling a Screenplay with the HTML5 dialog Element

    15. Turning a List into a Directory Tree

    16. Creating a Star Ranking System

  7. Chapter 7 Links and Navigation

    1. Introduction

    2. Easily Generating Text-Based Menus and Submenus

    3. Removing Underlines from Links (and Adding Other Styles)

    4. Changing Link Colors

    5. Removing Dotted Lines When Clicking on a Link in Internet Explorer

    6. Changing Link Colors in Different Sections of a Page

    7. Placing Icons at the End of Different Kinds of Links

    8. Changing Cursors

    9. Creating Rollovers Without JavaScript

    10. Animating Rollovers on Links with CSS3 Transitions

    11. Creating Text Navigation Menus and Rollovers

    12. Adding Submenus to Vertical Menus

    13. Building Horizontal Navigation Menus

    14. Building Horizontal Navigation Menus with Drop-Down Menus

    15. Building a Navigation Menu with Access Keys

    16. Creating Breadcrumb Navigation

    17. Creating Image-Based Rollovers

    18. Creating Collapsible Menus

    19. Creating Contextual Menus

    20. Making Tool Tips with the title Attribute

    21. Designing a Dynamic Tabbed Menu

    22. Changing Styles on Anchored Links

  8. Chapter 8 Forms

    1. Introduction

    2. Modifying the Spacing Around a Form

    3. Removing the Space Around a Form

    4. Setting Styles for Input Elements

    5. Changing Styles on Form Elements When a User Clicks on Them

    6. Applying Different Styles to Different Input Elements in the Same Form

    7. Setting Styles for textarea Elements

    8. Setting Styles for select and option Elements

    9. Creating a Macintosh-Styled Search Field

    10. Styling Form Buttons

    11. Creating an Image Submit Button

    12. Setting Up a Submit-Once-Only Button

    13. Creating a Submit Button That Looks Like HTML Text

    14. Making an HTML Text Link Operate Like a Submit Button

    15. Designing a Web Form Without Tables

    16. Designing a Two-Column Form Without Tables

    17. Integrating Form Feedback with a Form

    18. Styling Access Keys in Web Forms

    19. Grouping Common Form Elements

    20. Entering Data into a Form That Is Similar to a Spreadsheet

    21. Sample Design: A Login Form

    22. Sample Design: A Registration Form

  9. Chapter 9 Tables

    1. Introduction

    2. Setting the Borders and Cell Padding for Tables

    3. Setting the Cell Spacing

    4. Setting the Style for Captions

    5. Setting the Styles Within Table Cells

    6. Setting the Styles for Table Header Elements

    7. Removing Gaps from Images Placed in Table Cells

    8. Eliminating Gaps Between Table Cells

    9. Creating Alternating Background Colors in Table Rows

    10. Adding a Highlighting Effect on a Table Row

    11. Sample Design: An Elegant Calendar

  10. Chapter 10 Designing Web Pages for Printing

    1. Introduction

    2. Applying a Stylesheet for Printing to a Web Page

    3. Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages

    4. Making a Web Form Print-Ready

    5. Displaying URIs After Links

    6. Inserting Special Characters Before Links

    7. Setting Page Breaks for a Printed Document

    8. Sample Design: A Printer-Friendly Page with CSS

  11. Chapter 11 Page Layouts

    1. Introduction

    2. Building a One-Column Layout

    3. Building a Two-Column Layout

    4. Building a Two-Column Layout with Fixed-Width Columns

    5. Creating a Flexible Multicolumn Layout with Floats

    6. Creating a Fixed-Width Multicolumn Layout with Floats

    7. Creating a Flexible Multicolumn Layout with Positioning

    8. Creating a Fixed-Width Multicolumn Layout with Positioning

    9. Using Floats to Display Columns in Any Order

    10. Designing an Asymmetric Layout

    11. Designing Resolution-Independent Layouts

  12. Chapter 12 Hacks, Workarounds, and Troubleshooting

    1. Introduction

    2. Overriding Inline Styles

    3. Diagnosing CSS Bugs and Browser Issues

    4. Using Bookmarklets to Troubleshoot CSS

    5. Using Browser Extensions to Troubleshoot CSS

    6. Patching Up Internet Explorer 6

    7. Patching Up Internet Explorer 6 with JavaScript

    8. Using Conditional Comments to Deliver Styles to Different Versions of Internet Explorer

    9. Using CSS Filters to Deliver CSS Rules to Almost Any Browser

    10. Setting Up an Intelligent CSS Delivery System for Modern Browsers

    11. Testing a Site Design on More Than One Platform with Only One Computer

    12. Testing a Website with a Text Browser

  13. Chapter 13 Designing with CSS

    1. Introduction

    2. Enlarging Text Excessively

    3. Creating Unexpected Incongruity

    4. Combining Unlike Elements to Create Contrast

    5. Leading the Eye with Contrast

    6. Checking for Enough Color Contrast

    7. Emphasizing a Quotation with Smart Quotes

    8. Setting a Moving Background Scene When a User Resizes the Window

    9. Adding Animation to Elements on a Page

    10. Creating a Fireworks Display As a User Scrolls

    11. Customizing the View Source Stylesheet for Firefox

    12. Designing with Grids (CSS Frameworks)

    13. Sample Design: A Cohesive Web Design

    14. Sample Design: The U.S. Flag

  14. Chapter 14 Interacting with JavaScript

    1. Introduction

    2. Determining Whether JavaScript Is Available Within a Browser

    3. Applying a Different Stylesheet Based on the Time of Day

    4. Redirecting to a Mobile Site Based on the Browser’s Screen Width

    5. Adding a JavaScript Framework to a Web Page

    6. Using CSS3 Selectors in IE6 and IE7

    7. Zebra-Striping an HTML Table with JavaScript

    8. Highlighting a Table Row with Mouseovers

    9. Adding Effects to Simple Image Rollovers

    10. Making a Row of Elements with a Variable Amount of Content the Same Height

    11. Setting a Link to Open a New Window

    12. Making an Entire div Element Clickable

    13. Supporting Transparent PNGs in IE6 with JavaScript

    14. Delivering HTML5 and CSS3 to Browsers That Can Handle Them

  1. Appendix Resources

    1. General HTML and CSS Instruction

    2. Design Resources

    3. Discussion Groups

    4. References

    5. Tools

  2. Appendix CSS 2.1 Properties and Proprietary Extensions

  3. Appendix CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements

  4. Appendix CSS3 Selectors and Pseudo-Classes

  5. Appendix Styling of Form Elements

    1. Anatomy of the Appendix

    2. Tested CSS Properties

  6. Colophon