Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
CSS: The Missing Manual
A Note Regarding Supplemental Files
The Missing Credits
About the Author
About the Creative Team
Acknowledgements
The Missing Manual Series
Introduction
How CSS Works
The Benefits of CSS
What You Need to Know
HTML: The Barebones Structure
How HTML Tags Work
XHTML: HTML for the New Era?
HTML 5: The Wheel Turns Again
Software for CSS
Free Programs
Commercial Software
About This Book
About the Outline
Living Examples
About MissingManuals.com
The Very Basics
About → These → Arrows
Safari® Books Online
I. CSS Basics
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
Getting the Most out of Internet Explorer 8
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
3. Selectors: Identifying What to Style
Tag Selectors: Page-Wide Styling
Class Selectors: Pinpoint Control
ID Selectors: Specific Page Elements
Styling Groups of Tags
Constructing Group Selectors
The Universal Selector (Asterisk)
Styling Tags Within Tags
The HTML Family Tree
Building Descendent Selectors
Pseudo-Classes and Pseudo-Elements
Styles for Links
Styling Paragraph Parts
More Pseudo-Classes and -Elements
:before
:after
:first-child
:focus
Advanced Selectors
Child Selectors
Adjacent Siblings
Attribute Selectors
Tutorial: Selector Sampler
Creating a Group Selector
Creating and Applying a Class Selector
Creating a Descendent Selector
Creating and Applying an ID Selector
Finishing Touches
4. Saving Time with Style 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
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
Starting with a Clean Slate
Tutorial: The Cascade in Action
Resetting CSS and Styling from Scratch
Creating a Hybrid Style
Overcoming Conflicts
II. Applied CSS
6. Formatting Text
Formatting Text
Choosing a Font
Serif fonts
Sans-serif fonts
Monospaced and fun fonts
Additional fonts to consider
Adding Color to Text
Hexadecimal color notation
RGB
Changing Font Size
Using Pixels
Using Keywords, Percentages, and Ems
Keywords
Percentages
Ems
Formatting Words and Letters
Italicizing and Bolding
Capitalizing
Small caps
Decorating
Letter and Word Spacing
Formatting Entire Paragraphs
Adjusting the Space Between Lines
Line spacing by pixel, em, or percentage
Line spacing by number
Aligning Text
Indenting the First Line and Removing Margins
First-line indents
Controlling margins between paragraphs
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
Fine-Tuning with Classes
Adding the Finishing Touches
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
Wrap Content with Floating Elements
Backgrounds, Borders, and Floats
Stopping the Float
Tutorial: Margins, Backgrounds, and Borders
Controlling Page Margins and Backgrounds
Adjusting the Space Around Tags
Building a Sidebar
Fixing the Browser Bugs
Going Further
8. Adding Graphics to Web Pages
CSS and the <img> Tag
Background Images
Controlling Repetition
Positioning a Background Image
Keywords
Precise Values
Percentage Values
Fixing an Image in Place
Using Background Property Shorthand
Tutorial: Enhancing Images
Framing an Image
Adding a Caption
Tutorial: Creating 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
Giving the Sidebar Personality
Going Further
9. Sprucing Up Your Site's Navigation
Selecting Which Links to Style
Understanding Link States
Targeting Particular Links
Grouping links with descendent selectors
Styling Links
Underlining Links
Creating a Button
Using Graphics
Building Navigation Bars
Using Unordered Lists
Vertical Navigation Bars
Horizontal Navigation Bars
Using display: inline
Using floats for horizontal navigation
Advanced Link Techniques
Big Clickable Buttons
CSS-Style Preloading Rollovers
Sliding Doors
Styling Particular Types of Links
Links to other websites
Email links
Links to specific types of files
Tutorial: Styling Links
Basic Link Formatting
Adding a Background Image to a Link
Highlighting Different Links
Tutorial: Creating a Navigation Bar
Adding Rollovers and Creating "You Are Here" Links
Fixing the IE Bugs
From Vertical to Horizontal
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
III. CSS Page Layout
11. Introducing CSS Layout
Types of Web Page Layouts
How CSS Layout Works
The Mighty <div> Tag
Techniques for CSS Layout
Layout Strategies
Start with Your Content
Mock Up Your Design
Identify the Boxes
Go with the Flow
Remember Background Images
Pieces of a Puzzle
Layering Elements
Don't Forget Margins and Padding
12. Building Float-Based Layouts
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 6 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
13. 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
IV. Advanced CSS
14. 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
Removing background elements
Leaving background elements in
Hiding Unwanted Page Areas
Adding Page Breaks for Printing
Tutorial: Building a Print Style Sheet
Remove Unneeded Page Elements
Adjusting the Layout
Reformatting the Text
Displaying URLs
15. Improving Your CSS Habits
Adding Comments
Organizing Styles and Style Sheets
Name Styles Clearly
Name styles by purpose not appearance
Don't use names based on position
Avoid cryptic names
Use Multiple Classes to Save Time
Organize Styles by Grouping
Using comments to separate style groups
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
Conditional comments and IE 8
Conditional comments and the cascade
16. CSS 3: CSS on the Edge
An Overview of CSS 3
CSS 3 Selectors
Child Selectors
Type Selectors
Opacity
RGBA Color
Simulating RGBA in Internet Explorer
Text Shadow
Font Freedom
Generated Content
V. Appendixes
A. CSS Property Reference
CSS Values
Colors
Keywords
RGB values
Lengths and Sizes
Pixels
Ems
Percentages
Keywords
URLs
Text Properties
color (inherited)
font (inherited)
font-family (inherited)
font-size (inherited)
font-style (inherited)
font-variant (inherited)
font-weight (inherited)
letter-spacing (inherited)
line-height (inherited)
text-align (inherited)
text-decoration
text-indent (inherited)
text-transform (inherited)
vertical-align
white-space
word-spacing (inherited)
List Properties
list-style (inherited)
list-style-image (inherited)
list-style-position (inherited)
list-style-type (inherited)
Padding, Borders, and Margins
border
border-top, border-right, border-bottom, border-left
border-color
border-top-color, border-right-color, border-bottom-color, border-left-color
border-style
border-top-style, border-right-style, border-bottom-style, border-left-style
border-width
border-top-width, border-right-width, border-bottom-width, border-left-width
outline
outline-color
outline-style
outline-width
padding
padding-top
padding-right
padding-bottom
padding-left
margin
margin-top
margin-right
margin-bottom
margin-left
Backgrounds
background
background-attachment
background-color
background-image
background-position
background-repeat
Page Layout Properties
bottom
clear
clip
display
float
height
left
max-height
max-width
min-height
min-width
overflow
position
right
top
visibility
width
z-index
Table Properties
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Miscellaneous Properties
content
cursor
orphans
page-break-after
page-break-before
page-break-inside
widows
B. CSS in Dreamweaver CS4
Creating Styles
Phase 1: Set Up the CSS Type
Phase 2: Defining the Style
Adding Styles to Web Pages
Linking to an External Style Sheet
Applying a Class Style
Applying a class style to text
Applying a class style to objects
Other class styling options
Removing a Class Style
Applying IDs to a Tag
Editing Styles
Editing in the Properties Pane
Managing Styles
Deleting a Style
Renaming a Class Style
Duplicating a Style
Moving and Managing Styles
Examining Your CSS in the Styles Panel
Current Selection Mode
Deciphering the Cascade
Using the Code Navigator
C. CSS Resources
References
World Wide Web Consortium (W3C)
Books and PDFs
Other Online References
CSS Help
Email List
Discussion Boards
CSS Tips, Tricks, and Advice
CSS Navigation
Tutorials
Online Examples
CSS and Graphics
CSS Layout
Box Model Information
Float Layouts
Absolute Position Layouts
Layout Examples
Miscellaneous Layout Resources
Browser Bugs
Windows Internet Explorer
Showcase Sites
CSS Books
CSS Software
Windows and Mac
Windows Only
Mac Only
Index
About the Author
Colophon
← Prev
Back
Next →
← Prev
Back
Next →