The CSS anthology : 101 essential tips, tricks & hacks

Description

The CSS Anthology 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? Solution lnline Styles Embedded Styles External Style Sheets CSS Syntax What are CSS Selectors and how do I use them effectively? Solution Type Selectors Class Selectors ID Selectors Descendant Selectors Child Selectors Adjacent Selectors Pseudo-class Selectors for Links First Child Pseudo-class Selector How does the browser know which styles to apply? Solution Summary Text Styling and Other Basics How do I set my text to display in a certain font? Solution Discussion Should I use pixels, points, ems, or another unit identifier to set font sizes? Solution Sizing Fonts Using Units of Measurement Points and Picas Pixels Ems Exes Percentages Sizing Fonts Using Keywords Absolute Keywords Relative Keywords Discussion Relative Sizing and Inheritance 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 Using first-child Using a Class Selector 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 h1 element and the following paragraph? Solution Using an Adjacent Selector 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 remove page margins? Solution How can I remove browsers’ default padding and margins from all elements? Solution Discussion How do I add comments to my CSS file? Solution Summary CSS and Images How do I add borders to images? Solution How do I use CSS to remove the blue border around my navigation images? Solution How do I set a background image for my page using CSS? Solution Discussion How do I control how my background image repeats? Solution How do I position my background image? Solution Discussion Keywords Percentage Values Unit Values 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 Can I create more complex image borders, such as a double border? Solution Discussion Summary Navigation 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 can I visually indicate which links are external to my site? Solution Discussion How do I change the cursor type? Solution Discussion How do I create rollover images in my navigation without using JavaScript? Solution Discussion How should I style a site map? Solution Discussion Can I create a drop-down menu using only CSS? How can I use CSS to keep image-based navigation clean and accessible? Solution Discussion Summary 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 The summary Attribute of the table Element The caption Element The th Element How do I add a border to a table without using the HTML border attribute? 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 The Way of the Future 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 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 from creating additional whitespace 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 select menu? Solution Discussion How do I style a form with CSS that allows users to enter data as if into a spreadsheet? Discussion How do I highlight the form field that the user clicks into? Solution Discussion Summary Cross-browser Techniques In which browsers should I test my site? Solution How can I test in many browsers when I only have access to one operating system? Solution Windows Users Testing Mac Browsers Testing Linux Browsers Linux Live CDs Dual Booting with Linux Virtualization Mac Users Dual Boot with Boot Camp Virtualization Linux Users Testing Mac Browsers Testing Windows Browsers Virtualization Dual Booting 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 decide which browsers should get the full design experience? Solution How do I display a basic style sheet for really old browsers? Solution Discussion What is quirks mode and how do I avoid it? Solution Discussion How can I specify different styles for Internet Explorer 6 and 7? Solution How do I deal with the most common issues in IE6 and 7 Solution The Development Process Fixing Internet Explorer Problems How do I achieve PNG image transparency in Internet Explorer 6? Solution Discussion How do I ensure my standards-compliant web site displays correctly in Internet Explorer 8? Solution What do I do if I think I’ve found a CSS bug? Solution What do the error and warning messages in the W3C Validator mean? Solution Errors and Warnings Summary Accessibility and Alternative Devices What should I be aware of in terms of accessibility when using CSS? Solution Set Background Colors When Using Background Images If You Set a Foreground Color, You Need to Set a Background Color, and Vice Versa Check Color Contrasts Backgrounds Should Only Be Decorative Check line-height for Readability How do I test my site in a text-only browser? Solution Linux/Unix Users Windows Users Mac OS X Users Discussion How do I test my site in a screen reader? Solution Discussion How do I create style sheets for specific devices? Solution Discussion How do I create a print style sheet? Solution Discussion Linking a Print Style Sheet Creating the Print Styles How do I add alternative style sheets to my site? Solution Discussion Zoom Layouts Should I add font-size widgets or other style sheet switchers to my site? Solution How do I use alternative style sheets without duplicating code? Solution Discussion Summary 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 wrap text around an image? 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? 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 boxes with rounded corners? Solution 1: The CSS3 border-radius Property Solution 2: Images and Additional Markup Solution 3: Using JavaScript Discussion How do I create a liquid, two-column layout with the menu on the left and the content on the right? Solution Discussion Sizing and Positioning the Menu Positioning the Content 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 create a thumbnail gallery with CSS? Solution Discussion How do I use CSS Tables for Layout? Solution Discussion Summary Index