"The most complete question-and-answer book on CSS"
Discover practical CSS page layouts you can put to use instantly.
Combine CSS with images to create impressive visual effects.
Troubleshoot CSS problems and learn to deal with alternative browsers.
Save hours of maintenance by creating a site-wide style sheet.
Customize each CSS solution to meet your specific needs.
Send me Sample Chapters!
Click here to order this book
Overview
SitePoint's 'The CSS Anthology: 101 Essential Tips, Tricks & Hacks' provides you with tried and tested real-world solutions to your Web design problems.
It's the most complete question-and-answer book on CSS, with over 100 tutorials that'll show you how to gain more control over the appearance of your Web page fonts, create sophisticated Web page navigation controls, design for alternative browsing devices including smart phones and screen readers for the blind, and much more.
The book teaches you to use best-practice coding styles and CSS 2.1 compliant code to ensure that your designs are easy to maintain and will continue to work well into the future.
'The CSS Anthology: 101 Essential Tips, Tricks & Hacks' also includes download access to all the code samples used throughout the book so you can plug them right into your own Web page designs.
Cascading Style Sheets
Cascading Style Sheets (CSS) give you complete control over the look of your Web pages, without using cumbersome HTML tags. CSS allows you to truly separate content from presentation.
Separation of content from presentation will greatly reduce the time you'll spend maintaining medium and large Websites. Keeping your style sheet information separate from your HTML, you can instantly modify the appearance of many pages at once.
CSS 2.1 is a W3C standard intended to replace problematic formatting tags such as ,
, and legacy attributes such as 'color' and 'align', to give you greater control over formatting. CSS is being adopted by major organizations such as Wired, ESPN and Yahoo!. All modern Web browsers now support CSS; it is becoming best practice for Web page presentation.What Will You Learn?
The code examples provided with 'The CSS Anthology: 101 Essential Tips, Tricks & Hacks' will get you started quickly, allowing you to add style effects to your Website.
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.
Replace image-based navigation with low-fat CSS lists.
Design smarter, more usable CSS-flavored web forms.
Use rounded corners minus the bloated HTML.
Allow your visitors to select their preferred look and feel.
Let the W3C validator do your debugging.
Reduce the burden of site maintenance and updates.
... with 92 other solutions to common questions and problems.
Who Should Read This Book?
'The CSS Anthology: 101 Essential Tips, Tricks & Hacks' is ideal for experienced Web designers who would like to add sparkle to their existing designs, as well as newcomers who want to learn Web design the right way the first time.
The book is written so that it can be read cover to cover, or referred to like a cookbook with 101 different recipies for your Website. It's written in an easy-to-follow, consistent format that's well illustrated with plenty of screenshots and code examples, providing quick visual cues. If you hate wading through dry academic-style texts, then the illustrations and examples throughout this book will suit you.
If you're already familiar with CSS but you'd like to see some examples of great CSS design that really work in practice, this book will be a valuable addition to your desk.
If you don't have experience with CSS you can try out the examples provided in the book and the downloadable code archive for yourself and add effects to your Website in no time.
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 Website
The SitePoint Forums
The SitePoint Newsletters
Your Feedback
Acknowledgements
Getting Started with CSS
The Problem with HTML
Defining Styles with CSS
CSS Selectors
Summary
Text Styling and Other Basics
How do I replace font tags with CSS?
Should I use pixels, points, ems or something else for font sizes?
How do I specify that my text is shown in a certain font?
How do I remove underlines from my links?
How do I create a link that changes color on mouseover?
How do I display two different styles of link on one page?
How do I add a background color to a heading?
How do I style headings with underlines?
How do I get rid of the large gap between an h1 tag and the following paragraph?
How do I highlight text on the page without using font tags?
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 margin from a list?
How do I display a list horizontally?
How do I add comments to my CSS file?
How do I get rid of the page margins without adding attributes to the body tag?
Summary
CSS and Images
How do I add a border to images?
How do I use CSS to replace the deprecated HTML border attribute on images?
How do I set a background image for my page with CSS?
How do I position my background image?
How do I make a background image that stays still while the text moves when the page is scrolled?
How do I set background images for other elements?
How do I place text on top of an image?
How do I add more than one background image to my document?
Summary
Navigation
How do I replace image-based navigation with CSS?
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 sub-navigation?
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 do I change the cursor type?
How do I create rollovers in CSS without JavaScript?
Summary
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 table row's background color on hover?
How do I display a calendar using CSS?
Summary
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 creating additional white space 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?
I have a form that allows users to enter data as if into a spreadsheet. How do I style this with CSS?
How do I highlight the form field that the user clicks into?
Summary
Browser and Device Support
In which browsers should I test my site?
I only have access to one operating system. How can I test in more of these browsers?
Is there a service that can show me how my site looks in various browsers?
Can I install multiple versions of Internet Explorer in Windows?
How do I test my site in a text-only browser?
How do I test my site in a screen reader?
How do I hide CSS from Netscape 4?
How do I display different styles for Netscape 4?
How do I add a message, which displays only in version 4 browsers, to explain why my site looks so plain?
How do I hide CSS from other browsers?
Why does my site look different in Internet Explorer 6 than it does in Mozilla?
I think I've found a CSS bug! What do I do?
Some of my content is appearing and disappearing in Internet Explorer 6! What should I do?
What do the error and warning messages in the W3C Validator mean?
How do I create style sheets for specific devices, such as screen readers or WebTV?
How do I create a print style sheet?
Some browsers allow users to choose a style sheet. How do I add alternate style sheets to my site?
How do I make a style sheet switcher?
How do I use alternate style sheets without duplicating code?
Summary
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 viceversa?
How do margins and padding work in CSS?
How do I get text to wrap around an image without using the HTML align attribute?
How do I stop the next element moving up when I use float?
How do I align my logo and strapline to the left and right without using a table?
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 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 three-column CSS layout?
How do I add a footer that works well, using CSS?
How do I display a thumbnail gallery without using a table?
Summary
Experimentation, Browser Specific CSS, and Future Techniques
How do I build those colored scrollbars?
How do I create a menu that stays fixed while the page scrolls below it?
How do I get a fixed menu to work in Internet Explorer?
Can I create a page footer that remains fixed in position, like a frame, using CSS?
Can I create pure CSS drop-down menus?
Can you create rounded corners on CSS borders?
How do I create cross-browser, rounded corners using CSS?
How do I make elements translucent both in Mozilla-based browsers, and in Internet Explorer?
How do I use CSS to indicate to visitors which links are external?
Can I use CSS to insert text into my document?
How do I style the first line or first letter of a block?
Is it a bad thing to use effects that don't work in some browsers?
Summary
Index
