The CSS3 AnthologyTake Your Sites to New Heights
Curious to see what we’ve got in store for you?
Good, because there’s plenty of meaty technique to get your teeth into along with lots of tips and tricks. Have a look through the table of contents to see what’s covered.
Table of Contents
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
h1element 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
inputelements 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
More Information
More Details
Author Notes
...it’s my hope that this book gives you the confidence to start using some of the new features of CSS3, helps you to find answers to CSS problems that you might have, and enables you to explore CSS further. I’ve really enjoyed writing this book, and I trust you’ll gain a lot from it too…
Rachel Andrew
Author
edgeofmyseat.com
Customer Reviews
Live, unmoderated reviews from our customers, typos and all.
Let me put it this way. I just built a very "gravy" looking website just after reading a few chapters of this "stew css menu". And for numbers, the real value isn't on the provided scale rating...
george udosen, USA 
1 Apr 2013
A great example led reference for practical and effective use of CSS
Ben Davies, USA 