About the Author
Preface
Who Should Read This Book
What's in This Book
Where to Find Help
The SitePoint Newsletters
The SitePoint Podcast
Your Feedback
Acknowledgments
Conventions Used in This Book
1. Making a Start with CSS
How do I define styles with CSS?
CSS Syntax
What about older browsers?
How does the browser decide which styles to apply?
Will using a CSS framework make it easier to learn CSS?
A Decent Selection
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) of my text?
How do I justify text?
How do I indent text?
How do I center text?
How do I change text to all capitals using CSS?
How do I create a drop-caps effect?
How do I add a drop shadow to my text?
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 use fonts other than those installed on most users' computers?
Working with Style
3. Images and Other Design Elements
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 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 while the page is scrolled?
Can I set a background image on any element?
How do I create a gradient background?
Can I create a background image that scales with the browser window?
How do I add more than one background image to an element?
How do I make an element transparent so that the background shows through?
How can I add a drop shadow to an element?
How do I create rounded corners on an element?
Can I rotate images without using image-editing software?
What should I be aware of in terms of accessibility when using color?
In the Picture?
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 lists and CSS?
How do I create tabbed navigation using CSS?
My navigation is in an include, so how can I indicate which is the selected tab?
How do I put additional information in my navigation bar?
How can I visually indicate which links are external to my site?
How do I create rollover images in my navigation without using JavaScript?
How should I style a sitemap?
How do I create a drop-down menu with CSS?
Navigating Your Way to Success
5. Tabular Data
How do I lay out spreadsheet data using CSS?
How do I make my tabular data accessible?
How do I add a border to a table?
How do I stop spaces appearing between the cells of my tables 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 mouse hovers over it?
How do I display table columns in alternating colors?
How do I display a calendar using CSS?
How do I create a pricing table?
Tables Topped
6. Forms and User Interfaces
How do I lay out a form with CSS?
Can I change the look and feel of form elements with CSS?
How do I highlight a field when the user tabs into or clicks on it?
What additional elements and attributes are part of the HTML5 forms spec?
Can I style input elements based on their validity?
How do I group related fields?
How do I create a form that reads like a sentence with inline fields?
What should I be aware of in terms of accessibility when creating forms?
You've Got Form
7. Cross-browser Techniques
In which browsers should I test my sites?
Can I just ignore older browsers?
How can I add support for CSS3 selectors in older browsers?
Can I add CSS or JavaScript and have it served only to older versions of IE?
How do I achieve rounded corners in browsers without support for border-radius?
How do I deal with the most common issues in IE6 and IE7?
How do I style HTML5 semantic elements that are unsupported in older browsers?
How can I test in many browsers when I only have access to one operating system?
Can I install multiple versions of Internet Explorer on Windows?
How should I go about testing on mobile browsers?
What do I do if I hit a CSS issue I'm unable to fix?
The validator complains about my vendor-specific extensions, so how do I validate CSS3?
All Users Catered For
8. CSS Positioning Basics
How do I decide when to use a class and when to use an ID?
What are block-level and inline elements in CSS, and can I change how these display?
How do margins and padding work in CSS?
How do I wrap text around an image?
How do I stop the next item floating up once I've floated an element?
How do I set an item's position on the page using CSS?
How do I center a layout on the page?
How do I create a thumbnail gallery?
Positioned: Absolutely
9. CSS for Layout
How do I create a two-column layout?
How do I create a two-column layout with a footer?
How do I create a three-column layout?
How do I create a fixed-width layout with a full-width header and footer?
How do I create a design that works well on mobile devices?
How do I create a print stylesheet?
How can I use responsive-design techniques when my site is image-heavy?
What about older browsers and responsive design?
What is the future of CSS layouts?
A Design for Life
Index
· · · · · · (收起)