The CSS Anthology, Second Edition

The CSS Anthology, Second Edition

by Rachel Andrew
Released May 2007
Publisher(s): SitePoint
ISBN: 9780975841983

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

A practical guide on CSS (Cascading Style Sheets) for professionals and novices, that can be used both as a tutorial and read cover-to-cover, or as a handy and practical reference book to common problems, solutions and effects. The 2nd edition is now full-color throughout and is completely updated and revised with the latest tips & tricks covering everything from CSS layouts to rounded corners and tabbed navigation systems.

Table of contents

  1. The CSS Anthology (1/2)
  2. The CSS Anthology (2/2)
  3. Table of Contents (1/2)
  4. Table of Contents (2/2)
  5. Preface
    1. Who Should Read this Book?
    2. What’s Covered in this Book?
    3. The Book’s Web Site
      1. The Code Archive
      2. Updates and Errata
    4. The SitePoint Forums
    5. The SitePoint Newsletters
    6. Your Feedback
    7. Acknowledgments
    8. Conventions Used in this Book
      1. Markup Samples
      2. Tips, Notes, and Warnings
  6. Getting Started with CSS
    1. Defining Styles with CSS
      1. lnline Styles
      2. Embedded Styles
      3. External Style Sheets
    2. CSS Selectors
      1. Type Selectors
      2. Class Selectors
      3. ID Selectors
      4. Descendant Selectors
      5. Child Selectors
      6. Pseudo-class Selectors
    3. Summary
  7. Text Styling and Other Basics
    1. How do I replace tags with CSS?
      1. Solution
    2. Should I use pixels, points, ems, or something else to set font sizes?
      1. Solution (1/2)
      2. Solution (2/2)
        1. Sizing Fonts Using Units of Measurement
          1. Points and Picas
          2. Pixels
          3. Ems
          4. Exes
          5. Percentages
        2. Sizing Fonts Using Keywords
          1. Absolute Keywords
          2. Relative Keywords
        3. Relative Sizing and Inheritance
      3. Discussion
    3. How do I set my text to display in a certain font?
      1. Solution
      2. Discussion
    4. How do I remove underlines from my links?
      1. Solution
      2. Discussion
        1. When is Removing Underlines a Bad Idea?
    5. How do I create a link that changes color when the cursor moves over it?
      1. Solution
    6. How do I display two different styles of link on one page?
      1. Solution
    7. How do I style the first item in a list differently from the others?
      1. Solution
        1. Using first-child
        2. Using a Class Selector
    8. How do I add a background color to a heading?
      1. Solution
    9. How do I style headings with underlines?
      1. Solution
    10. How do I remove the large gap between an h1 element and the following paragraph?
      1. Solution
        1. Using an Adjacent Selector
        2. Applying a Negative Margin
    11. How do I highlight text on the page?
      1. Solution
    12. How do I alter the line height (leading) on my text?
      1. Solution
    13. How do I justify text?
      1. Solution
      2. Discussion
    14. How do I style a horizontal rule?
      1. Solution
    15. How do I indent text?
      1. Solution
      2. Discussion
    16. How do I center text?
      1. Solution
    17. How do I change text to all capitals using CSS?
      1. Solution
      2. Discussion
    18. How do I change or remove the bullets on list items?
      1. Solution
      2. Discussion
    19. How do I use an image for a list-item bullet?
      1. Solution
    20. How do I remove the indented left-hand margin from a list?
      1. Solution
      2. Discussion
    21. How do I display a list horizontally?
      1. Solution
    22. How do I add comments to my CSS file?
      1. Solution
    23. How do I remove page margins without adding attributes to the tag?
      1. Solution
    24. How can I remove browsers’ default padding and margins from all elements?
      1. Solution
      2. Discussion
    25. Summary
  8. CSS and Images
    1. How do I add borders to images?
      1. Solution
    2. How do I use CSS to replace the deprecated HTML border attribute on images?
      1. Solution
    3. How do I set a background image for my page using CSS?
      1. Solution
      2. Discussion
    4. How do I position my background image?
      1. Solution
      2. Discussion
        1. Keywords
        2. Percentage Values
        3. Unit Values
    5. How do I fix my background image in place when the page is scrolled?
      1. Solution
      2. Discussion
    6. Can I set a background image on any element?
      1. Solution
      2. Discussion
    7. How do I place text on top of an image?
      1. Solution
      2. Discussion
    8. How do I add more than one background image to my document?
      1. Solution
      2. Discussion
    9. How can I use transparency in my pages?
      1. Solution
      2. Discussion
    10. Summary
  9. Navigation
    1. How do I replace image-based navigation with CSS?
      1. Solution
      2. Discussion
    2. How do I style a structural list as a navigation menu?
      1. Solution
      2. Discussion
    3. How do I use CSS to create rollover navigation without images or JavaScript?
      1. Solution
      2. Discussion
    4. Can I use CSS and lists to create a navigation system with subnavigation?
      1. Solution
      2. Discussion
    5. How do I make a horizontal menu using CSS and lists?
      1. Solution
      2. Discussion
    6. How do I create button-like navigation using CSS?
      1. Solution
      2. Discussion
    7. How do I create tabbed navigation with CSS?
      1. Solution
      2. Discussion (1/2)
      3. Discussion (2/2)
    8. How do I change the cursor type?
      1. Solution
      2. Discussion
    9. How do I create rollovers in CSS without using JavaScript?
      1. Solution
      2. Discussion
    10. How can I create pure CSS drop-down menus?
      1. Solution
      2. Discussion
    11. Summary
  10. Tabular Data
    1. How do I lay out spreadsheet data using CSS?
      1. Solution
      2. Discussion
    2. How do I ensure that my tabular data is accessible as well as attractive?
      1. Solution
      2. Discussion
        1. The summary Attribute of the table Element
        2. The caption Element
        3. The th Element
    3. How do I add a border to a table without using the HTML border attribute?
      1. Solution
      2. Discussion
    4. How do I stop spaces appearing between the cells of my table when I’ve added borders using CSS?
      1. Solution
    5. How do I display spreadsheet data in an attractive and usable way?
      1. Solution
      2. Discussion
    6. How do I display table rows in alternating colors?
      1. Solution
      2. Discussion
    7. How do I change a row’s background color when the cursor hovers over it?
      1. Solution
      2. Discussion
    8. How do I display table columns in alternating colors?
      1. Solution
      2. Discussion
    9. How do I display a calendar using CSS?
      1. Solution
      2. Discussion (1/2)
      3. Discussion (2/2)
    10. Summary
  11. Forms and User Interfaces
    1. How do I style form elements using CSS?
      1. Solution
      2. Discussion
    2. How do I apply different styles to fields in a single form?
      1. Solution
      2. Discussion
    3. How do I stop my form creating additional white space and line breaks?
      1. Solution
    4. How do I make a Submit button look like text?
      1. Solution
    5. How do I ensure that users with text-only devices understand how to complete my form?
      1. Solution
      2. Discussion
    6. How do I lay out a two-column form using CSS instead of a table?
      1. Discussion
    7. How do I group related fields?
      1. Solution
      2. Discussion
    8. How do I style accesskey hints?
      1. Solution
      2. Discussion
    9. How do I use different colored highlights in a select menu?
      1. Solution
    10. I have a form that allows users to enter data as if into a spreadsheet. How do I style it with CSS?
      1. Discussion
    11. How do I highlight the form field that the user clicks into?
      1. Solution
      2. Discussion
    12. Summary
  12. Cross-browser Techniques
    1. In which browsers should I test my site?
      1. Solution
    2. I only have access to one operating system. How can I test in more of these browsers?
      1. Solution
        1. Windows Users
          1. Testing on Mac Browsers
          2. Testing on Linux Browsers
            1. Linux Live CDs
            2. Dual Booting with Linux
        2. Mac Users
          1. Testing on Windows Browsers
            1. Parallels
            2. Boot Camp
            3. Virtual PC for Mac
        3. Linux Users
          1. Testing on Mac Browsers
          2. Testing on Windows Browsers
            1. VMWare
            2. Wine
            3. Dual Booting
    3. Is there a service that can show me how my site looks in various browsers?
      1. Solution
      2. Discussion
    4. Can I install multiple versions of Internet Explorer on Windows?
      1. Solution
    5. How do I display a basic style sheet for really old browsers?
      1. Solution
      2. Discussion
    6. How do I hide some CSS from a particular browser?
      1. Solution
        1. The Box Model Hack
      2. Discussion
        1. Choosing a Hack
        2. Commenting Hacks
    7. How can I send different styles to a particular browser?
      1. Solution
        1. CSS Hacks or Filters
        2. Conditional Comments
      2. Discussion
    8. How do I achieve alpha transparency in Internet Explorer 6?
      1. Solution
      2. Discussion
    9. What is DOCTYPE switching and how do I use it?
      1. Solution
      2. Discussion
    10. I think I’ve found a CSS bug! What do I do?
      1. Solution
    11. Some of my content is appearing and disappearing in Internet Explorer 6! What should I do?
      1. Solution
        1. Isolating the Problem
        2. Searching the Web
    12. What do the error and warning messages in the W3C Validator mean?
      1. Solution
        1. Errors and Warnings
    13. Summary
  13. Accessibility and Alternative Devices
    1. How do I test my site in a text-only browser?
      1. Solution
        1. Linux/Unix Users
        2. Windows Users
        3. Mac OS X Users
      2. Discussion
    2. How do I test my site in a screen reader?
      1. Solution
      2. Discussion
    3. How do I create style sheets for specific devices, such as screen readers or WebTV?
      1. Solution
      2. Discussion
    4. How do I create a print style sheet?
      1. Solution
      2. Discussion (1/2)
      3. Discussion (2/2)
        1. Linking a Print Style Sheet
        2. Creating the Print Styles
    5. How do I add alternative style sheets to my site?
      1. Solution
      2. Discussion
        1. Zoom Layouts
    6. How do I make a style sheet switcher?
      1. Solution
      2. Discussion
    7. How do I use alternative style sheets without duplicating code?
      1. Solution
      2. Discussion
    8. Summary
  14. CSS Positioning and Layout
    1. How do I decide when to use a class and when to use an ID?
      1. Solution
    2. Can I make an inline element display as if it were block-level, and vice-versa?
      1. Solution
      2. Discussion
    3. How do margins and padding work in CSS?
      1. Solution
      2. Discussion
    4. How do I make text wrap around an image without using the HTML align attribute?
      1. Solution
      2. Discussion
    5. How do I stop the next element moving up when I use float?
      1. Solution
      2. Discussion
    6. How do I align a site’s logo and slogan to the left and right without using a table?
      1. Solution
      2. Discussion
    7. How do I set an item’s position on the page using CSS?
      1. Solution
      2. Discussion
    8. How do I center a block on the page?
      1. Solution
      2. Discussion
    9. How do I create a liquid, two-column layout with the menu on the left, and the content on the right?
      1. Solution
      2. Discussion
        1. Sizing and Positioning the Menu
        2. Positioning the Content
    10. Can I reverse this layout and put the menu on the right?
      1. Solution
      2. Discussion
    11. How do I create a fixed-width, centered, two-column layout?
      1. Solution
      2. Discussion (1/2)
      3. Discussion (2/2)
    12. How do I create a full-height column?
      1. Solution
      2. Discussion
    13. How do I add a drop shadow to my layout?
      1. Solution
    14. How do I create a three-column CSS layout?
      1. Solution
      2. Discussion
    15. How do I add a footer to a liquid layout?
      1. Solution
    16. How do I display a thumbnail gallery without using a table?
      1. Solution
      2. Discussion
    17. How do I create boxes with rounded corners?
      1. Solution 1: The Mozilla border-radius Property
      2. Solution 2: Images and Additional Markup
      3. Solution 3: Using JavaScript
      4. Discussion
      5. Summary
  15. Index (1/4)
  16. Index (2/4)
  17. Index (3/4)
  18. Index (4/4)

Product information

  • Title: The CSS Anthology, Second Edition
  • Author(s): Rachel Andrew
  • Release date: May 2007
  • Publisher(s): SitePoint
  • ISBN: 9780975841983