CSS: The Missing Manual
1st Edition
Published on 3. October 2006
Book
Paperback/Softback
494 pages
978-0-596-52687-0 (ISBN)
Description
Web site design has grown up. Unlike the old days, when designers cobbled together
chunky HTML, bandwidth-hogging graphics, and a prayer to make their sites look good,
Cascading Style Sheets (CSS) now lets your inner designer come out and play. But CSS
isn't just a tool to pretty up your site; it's a reliable method for handling all
kinds of presentation--from fonts and colors to page layout. CSS: The Missing
Manual clearly explains this powerful design language and how you can use it to
build sparklingly new Web sites or refurbish old sites that are ready for an upgrade.
Like their counterparts in print page-layout programs, style sheets allow
designers to apply typographic styles, graphic enhancements, and precise layout
instructions to elements on a Web page. Unfortunately, due to CSS's complexity and
the many challenges of building pages that work in all Web browsers, most Web authors
treat CSS as a kind of window-dressing to spruce up the appearance of their sites.
Integrating CSS with a site's underlying HTML is hard work, and often frustratingly
complicated. As a result many of the most powerful features of CSS are left untapped.
With this book, beginners and Web-building veterans alike can learn how to navigate
the ins-and-outs of CSS and take complete control over their Web pages'
appearance.
Author David McFarland (the bestselling author of O'Reilly's Dreamweaver: The
Missing Manual) combines crystal-clear explanations, real-world examples, a dash
of humor, and dozens of step-by-step tutorials to show you ways to design sites with
CSS that work consistently across browsers. You'll learn how to:
* Create HTML that's simpler, uses less code, is search-engine friendly, and
works well with CSS
* Style text by changing fonts, colors, font sizes, and adding borders
* Turn simple HTML links into complex and attractive navigation bars-complete
with CSS-only rollover effects that add interactivity to your Web pages
* Style images to create effective photo galleries and special effects like
CSS-based drop shadows
* Make HTML forms look great without a lot of messy HTML
* Overcome the most hair-pulling browser bugs so your Web pages work consistently
from browser to browser
* Create complex layouts using CSS, including multi-column designs that don't
require using old techniques like HTML tables
* Style Web pages for printing
Unlike competing books, this Missing Manual doesn't assume that everyone in the
world only surfs the Web with Microsoft's Internet Explorer; our book provides
support for all major Web browsers and is one of the first books to thoroughly
document the newly expanded CSS support in IE7, currently in beta release.
Want to learn how to turn humdrum Web sites into destinations that will capture
viewers and keep them longer? Pick up CSS: The Missing Manual and learn the
real magic of this tool.
chunky HTML, bandwidth-hogging graphics, and a prayer to make their sites look good,
Cascading Style Sheets (CSS) now lets your inner designer come out and play. But CSS
isn't just a tool to pretty up your site; it's a reliable method for handling all
kinds of presentation--from fonts and colors to page layout. CSS: The Missing
Manual clearly explains this powerful design language and how you can use it to
build sparklingly new Web sites or refurbish old sites that are ready for an upgrade.
Like their counterparts in print page-layout programs, style sheets allow
designers to apply typographic styles, graphic enhancements, and precise layout
instructions to elements on a Web page. Unfortunately, due to CSS's complexity and
the many challenges of building pages that work in all Web browsers, most Web authors
treat CSS as a kind of window-dressing to spruce up the appearance of their sites.
Integrating CSS with a site's underlying HTML is hard work, and often frustratingly
complicated. As a result many of the most powerful features of CSS are left untapped.
With this book, beginners and Web-building veterans alike can learn how to navigate
the ins-and-outs of CSS and take complete control over their Web pages'
appearance.
Author David McFarland (the bestselling author of O'Reilly's Dreamweaver: The
Missing Manual) combines crystal-clear explanations, real-world examples, a dash
of humor, and dozens of step-by-step tutorials to show you ways to design sites with
CSS that work consistently across browsers. You'll learn how to:
* Create HTML that's simpler, uses less code, is search-engine friendly, and
works well with CSS
* Style text by changing fonts, colors, font sizes, and adding borders
* Turn simple HTML links into complex and attractive navigation bars-complete
with CSS-only rollover effects that add interactivity to your Web pages
* Style images to create effective photo galleries and special effects like
CSS-based drop shadows
* Make HTML forms look great without a lot of messy HTML
* Overcome the most hair-pulling browser bugs so your Web pages work consistently
from browser to browser
* Create complex layouts using CSS, including multi-column designs that don't
require using old techniques like HTML tables
* Style Web pages for printing
Unlike competing books, this Missing Manual doesn't assume that everyone in the
world only surfs the Web with Microsoft's Internet Explorer; our book provides
support for all major Web browsers and is one of the first books to thoroughly
document the newly expanded CSS support in IE7, currently in beta release.
Want to learn how to turn humdrum Web sites into destinations that will capture
viewers and keep them longer? Pick up CSS: The Missing Manual and learn the
real magic of this tool.
Reviews / Votes
"Almost 500 pages of CSS help, with more than 100 pages of practical tutorials to guide you through the process of implementing and refining CSS to save you many a wasted hour. At GBP25, you'll be hard pressed to find a better guide to designing with CSS." .NET, February 2007More details
Other editions
New editions
David Sawyer Mcfarland
CSS - The Missing Manual, 4e
Book
09/2015
4th Edition
O'Reilly
€47.00
Shipment within 10-20 days
David Sawyer Mcfarland
CSS: The Missing Manual
Book
08/2009
2nd Edition
O'Reilly
€29.00
Article exhausted; check for reprint
Additional editions
E-Book
08/2006
1st Edition
O'Reilly
€22.49
Available for download
E-Book
08/2006
1st Edition
O'Reilly
€29.49
Available for download
Person
David Sawyer McFarland is the president of Sawyer McFarland Media Inc., a web development and training company located in Portland, Oregon. In addition, he teaches JavaScript programming, Flash, and web design at the University of California, Berkeley, the Center for Electronic Art, the Academy of Art College, and Ex'Pressions Center for New Media. He was formerly the webmaster at the University of California, Berkeley, and the Berkeley Multimedia Research Center.
Content
Inhaltsverzeichnis
The Missing Credits
Introduction
Part One: CSS Basics
Chapter 1. Rethinking HTML for CSS
HTML: Past and Present
HTML Past: Whatever Looked Good
HTML Present: Scaffolding for CSS
Writing HTML for CSS
Think Structure
Two New HTML Tags to Learn
HTML to Forget
Tips to Guide Your Way
The Importance of the Doctype
Chapter 2. Creating Styles and Style Sheets
Anatomy of a Style
Understanding Style Sheets
Internal or External-How to Choose
Internal Style Sheets
External Style Sheets
Linking a Style Sheet Using HTML
Linking a Style Sheet Using CSS
Tutorial: Creating Your First Styles
Creating an Inline Style
Creating an Internal Style Sheet
Creating an External Style Sheet
Chapter 3. Selector Basics: Identifying What to Style
Tag Selectors: Page-Wide Styling
Class Selectors: Pinpoint Control
ID Selectors: Specific Page Elements
Styling Tags Within Tags
The HTML Family Tree
Building Descendent Selectors
Styling Groups of Tags
Constructing Group Selectors
The Universal Selector (Asterisk)
Pseudo-Classes and Pseudo-Elements
Styles for Links
More Pseudo-Classes and -Elements
Advanced Selectors
Child Selectors
Adjacent Siblings
Attribute Selectors
Tutorial: Selector Sampler
Creating a Group Selector
Creating and Applying a Class Selector
Creating and Applying an ID Selector
Creating a Descendent Selector
Chapter 4. Saving Time with Inheritance
What Is Inheritance?
How Inheritance Streamlines Style Sheets
The Limits of Inheritance
Tutorial: Inheritance
A Basic Example: One Level of Inheritance
Using Inheritance to Restyle an Entire Page
Inheritance Inaction
Chapter 5. Managing Multiple Styles: The Cascade
How Styles Cascade
Inherited Styles Accumulate
Nearest Ancestor Wins
The Directly Applied Style Wins
One Tag, Many Styles
Specificity: Which Style Wins
The Tiebreaker: Last Style Wins
Controlling the Cascade
Changing the Specificity
Selective Overriding
Tutorial: The Cascade in Action
Creating a Hybrid Style
Combining Cascading and Inheritance
Overcoming Conflicts
Part Two: Applied CSS
Chapter 6. Formatting Text
Formatting Text
Choosing a Font
Adding Color to Text
Changing Font Size
Using Pixels
Using Keywords, Percentages, and Ems
Formatting Words and Letters
Italicizing and Bolding
Capitalizing
Decorating
Letter and Word Spacing
Formatting Entire Paragraphs
Adjusting the Space Between Lines
Aligning Text
Indenting the First Line and Removing Margins
Formatting the First Letter or First Line of a Paragraph
Styling Lists
Types of Lists
Positioning Bullets and Numbers
Graphic Bullets
Tutorial: Text Formatting in Action
Setting Up the Page
Formatting the Headings and Paragraphs
Formatting Lists
Adding the Finishing Touches
Chapter 7. Margins, Padding, and Borders
Understanding the Box Model
Control Space with Margins and Padding
Margin and Padding Shorthand
Colliding Margins
Removing Space with Negative Margins
Displaying Inline and Block-Level Boxes
Adding Borders
Border Property Shorthand
Formatting Individual Borders
Coloring the Background
Determining Height and Width
Calculating a Box's Actual Width and Height
Controlling the Tap with the Overflow Property
Fixing IE 5's Broken Box Model
Wrap Content with Floating Elements
Backgrounds, Borders, and Floats
Stopping the Float
Tutorial: Margins, Backgrounds, and Borders
Controlling Page Margins
Adjusting the Space Around Tags
Emphasizing Text with Backgrounds and Borders
Building a Sidebar
Fixing the Browser Bugs
Going Further
Chapter 8. Adding Graphics to Web Pages
CSS and the Tag
Background Images
Controlling Repetition
Positioning a Background Image
Keywords
Precise Values
Percentage Values
Fixing an Image in Place
Using Background Property Shorthand
Tutorial: Creating a Photo Gallery
Framing an Image
Adding a Caption
Building a Photo Gallery
Adding Drop Shadows
Tutorial: Using Background Images
Adding an Image to the Page Background
Replacing Borders with Graphics
Using Graphics for Bulleted Lists
Adding Rounded Corners to the Sidebar
Creating an External Style Sheet
Chapter 9. Sprucing Up Your Site's Navigation
Selecting Which Links to Style
Understanding Link States
Targeting Particular Links
Styling Links
Underlining Links
Creating a Button
Using Graphics
Building Navigation Bars
Using Unordered Lists
Vertical Navigation Bars
Horizontal Navigation Bars
Advanced Link Techniques
Big Clickable Buttons
CSS-Style Preloading Rollovers
Sliding Doors
Tutorial: Styling Links
Basic Link Formatting
Adding a Background Image to a Link
Highlighting External Links
Marking Visited Pages
Creating a Vertical Navigation Bar
Adding Rollovers and Creating "You Are Here" Links
Fixing the IE Bugs
From Vertical to Horizontal
Chapter 10. Formatting Tables and Forms
Using Tables the Right Way
Styling Tables
Adding Padding
Adjusting Vertical and Horizontal Alignment
Creating Borders
Styling Rows and Columns
Styling Forms
HTML Form Elements
Laying Out Forms Using CSS
Tutorial: Styling a Table
Tutorial: Styling a Form
Part Three: CSS Page Layout
Chapter 11. Building Float-Based Layouts
How CSS Layout Works
The Mighty Tag
Types of Web Page Layouts
Float Layout Basics
Applying Floats to Your Layouts
Floating All Columns
Floats Within Floats
Using Negative Margins to Position Elements
Overcoming Float Problems
Clearing and Containing Floats
Creating Full-Height Columns
Preventing Float Drops
Handling Internet Explorer Bugs
Double-Margin Bug
3-Pixel Gaps
Other IE Problems
Tutorial: Multiple Column Layouts
Structuring the HTML
Creating the Layout Styles
Adding Another Column
Adding a "Faux Column"
Fixing the Width
Tutorial: Negative Margin Layout
Centering a Layout
Floating the Columns
Final Adjustments
Chapter 12. Positioning Elements on a Web Page
How Positioning Properties Work
Setting Positioning Values
When Absolute Positioning Is Relative
When (and Where) to Use Relative Positioning
Stacking Elements
Hiding Parts of a Page
Powerful Positioning Strategies
Positioning Within an Element
Breaking an Element Out of the Box
Using CSS Positioning for Page Layout
Creating CSS-Style Frames Using Fixed Positioning
Tutorial: Positioning Page Elements
Enhancing a Page Banner
Adding a Caption to a Photo
Laying Out the Page
Part Four: Advanced CSS
Chapter 13. CSS for the Printed Page
How Media Style Sheets Work
How to Add Media Style Sheets
Specifying the Media Type for an External Style Sheet
Specifying the Media Type Within a Style Sheet
Creating Print Style Sheets
Using !important to Override Onscreen Styling
Reworking Text Styles
Styling Backgrounds for Print
Hiding Unwanted Page Areas
Adding Page Breaks for Printing
Tutorial: Building a Print Style Sheet
Remove Unneeded Page Elements
Removing Backgrounds and Adjusting the Layout
Reformatting the Text
Displaying the Logo
Displaying URLs
Chapter 14. Improving Your CSS Habits
Adding Comments
Organizing Styles and Style Sheets
Name Styles Clearly
Use Multiple Classes to Save Time
Organize Styles by Grouping
Using Multiple Style Sheets
Eliminating Browser Style Interference
Using Descendent Selectors
Compartmentalize Your Pages
Identify the Body
Managing Internet Explorer Hacks
Design for Contemporary Browsers First
Isolate CSS for IE with Conditional Comments
Part Five: Appendixes
Appendix A. CSS Property Reference
Appendix B. CSS in Dreamweaver 8
Appendix C. CSS Resources
Index
The Missing Credits
Introduction
Part One: CSS Basics
Chapter 1. Rethinking HTML for CSS
HTML: Past and Present
HTML Past: Whatever Looked Good
HTML Present: Scaffolding for CSS
Writing HTML for CSS
Think Structure
Two New HTML Tags to Learn
HTML to Forget
Tips to Guide Your Way
The Importance of the Doctype
Chapter 2. Creating Styles and Style Sheets
Anatomy of a Style
Understanding Style Sheets
Internal or External-How to Choose
Internal Style Sheets
External Style Sheets
Linking a Style Sheet Using HTML
Linking a Style Sheet Using CSS
Tutorial: Creating Your First Styles
Creating an Inline Style
Creating an Internal Style Sheet
Creating an External Style Sheet
Chapter 3. Selector Basics: Identifying What to Style
Tag Selectors: Page-Wide Styling
Class Selectors: Pinpoint Control
ID Selectors: Specific Page Elements
Styling Tags Within Tags
The HTML Family Tree
Building Descendent Selectors
Styling Groups of Tags
Constructing Group Selectors
The Universal Selector (Asterisk)
Pseudo-Classes and Pseudo-Elements
Styles for Links
More Pseudo-Classes and -Elements
Advanced Selectors
Child Selectors
Adjacent Siblings
Attribute Selectors
Tutorial: Selector Sampler
Creating a Group Selector
Creating and Applying a Class Selector
Creating and Applying an ID Selector
Creating a Descendent Selector
Chapter 4. Saving Time with Inheritance
What Is Inheritance?
How Inheritance Streamlines Style Sheets
The Limits of Inheritance
Tutorial: Inheritance
A Basic Example: One Level of Inheritance
Using Inheritance to Restyle an Entire Page
Inheritance Inaction
Chapter 5. Managing Multiple Styles: The Cascade
How Styles Cascade
Inherited Styles Accumulate
Nearest Ancestor Wins
The Directly Applied Style Wins
One Tag, Many Styles
Specificity: Which Style Wins
The Tiebreaker: Last Style Wins
Controlling the Cascade
Changing the Specificity
Selective Overriding
Tutorial: The Cascade in Action
Creating a Hybrid Style
Combining Cascading and Inheritance
Overcoming Conflicts
Part Two: Applied CSS
Chapter 6. Formatting Text
Formatting Text
Choosing a Font
Adding Color to Text
Changing Font Size
Using Pixels
Using Keywords, Percentages, and Ems
Formatting Words and Letters
Italicizing and Bolding
Capitalizing
Decorating
Letter and Word Spacing
Formatting Entire Paragraphs
Adjusting the Space Between Lines
Aligning Text
Indenting the First Line and Removing Margins
Formatting the First Letter or First Line of a Paragraph
Styling Lists
Types of Lists
Positioning Bullets and Numbers
Graphic Bullets
Tutorial: Text Formatting in Action
Setting Up the Page
Formatting the Headings and Paragraphs
Formatting Lists
Adding the Finishing Touches
Chapter 7. Margins, Padding, and Borders
Understanding the Box Model
Control Space with Margins and Padding
Margin and Padding Shorthand
Colliding Margins
Removing Space with Negative Margins
Displaying Inline and Block-Level Boxes
Adding Borders
Border Property Shorthand
Formatting Individual Borders
Coloring the Background
Determining Height and Width
Calculating a Box's Actual Width and Height
Controlling the Tap with the Overflow Property
Fixing IE 5's Broken Box Model
Wrap Content with Floating Elements
Backgrounds, Borders, and Floats
Stopping the Float
Tutorial: Margins, Backgrounds, and Borders
Controlling Page Margins
Adjusting the Space Around Tags
Emphasizing Text with Backgrounds and Borders
Building a Sidebar
Fixing the Browser Bugs
Going Further
Chapter 8. Adding Graphics to Web Pages
CSS and the Tag
Background Images
Controlling Repetition
Positioning a Background Image
Keywords
Precise Values
Percentage Values
Fixing an Image in Place
Using Background Property Shorthand
Tutorial: Creating a Photo Gallery
Framing an Image
Adding a Caption
Building a Photo Gallery
Adding Drop Shadows
Tutorial: Using Background Images
Adding an Image to the Page Background
Replacing Borders with Graphics
Using Graphics for Bulleted Lists
Adding Rounded Corners to the Sidebar
Creating an External Style Sheet
Chapter 9. Sprucing Up Your Site's Navigation
Selecting Which Links to Style
Understanding Link States
Targeting Particular Links
Styling Links
Underlining Links
Creating a Button
Using Graphics
Building Navigation Bars
Using Unordered Lists
Vertical Navigation Bars
Horizontal Navigation Bars
Advanced Link Techniques
Big Clickable Buttons
CSS-Style Preloading Rollovers
Sliding Doors
Tutorial: Styling Links
Basic Link Formatting
Adding a Background Image to a Link
Highlighting External Links
Marking Visited Pages
Creating a Vertical Navigation Bar
Adding Rollovers and Creating "You Are Here" Links
Fixing the IE Bugs
From Vertical to Horizontal
Chapter 10. Formatting Tables and Forms
Using Tables the Right Way
Styling Tables
Adding Padding
Adjusting Vertical and Horizontal Alignment
Creating Borders
Styling Rows and Columns
Styling Forms
HTML Form Elements
Laying Out Forms Using CSS
Tutorial: Styling a Table
Tutorial: Styling a Form
Part Three: CSS Page Layout
Chapter 11. Building Float-Based Layouts
How CSS Layout Works
The Mighty Tag
Types of Web Page Layouts
Float Layout Basics
Applying Floats to Your Layouts
Floating All Columns
Floats Within Floats
Using Negative Margins to Position Elements
Overcoming Float Problems
Clearing and Containing Floats
Creating Full-Height Columns
Preventing Float Drops
Handling Internet Explorer Bugs
Double-Margin Bug
3-Pixel Gaps
Other IE Problems
Tutorial: Multiple Column Layouts
Structuring the HTML
Creating the Layout Styles
Adding Another Column
Adding a "Faux Column"
Fixing the Width
Tutorial: Negative Margin Layout
Centering a Layout
Floating the Columns
Final Adjustments
Chapter 12. Positioning Elements on a Web Page
How Positioning Properties Work
Setting Positioning Values
When Absolute Positioning Is Relative
When (and Where) to Use Relative Positioning
Stacking Elements
Hiding Parts of a Page
Powerful Positioning Strategies
Positioning Within an Element
Breaking an Element Out of the Box
Using CSS Positioning for Page Layout
Creating CSS-Style Frames Using Fixed Positioning
Tutorial: Positioning Page Elements
Enhancing a Page Banner
Adding a Caption to a Photo
Laying Out the Page
Part Four: Advanced CSS
Chapter 13. CSS for the Printed Page
How Media Style Sheets Work
How to Add Media Style Sheets
Specifying the Media Type for an External Style Sheet
Specifying the Media Type Within a Style Sheet
Creating Print Style Sheets
Using !important to Override Onscreen Styling
Reworking Text Styles
Styling Backgrounds for Print
Hiding Unwanted Page Areas
Adding Page Breaks for Printing
Tutorial: Building a Print Style Sheet
Remove Unneeded Page Elements
Removing Backgrounds and Adjusting the Layout
Reformatting the Text
Displaying the Logo
Displaying URLs
Chapter 14. Improving Your CSS Habits
Adding Comments
Organizing Styles and Style Sheets
Name Styles Clearly
Use Multiple Classes to Save Time
Organize Styles by Grouping
Using Multiple Style Sheets
Eliminating Browser Style Interference
Using Descendent Selectors
Compartmentalize Your Pages
Identify the Body
Managing Internet Explorer Hacks
Design for Contemporary Browsers First
Isolate CSS for IE with Conditional Comments
Part Five: Appendixes
Appendix A. CSS Property Reference
Appendix B. CSS in Dreamweaver 8
Appendix C. CSS Resources
Index