Product Overview
Looking for the old edition of “The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 3rd Edition?”
Download the code archive or view errata of the old edition here.
The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 3rd Edition
Table of Contents
- Here’s a look at the table of contents:
- Preface
- Who Should Read this Book?
- What’s Covered in this Book?
- The Book’s Web Site
- The Code Archive
- Updates and Errata
- The SitePoint Forums
- The SitePoint Newsletters
- The SitePoint Podcast
- Your Feedback
- Acknowledgments
- Conventions Used in This Book
- Markup Samples
- Tips, Notes, and Warnings
- Making a Start with CSS
- How do I define styles with CSS?
- What are CSS Selectors and how do I use them effectively?
- How does the browser know which styles to apply?
- Summary
- Text Styling and Other Basics
- How do I set my text to display in a certain font?
- Should I use pixels, points, ems, or another unit identifier to set font sizes?
- How do I remove underlines from my links?
- How do I create a link that changes color when the cursor moves over it?
- How do I display two different styles of link on one page?
- How do I style the first item in a list differently from the others?
- How do I add a background color to a heading?
- How do I style headings with underlines?
- How do I remove the large gap between an
h1element and the following paragraph? - How do I highlight text on the page?
- 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-hand margin from a list?
- How do I display a list horizontally?
- How do I remove page margins?
- How can I remove browsers’ default padding and margins from all elements?
- How do I add comments to my CSS file?
- Summary
- CSS and Images
- How do I add borders to images?
- How do I use CSS to remove the blue border around my navigation images?
- How do I set a background image for my page using CSS?
- How do I control how my background image repeats?
- How do I position my background image?
- How do I fix my background image in place when the page is scrolled?
- Can I set a background image on any element?
- How do I place text on top of an image?
- How do I add more than one background image to my document?
- How can I use transparency in my pages?
- Can I create more complex image borders, such as a double border?
- Summary
- Navigation
- 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 subnavigation?
- 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 can I visually indicate which links are external to my site?
- How do I change the cursor type?
- How do I create rollover images in my navigation without using JavaScript?
- How should I style a site map?
- Can I create a drop-down menu using only CSS?
- How can I use CSS to keep image-based navigation clean and accessible?
- Summary
- 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
borderattribute? - 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?
- The Way of the Future
- How do I change a row’s background color when the cursor hovers over it?
- How do I display table columns in alternating colors?
- How do I display a calendar using CSS?
- Summary
- 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 from creating additional whitespace 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
selectmenu? - How do I style a form with CSS that allows users to enter data as if into a spreadsheet?
- How do I highlight the form field that the user clicks into?
- Summary
- Cross-browser Techniques
- In which browsers should I test my site?
- How can I test in many browsers when I only have access to one operating system?
- Is there a service that can show me how my site looks in various browsers?
- Can I install multiple versions of Internet Explorer on Windows?
- How do I decide which browsers should get the full design experience?
- How do I display a basic style sheet for really old browsers?
- What is quirks mode and how do I avoid it?
- How can I specify different styles for Internet Explorer 6 and 7?
- How do I deal with the most common issues in IE6 and 7
- How do I achieve PNG image transparency in Internet Explorer 6?
- How do I ensure my standards-compliant web site displays correctly in Internet Explorer 8?
- What do I do if I think I’ve found a CSS bug?
- What do the error and warning messages in the W3C Validator mean?
- Summary
- Accessibility and Alternative Devices
- What should I be aware of in terms of accessibility when using CSS?
- How do I test my site in a text-only browser?
- How do I test my site in a screen reader?
- How do I create style sheets for specific devices?
- How do I create a print style sheet?
- How do I add alternative style sheets to my site?
- Should I add font-size widgets or other style sheet switchers to my site?
- How do I use alternative style sheets without duplicating code?
- Summary
- 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 vice-versa?
- How do margins and padding work in CSS?
- How do I wrap text around an image?
- How do I stop the next element moving up when I use float?
- How do I align a site’s logo and slogan to the left and right?
- 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 boxes with rounded corners?
- Solution 1: The CSS3 border-radius Property
- Solution 2: Images and Additional Markup
- Solution 3: Using JavaScript
- 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 full-height column?
- How do I add a drop shadow to my layout?
- How do I create a three-column CSS layout?
- How do I add a footer to a liquid layout?
- How do I create a thumbnail gallery with CSS?
- How do I use CSS Tables for Layout?
- Summary




