ISIBUKU » Anthology, Featured, Sitepoint, Web Development » The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 3rd Edition (include source code)

The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 3rd Edition (include source code)

View: 144 views

The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 3rd Edition is a 392 page, black and white compilation of best practice solutions to the most challenging CSS problems. The third edition of this best-selling book has been completely revised and updated to cover the latest techniques and newest browsers, including Firefox 3 and Internet Explorer 8.

All code examples used in this book are fully downloadable and will get you started quickly, allowing you to add stylish effects to your web site in no time.

This book will show you how to:

construct robust CSS layouts that work every time
create sleek drop-down menus using only CSS
build a professional tabbed navigation system
create powerful visual effects using images
replace image-based navigation with streamline CSS lists
produce intuitive navigation for your web site with aesthetic appeal
design smarter, more usable, CSS-flavored web forms
create rounded corners without the bloated HTML
learn how you can let the W3C validator do your debugging
reduce the burden of site maintenance and updates
with 92 other solutions to common questions and problems

Contents:
1. 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?

2. 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 h1 element 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?

3. 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?

4. 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?

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 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?

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 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 select menu?
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?

7. 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?

8. 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?

9. 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?
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?