The CSS anthology : 101 essential tips, tricks & hacks

# Preface

* Who Should Read This Book?
* What’s Covered in This Book?
* The Book’s Website
* The SitePoint Forums
* The SitePoint Newsletters
* Your Feedback
* Acknowledgements

1 Getting Started with CSS

* The Problem with HTML
* Defining Styles with CSS
* CSS Selectors
* Summary

2 Text Styling and Other Basics

* How do I replace font tags with CSS?
* Should I use pixels, points, ems or something else for font sizes?
* How do I specify that my text is shown in a certain font?
* How do I remove underlines from my links?
* How do I create a link that changes color on mouseover?
* How do I display two different styles of link on one page?
* How do I add a background color to a heading?
* How do I style headings with underlines?
* How do I get rid of the large gap between an h1 tag and the following paragraph?
* How do I highlight text on the page without using font tags?
* How do I alter the line-height (leading) on my text?
* How do I justify text?
* How do I style a horizontal rule?
* How do I indent text?
* How do I center text?
* How do I change text to all-capitals using CSS?
* How do I change or remove the bullets on list items?
* How do I use an image for a list item bullet?
* How do I remove the indented left margin from a list?
* How do I display a list horizontally?
* How do I add comments to my CSS file?
* How do I get rid of the page margins without adding attributes to the body tag?
* Summary

3 CSS and Images

* How do I add a border to images?
* How do I use CSS to replace the deprecated HTML border attribute on images?
* How do I set a background image for my page with CSS?
* How do I position my background image?
* How do I make a background image that stays still while the text moves when the page is scrolled?
* How do I set background images for other elements?
* How do I place text on top of an image?
* How do I add more than one background image to my document?
* Summary

4 Navigation

* How do I replace image-based navigation with CSS?
* How do I style a structural list as a navigation menu?
* How do I use CSS to create rollover navigation without images or JavaScript?
* Can I use CSS and lists to create a navigation system with sub-navigation?
* How do I make a horizontal menu using CSS and lists?
* How do I create button-like navigation using CSS?
* How do I create tabbed navigation with CSS?
* How do I change the cursor type?
* How do I create rollovers in CSS without JavaScript?
* Summary

5 Tabular Data

* How do I lay out spreadsheet data using CSS?
* How do I ensure that my tabular data is accessible as well as attractive?
* How do I add a border to a table without using the HTML border attribute?
* How do I stop spaces appearing between the cells of my table when I’ve added borders using CSS?
* How do I display spreadsheet data in an attractive and usable way?
* How do I display table rows in alternating colors?
* How do I change a table row’s background color on hover?
* How do I display a calendar using CSS?
* Summary

6 Forms and User Interfaces

* How do I style form elements using CSS?
* How do I apply different styles to fields in a single form?
* How do I stop my form creating additional white space and line breaks?
* How do I make a submit button look like text?
* How do I ensure that users with text-only devices understand how to complete my form?
* How do I lay out a two-column form using CSS instead of a table?
* How do I group related fields?
* How do I style accesskey hints?
* How do I use different colored highlights in a select menu?
* I have a form that allows users to enter data as if into a spreadsheet. How do I style this with CSS?
* How do I highlight the form field that the user clicks into?
* Summary

7 Browser and Device Support

* In which browsers should I test my site?
* I only have access to one operating system. How can I test in more of these browsers?
* Is there a service that can show me how my site looks in various browsers?
* Can I install multiple versions of Internet Explorer in Windows?
* How do I test my site in a text-only browser?
* How do I test my site in a screen reader?
* How do I hide CSS from Netscape 4?
* How do I display different styles for Netscape 4?
* How do I add a message, which displays only in version 4 browsers, to explain why my site looks so plain?
* How do I hide CSS from other browsers?
* Why does my site look different in Internet Explorer 6 than it does in Mozilla?
* I think I’ve found a CSS bug! What do I do?
* Some of my content is appearing and disappearing in Internet Explorer 6! What should I do?
* What do the error and warning messages in the W3C Validator mean?
* How do I create style sheets for specific devices, such as screen readers or WebTV?
* How do I create a print style sheet?
* Some browsers allow users to choose a style sheet. How do I add alternate style sheets to my site?
* How do I make a style sheet switcher?
* How do I use alternate style sheets without duplicating code?
* Summary

8 CSS Positioning and Layout

* How do I decide when to use a class and when to use an ID?
* Can I make an inline element display as if it were block-level, and viceversa?
* How do margins and padding work in CSS?
* How do I get text to wrap around an image without using the HTML align attribute?
* How do I stop the next element moving up when I use float?
* How do I align my logo and strapline to the left and right without using a table?
* How do I set an item’s position on the page using CSS?
* How do I center a block on the page?
* How do I create a liquid, two-column layout with the menu on the left, and the content on the right?
* Can I reverse this layout and put the menu on the right?
* How do I create a fixed-width, centered, two-column layout?
* How do I create a three-column CSS layout?
* How do I add a footer that works well, using CSS?
* How do I display a thumbnail gallery without using a table?
* Summary

9 Experimentation, Browser Specific CSS, and Future Techniques

* How do I build those colored scrollbars?
* How do I create a menu that stays fixed while the page scrolls below it?
* How do I get a fixed menu to work in Internet Explorer?
* Can I create a page footer that remains fixed in position, like a frame, using CSS?
* Can I create pure CSS drop-down menus?
* Can you create rounded corners on CSS borders?
* How do I create cross-browser, rounded corners using CSS?
* How do I make elements translucent both in Mozilla-based browsers, and in Internet Explorer?
* How do I use CSS to indicate to visitors which links are external?
* Can I use CSS to insert text into my document?
* How do I style the first line or first letter of a block?
* Is it a bad thing to use effects that don’t work in some browsers?
* Summary