Product Overview
Temporarily Out of Stock!
Fear not. ‘The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition’ is being reprinted and packed into large trucks as we speak, and will arrive promptly at our warehouse on November 23rd. Thank you for your patience.
Secure your copy today and yours will be amongst the first dispatched the moment it becomes available.
Don’t forget, the Full PDF version is always available for immediate purchase.
The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd 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
- Your Feedback
- Acknowledgments
- Conventions Used in this Book
- Markup Samples
- Tips, Notes, and Warnings
- Getting Started with CSS
- Defining Styles with CSS
- lnline Styles
- Embedded Styles
- External Style Sheets
- CSS Selectors
- Type Selectors
- Class Selectors
- ID Selectors
- Descendant Selectors
- Child Selectors
- Pseudo-class Selectors
- Summary
- Defining Styles with CSS
- Text Styling and Other Basics
- How do I replace
<font>tags with CSS?- Solution
- Should I use pixels, points, ems, or something else to set font sizes?
- Solution
- Discussion
- How do I set my text to display in a certain font?
- Solution
- Discussion
- How do I remove underlines from my links?
- Solution
- Discussion
- How do I create a link that changes color when the cursor moves over it?
- Solution
- How do I display two different styles of link on one page?
- Solution
- How do I style the first item in a list differently from the others?
- Solution
- How do I add a background color to a
heading?
- Solution
- How do I style headings with underlines?
- Solution
- How do I remove the large gap between an
h1element and the following paragraph?- Solution
- How do I highlight text on the page?
- Solution
- How do I alter the line height (leading) on my text?
- Solution
- How do I justify text?
- Solution
- Discussion
- How do I style a horizontal rule?
- Solution
- How do I indent text?
- Solution
- Discussion
- How do I center text?
- Solution
- How do I change text to all capitals using
CSS?
- Solution
- Discussion
- How do I change or remove the bullets on
list items?
- Solution
- Discussion
- How do I use an image for a list-item
bullet?
- Solution
- How do I remove the indented left-hand margin from a list?
- Solution
- Discussion
- How do I display a list horizontally?
- Solution
- How do I add comments to my CSS file?
- Solution
- How do I remove page margins without adding attributes to the
<body>tag?- Solution
- How can I remove browsers’ default padding and margins from all elements?
- Solution
- Discussion
- Summary
- How do I replace
- CSS and Images
- How do I add borders to images?
- Solution
- How do I use CSS to replace the deprecated HTML
borderattribute on images?- Solution
- How do I set a background image for my page using CSS?
- Solution
- Discussion
- How do I position my background image?
- Solution
- Discussion
- How do I fix my background image in place when the page is scrolled?
- Solution
- Discussion
- Can I set a background image on any
element?
- Solution
- Discussion
- How do I place text on top of an image?
- Solution
- Discussion
- How do I add more than one background image to my document?
- Solution
- Discussion
- How can I use transparency in my pages?
- Solution
- Discussion
- Summary
- How do I add borders to images?
- Navigation
- How do I replace image-based navigation with CSS?
- Solution
- Discussion
- How do I style a structural list as a
navigation menu?
- Solution
- Discussion
- How do I use CSS to create rollover navigation without images or JavaScript?
- Solution
- Discussion
- Can I use CSS and lists to create a navigation system with subnavigation?
- Solution
- Discussion
- How do I make a horizontal menu using CSS
and lists?
- Solution
- Discussion
- How do I create button-like navigation using CSS?
- Solution
- Discussion
- How do I create tabbed navigation with
CSS?
- Solution
- Discussion
- How do I change the cursor type?
- Solution
- Discussion
- How do I create rollovers in CSS without using JavaScript?
- Solution
- Discussion
- How can I create pure CSS drop-down menus?
- Solution
- Discussion
- Summary
- How do I replace image-based navigation with CSS?
- Tabular Data
- How do I lay out spreadsheet data using
CSS?
- Solution
- Discussion
- How do I ensure that my tabular data is accessible as well as attractive?
- Solution
- Discussion
- How do I add a border to a table without using the HTML
borderattribute?- Solution
- Discussion
- How do I stop spaces appearing between the cells of my table when
I’ve added borders using CSS?
- Solution
- How do I display spreadsheet data in an attractive and usable way?
- Solution
- Discussion
- How do I display table rows in alternating colors?
- Solution
- Discussion
- How do I change a row’s background color when the cursor hovers over it?
- Solution
- Discussion
- How do I display table columns in alternating colors?
- Solution
- Discussion
- How do I display a calendar using CSS?
- Solution
- Discussion
- Summary
- How do I lay out spreadsheet data using
CSS?
- Forms and User Interfaces
- How do I style form elements using CSS?
- Solution
- Discussion
- How do I apply different styles to fields in a single form?
- Solution
- Discussion
- How do I stop my form creating additional white space and line breaks?
- Solution
- How do I make a Submit button look like text?
- Solution
- How do I ensure that users with text-only devices understand how to
complete my form?
- Solution
- Discussion
- How do I lay out a two-column form using CSS instead of a table?
- Discussion
- How do I group related fields?
- Solution
- Discussion
- How do I style accesskey hints?
- Solution
- Discussion
- How do I use different colored highlights in a
selectmenu?- Solution
- I have a form that allows users to enter data as if into a
spreadsheet. How do I style it with
CSS?
- Discussion
- How do I highlight the form field that the user clicks into?
- Solution
- Discussion
- Summary
- How do I style form elements using CSS?
- Cross-browser Techniques
- In which browsers should I test my site?
- Solution
- I only have access to one operating system. How can I test in more of these
browsers?
- Solution
- Is there a service that can show me how my site looks in various browsers?
- Solution
- Discussion
- Can I install multiple versions of Internet Explorer on Windows?
- Solution
- How do I display a basic style sheet for really old browsers?
- Solution
- Discussion
- How do I hide some CSS from a particular
browser?
- Solution
- Discussion
- How can I send different styles to a particular browser?
- Solution
- Discussion
- How do I achieve alpha transparency in Internet Explorer 6?
- Solution
- Discussion
- What is
DOCTYPEswitching and how do I use it?- Solution
- Discussion
- I think I’ve found a CSS bug! What do I do?
- Solution
- Some of my content is appearing and disappearing in Internet
Explorer 6! What should I do?
- Solution
- What do the error and warning messages in
the W3C Validator mean?
- Solution
- Summary
- In which browsers should I test my site?
- Accessibility and Alternative Devices
- How do I test my site in a text-only browser?
- Solution
- Discussion
- How do I test my site in a screen reader?
- Solution
- Discussion
- How do I create style sheets for specific devices, such as screen readers or
WebTV?
- Solution
- Discussion
- How do I create a print style sheet?
- Solution
- Discussion
- How do I add alternative style sheets to my
site?
- Solution
- Discussion
- How do I make a style sheet switcher?
- Solution
- Discussion
- How do I use alternative style sheets without duplicating code?
- Solution
- Discussion
- Summary
- How do I test my site in a text-only browser?
- CSS Positioning and Layout
- How do I decide when to use a class and when to use an ID?
- Solution
- Can I make an inline element display as if it were block-level, and vice-versa?
- Solution
- Discussion
- How do margins and padding work in CSS?
- Solution
- Discussion
- How do I make text wrap around an image without using the HTML
alignattribute?- Solution
- Discussion
- How do I stop the next element moving up when I use float?
- Solution
- Discussion
- How do I align a site’s logo and slogan to the left and right without using a
table?
- Solution
- Discussion
- How do I set an item’s position on the page using CSS?
- Solution
- Discussion
- How do I center a block on the page?
- Solution
- Discussion
- How do I create a liquid, two-column layout with the menu on the
left, and the content on the
right?
- Solution
- Discussion
- Can I reverse this layout and put the menu on the right?
- Solution
- Discussion
- How do I create a fixed-width, centered, two-column layout?
- Solution
- Discussion
- How do I create a full-height column?
- Solution
- Discussion
- How do I add a drop shadow to my layout?
- Solution
- How do I create a three-column CSS layout?
- Solution
- Discussion
- How do I add a footer to a liquid layout?
- Solution
- How do I display a thumbnail gallery without using a table?
- Solution
- Discussion
- How do I create boxes with rounded corners?
- Solution 1: The Mozilla border-radius Property
- Solution 2: Images and Additional Markup
- Solution 3: Using JavaScript
- Discussion
- Summary
- How do I decide when to use a class and when to use an ID?
- Index




