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