| The Missing Credits |
|
xiii | |
| Introduction |
|
1 | (14) |
|
|
|
|
|
|
15 | (12) |
|
|
|
15 | (3) |
|
HTML Past: Whatever Looked Good |
|
|
16 | (1) |
|
HTML Present: Scaffolding for CSS |
|
|
17 | (1) |
|
|
|
18 | (6) |
|
|
|
18 | (1) |
|
Two New HTML Tags to Learn |
|
|
18 | (2) |
|
|
|
20 | (1) |
|
|
|
21 | (3) |
|
The Importance of the Doctype |
|
|
24 | (3) |
|
Creating Styles and Style Sheets |
|
|
27 | (16) |
|
|
|
27 | (3) |
|
Understanding Style Sheets |
|
|
30 | (1) |
|
Internal or External--How to Choose |
|
|
30 | (1) |
|
|
|
30 | (1) |
|
|
|
31 | (3) |
|
Linking a Style Sheet Using HTML |
|
|
33 | (1) |
|
Linking a Style Sheet Using CSS |
|
|
33 | (1) |
|
Tutorial: Creating Your First Styles |
|
|
34 | (9) |
|
|
|
35 | (1) |
|
Creating an Internal Style Sheet |
|
|
36 | (3) |
|
Creating an External Style Sheet |
|
|
39 | (4) |
|
Selector Basics: Identifying What to Style |
|
|
43 | (28) |
|
Tag Selectors: Page-Wide Styling |
|
|
43 | (2) |
|
Class Selectors: Pinpoint Control |
|
|
45 | (3) |
|
ID Selectors: Specific Page Elements |
|
|
48 | (1) |
|
|
|
49 | (4) |
|
|
|
50 | (1) |
|
Building Descendent Selectors |
|
|
51 | (2) |
|
|
|
53 | (1) |
|
Constructing Group Selectors |
|
|
53 | (1) |
|
The Universal Selector (Asterisk) |
|
|
54 | (1) |
|
Pseudo-Classes and Pseudo-Elements |
|
|
54 | (4) |
|
|
|
54 | (1) |
|
More Pseudo-Classes and Elements |
|
|
55 | (3) |
|
|
|
58 | (3) |
|
|
|
58 | (2) |
|
|
|
60 | (1) |
|
|
|
60 | (1) |
|
Tutorial: Selector Sampler |
|
|
61 | (10) |
|
Creating a Group Selector |
|
|
63 | (2) |
|
Creating and Applying a Class Selector |
|
|
65 | (2) |
|
Creating and Applying an ID Selector |
|
|
67 | (1) |
|
Creating a Descendent Selector |
|
|
68 | (3) |
|
Saving Time with Inheritance |
|
|
71 | (10) |
|
|
|
71 | (1) |
|
How Inheritance Streamlines Style Sheets |
|
|
72 | (1) |
|
The Limits of Inheritance |
|
|
72 | (3) |
|
|
|
75 | (6) |
|
A Basic Example: One Level of Inheritance |
|
|
75 | (1) |
|
Using Inheritance to Restyle an Entire Page |
|
|
76 | (2) |
|
|
|
78 | (3) |
|
Managing Multiple Styles: The Cascade |
|
|
81 | (18) |
|
|
|
82 | (4) |
|
Inherited Styles Accumulate |
|
|
82 | (1) |
|
|
|
82 | (1) |
|
The Directly Applied Style Wins |
|
|
83 | (1) |
|
|
|
84 | (2) |
|
Specificity: Which Style Wins |
|
|
86 | (3) |
|
The Tiebreaker: Last Style Wins |
|
|
87 | (2) |
|
|
|
89 | (2) |
|
|
|
89 | (1) |
|
|
|
89 | (2) |
|
Tutorial: The Cascade in Action |
|
|
91 | (8) |
|
|
|
92 | (1) |
|
Combining Cascading and Inheritance |
|
|
93 | (1) |
|
|
|
94 | (5) |
|
|
|
|
|
|
99 | (34) |
|
|
|
99 | (5) |
|
|
|
101 | (1) |
|
|
|
102 | (2) |
|
|
|
104 | (4) |
|
|
|
104 | (1) |
|
Using Keywords, Percentages, and Ems |
|
|
105 | (3) |
|
Formatting Words and Letters |
|
|
108 | (4) |
|
|
|
109 | (1) |
|
|
|
109 | (1) |
|
|
|
110 | (1) |
|
|
|
111 | (1) |
|
Formatting Entire Paragraphs |
|
|
112 | (5) |
|
Adjusting the Space Between Lines |
|
|
112 | (2) |
|
|
|
114 | (1) |
|
Indenting the First Line and Removing Margins |
|
|
115 | (2) |
|
Formatting the First Letter or First Line of a Paragraph |
|
|
117 | (1) |
|
|
|
117 | (6) |
|
|
|
117 | (3) |
|
Positioning Bullets and Numbers |
|
|
120 | (1) |
|
|
|
121 | (2) |
|
Tutorial: Text Formatting in Action |
|
|
123 | (10) |
|
|
|
123 | (2) |
|
Formatting the Headings and Paragraphs |
|
|
125 | (2) |
|
|
|
127 | (3) |
|
Adding the Finishing Touches |
|
|
130 | (3) |
|
Margins, Padding, and Borders |
|
|
133 | (38) |
|
Understanding the Box Model |
|
|
133 | (2) |
|
Control Space with Margins and Padding |
|
|
135 | (6) |
|
Margin and Padding Shorthand |
|
|
136 | (1) |
|
|
|
137 | (1) |
|
Removing Space with Negative Margins |
|
|
138 | (2) |
|
Displaying Inline and Block-Level Boxes |
|
|
140 | (1) |
|
|
|
141 | (4) |
|
Border Property Shorthand |
|
|
143 | (1) |
|
Formatting Individual Borders |
|
|
143 | (2) |
|
|
|
145 | (1) |
|
Determining Height and Width |
|
|
146 | (6) |
|
Calculating a Box's Actual Width and Height |
|
|
147 | (1) |
|
Controlling the Tap with the Overflow Property |
|
|
148 | (2) |
|
Fixing IE 5's Broken Box Model |
|
|
150 | (2) |
|
Wrap Content with Floating Elements |
|
|
152 | (6) |
|
Backgrounds, Borders, and Floats |
|
|
154 | (1) |
|
|
|
155 | (3) |
|
Tutorial: Margins, Backgrounds, and Borders |
|
|
158 | (13) |
|
|
|
158 | (2) |
|
Adjusting the Space Around Tags |
|
|
160 | (1) |
|
Emphasizing Text with Backgrounds and Borders |
|
|
161 | (2) |
|
|
|
163 | (3) |
|
|
|
166 | (3) |
|
|
|
169 | (2) |
|
Adding Graphics to Web Pages |
|
|
171 | (38) |
|
|
|
171 | (1) |
|
|
|
172 | (3) |
|
|
|
175 | (1) |
|
Positioning a Background Image |
|
|
176 | (6) |
|
|
|
177 | (2) |
|
|
|
179 | (1) |
|
|
|
179 | (2) |
|
|
|
181 | (1) |
|
Using Background Property Shorthand |
|
|
182 | (1) |
|
Tutorial: Creating a Photo Gallery |
|
|
183 | (12) |
|
|
|
184 | (2) |
|
|
|
186 | (2) |
|
|
|
188 | (5) |
|
|
|
193 | (2) |
|
Tutorial: Using Background Images |
|
|
195 | (14) |
|
Adding an Image to the Page Background |
|
|
196 | (4) |
|
Replacing Borders with Graphics |
|
|
200 | (1) |
|
Using Graphics for Bulleted Lists |
|
|
201 | (2) |
|
Adding Rounded Corners to the Sidebar |
|
|
203 | (3) |
|
Creating an External Style Sheet |
|
|
206 | (3) |
|
Sprucing Up Your Site's Navigation |
|
|
209 | (42) |
|
Selecting Which Links to Style |
|
|
209 | (3) |
|
Understanding Link States |
|
|
209 | (2) |
|
Targeting Particular Links |
|
|
211 | (1) |
|
|
|
212 | (6) |
|
|
|
212 | (2) |
|
|
|
214 | (2) |
|
|
|
216 | (2) |
|
|
|
218 | (9) |
|
|
|
218 | (1) |
|
|
|
219 | (3) |
|
Horizontal Navigation Bars |
|
|
222 | (5) |
|
|
|
227 | (6) |
|
|
|
227 | (2) |
|
CSS-Style Preloading Rollovers |
|
|
229 | (2) |
|
|
|
231 | (2) |
|
|
|
233 | (18) |
|
|
|
233 | (2) |
|
Adding a Background Image to a Link |
|
|
235 | (2) |
|
Highlighting External Links |
|
|
237 | (2) |
|
|
|
239 | (1) |
|
Creating a Vertical Navigation Bar |
|
|
239 | (4) |
|
Adding Rollovers and Creating ``You Are Here'' Links |
|
|
243 | (3) |
|
|
|
246 | (1) |
|
From Vertical to Horizontal |
|
|
247 | (4) |
|
Formatting Tables and Forms |
|
|
251 | (26) |
|
Using Tables the Right Way |
|
|
251 | (2) |
|
|
|
253 | (6) |
|
|
|
254 | (1) |
|
Adjusting Vertical and Horizontal Alignment |
|
|
254 | (2) |
|
|
|
256 | (1) |
|
|
|
256 | (3) |
|
|
|
259 | (5) |
|
|
|
260 | (2) |
|
Laying Out Forms Using CSS |
|
|
262 | (2) |
|
Tutorial: Styling a Table |
|
|
264 | (4) |
|
|
|
268 | (9) |
|
Part Three: CSS Page Layout |
|
|
|
Building Float-Based Layouts |
|
|
277 | (48) |
|
|
|
277 | (2) |
|
|
|
278 | (1) |
|
Types of Web Page Layouts |
|
|
279 | (1) |
|
|
|
280 | (4) |
|
Applying Floats to Your Layouts |
|
|
284 | (8) |
|
|
|
285 | (1) |
|
|
|
286 | (1) |
|
Using Negative Margins to Position Elements |
|
|
287 | (5) |
|
Overcoming Float Problems |
|
|
292 | (10) |
|
Clearing and Containing Floats |
|
|
293 | (4) |
|
Creating Full-Height Columns |
|
|
297 | (2) |
|
|
|
299 | (3) |
|
Handling Internet Explorer Bugs |
|
|
302 | (5) |
|
|
|
302 | (2) |
|
|
|
304 | (2) |
|
|
|
306 | (1) |
|
Tutorial: Multiple Column Layouts |
|
|
307 | (7) |
|
|
|
307 | (1) |
|
Creating the Layout Styles |
|
|
308 | (1) |
|
|
|
309 | (2) |
|
|
|
311 | (2) |
|
|
|
313 | (1) |
|
Tutorial: Negative Margin Layout |
|
|
314 | (11) |
|
|
|
314 | (4) |
|
|
|
318 | (4) |
|
|
|
322 | (3) |
|
Positioning Elements on a Web Page |
|
|
325 | (40) |
|
How Positioning Properties Work |
|
|
326 | (11) |
|
Setting Positioning Values |
|
|
328 | (4) |
|
When Absolute Positioning Is Relative |
|
|
332 | (1) |
|
When (and Where) to Use Relative Positioning |
|
|
333 | (3) |
|
|
|
336 | (1) |
|
|
|
337 | (1) |
|
Powerful Positioning Strategies |
|
|
337 | (13) |
|
Positioning Within an Element |
|
|
339 | (1) |
|
Breaking an Element Out of the Box |
|
|
340 | (1) |
|
Using CSS Positioning for Page Layout |
|
|
341 | (4) |
|
Creating CSS-Style Frames Using Fixed Positioning |
|
|
345 | (5) |
|
Tutorial: Positioning Page Elements |
|
|
350 | (15) |
|
|
|
350 | (4) |
|
Adding a Caption to a Photo |
|
|
354 | (3) |
|
|
|
357 | (8) |
|
|
|
|
|
|
365 | (18) |
|
How Media Style Sheets Work |
|
|
365 | (2) |
|
How to Add Media Style Sheets |
|
|
367 | (2) |
|
Specifying the Media Type for an External Style Sheet |
|
|
367 | (1) |
|
Specifying the Media Type Within a Style Sheet |
|
|
368 | (1) |
|
Creating Print Style Sheets |
|
|
369 | (7) |
|
Using limportant to Override Onscreen Styling |
|
|
369 | (1) |
|
|
|
370 | (1) |
|
Styling Backgrounds for Print |
|
|
371 | (2) |
|
Hiding Unwanted Page Areas |
|
|
373 | (1) |
|
Adding Page Breaks for Printing |
|
|
374 | (2) |
|
Tutorial: Building a Print Style Sheet |
|
|
376 | (7) |
|
Remove Unneeded Page Elements |
|
|
376 | (2) |
|
Removing Backgrounds and Adjusting the Layout |
|
|
378 | (1) |
|
|
|
379 | (1) |
|
|
|
380 | (1) |
|
|
|
380 | (3) |
|
Improving Your CSS Habits |
|
|
383 | (80) |
|
|
|
383 | (1) |
|
Organizing Styles and Style Sheets |
|
|
384 | (6) |
|
|
|
384 | (1) |
|
Use Multiple Classes to Save Time |
|
|
385 | (2) |
|
Organize Styles by Grouping |
|
|
387 | (1) |
|
Using Multiple Style Sheets |
|
|
388 | (2) |
|
Eliminating Browser Style Interference |
|
|
390 | (4) |
|
Using Descendent Selectors |
|
|
394 | (4) |
|
Compartmentalize Your Pages |
|
|
394 | (2) |
|
|
|
396 | (2) |
|
Managing Internet Explorer Hacks |
|
|
398 | (7) |
|
Design for Contemporary Browsers First |
|
|
398 | (1) |
|
Isolate CSS for IE with Conditional Comments |
|
|
399 | (6) |
|
|
|
|
Appendix A: CSS Property Reference |
|
|
405 | (28) |
|
Appendix B: CSS in Dreamweaver 8 |
|
|
433 | (22) |
|
Appendix C: CSS Resources |
|
|
455 | (8) |
| Index |
|
463 | |