Beginning CSS Web Development: From Novice to Professional

Front Cover
Apress, Dec 22, 2007 - Computers - 448 pages
3 Reviews

Cascading Style Sheets (CSS) are one of the most important technologies on the web today. They give web developers the power to style their web sites so those sites are usable, compact, good looking, consistently displayable, and quick and efficient to change if so desired.

There are many books out there on CSS, but Beginning CSS Web Development is different—it doesn’t waste time discussing theory, and it delves straight into the practical matter. It provides you with what you need to know, faster. It is also completely up to date, covering the most modern CSS standards and design techniques.

In addition to the essential CSS basics, this book covers advanced techniques like accessibility, hacks, and filters. The book concludes with a case study, and features a CSS reference section that allows you to look up required syntax as quickly as possible.

 

What people are saying - Write a review

Great learner book

User Review  - reader32 - Overstock.com

When I started learning CSS I looked at a lot of books but this one is the one that explained things in a way that I instantly understood. Collison has a lot of realworld experience and a presence in ... Read full review

User Review - Flag as inappropriate

jjkjjjjjjjjjjj

Contents

Care with Definition Lists
175
Further Reading
176
Forms
177
Form Elements
178
Accessibility Aids
180
ReadyMade IDs
181
Browser Rendering of Form Elements
182
Basics of Form Styling
184

Effective CSS Syntax
20
Commenting
21
Flagging Rules
22
Indenting for Clarity
23
Core Concepts of CSS
25
IDs
26
Class
27
Using the Cascade
30
The Cascade Through Varying Methods of Application
31
The Cascade Through Imported Style Sheets
32
Bottom of the Ladder
33
Grouping
34
Inheritance
35
Inheriting the Body
36
A Word of Warning
37
Contextual Selectors
39
CSS Measurements
40
Relative Measurements
41
Percentage
42
Ems
43
To Conclude
46
CSS Building Blocks
48
Adding Child Divs
49
Divs and Contextual Selectors
50
Width and Height
53
Margin
54
auto
56
Padding
57
Padding Shortcuts
58
Border
59
Bordering on the Obvious
62
To Conclude
63
Text
64
Convey the Mood with the Right Font
65
Primary Font Properties
66
Font Shorthand
68
Interesting Alternatives
71
Be Careful with Fonts
73
Apply Some Style
74
Please Please Use lineheight
75
Setting the lineheight Using Percentage
76
Other lineheight Values
78
Other Key Font Properties
80
Combining Several Font Properties
81
More Font Shorthand
82
Getting Clever with Text
83
Indenting Paragraphs
85
May the Font Be with You
86
Color Backgrounds and Images
89
Web Safety First?
90
Using the 17 Named Colors
91
Must We Be Web Safe?
92
Selecting a Color Palette for Your Design
93
Color for Text
94
Adding Background Color to Headings
96
Background for Other Elements
97
Image Formats for Backgrounds
100
JPEG
103
PNG
104
Sensible Use
105
Specifying a Background Image
106
Repeat
107
Position
109
Attachment
110
Background Shorthand
111
To Conclude
112
Lists
113
Basic List CSS
114
Using Background Images for List Bullets
121
The Inline List
122
Taking Control with IDs
124
Grouping Items with Classes
126
Nested Lists
128
Lists for Navigation
131
The Ordered List
134
Controlling the Ordered List
135
Dressing Up the Ordered List
136
To Conclude
138
Links
139
Default Link Styling
140
Changing Link Color
141
LoVe HAte
143
textdecoration
144
Adding Symbols with Background Images
146
Targeting Links with Descendant Selectors
147
Transforming a Navigation Bar with Links
149
Define All Shared Link Declarations and Clickable Area
150
Define Background Colors
152
To Conclude
153
Tables and Definition Lists
155
A Note About Accessibility
156
The Not Very Occasional Table
157
bordercollapse
162
Customizing Elements
164
Definition Lists
168
A List Inside a Definition List
171
The Form CSS Block Is Complete
192
TableBased Forms
193
Paragraph and Break Element Layout
196
Definition List Layout
204
So Which Approach Is Best?
215
To Conclude
216
Layout Basics
220
The float Property
222
Clearing Floats
225
Clearing Your Floated Image
229
Positioning
237
Basic Position Properties and Values
238
Position This in Your Mind
245
Classic Layouts
247
Types of Layout
248
Liquid
249
Elastic
250
Before You Build
251
Liquid Floated TwoColumn Layout
253
The Floated Sidebar
254
Liquid Float Left Float Right
260
Liquid Floated ThreeColumn Layout
262
Liquid Positioned TwoColumn Layout
267
Footer Woes
270
Liquid Positioned ThreeColumn Layout
271
FixedWidth Layout
277
Fixed and Floated ThreeColumn Layout
280
To Conclude
286
Layout Manipulation
288
Setup
289
The Body
293
Faux Columns
298
Get Set Up
299
What About the Box Model?
302
Fluid Faux Columns
303
The Journey from Layout to Template
305
Basic Masthead
306
Floated Right Content Search Tool
309
Headings
311
Navigation
312
Cool Footers
313
The ActionPacked Footer
317
To Conclude
326
Usability and Accessibility Enhancements
330
Web Content Accessibility Guidelines
331
User Style Sheets
332
Being Helpful
333
Specialized Style Sheets
335
MobileHandheld Style Sheets
340
To Conclude
343
Tips Tricks and Troubles
344
The XHTML
345
The CSS
346
The Overflow Property
347
hidden
349
Combining Classes
351
Hacks and Filters
353
Safe Hacks
354
IE7 Is Coming
356
Troubleshooting
357
Recommendations
359
To Conclude
361
Case Study The Dead Goods
362
Design
363
Content
365
Setting Up
366
Bodywork
367
Columns
368
Organized Layout
369
Background Work
371
Main Column Background
373
Page Background
374
Text Treatment
376
Column Text
377
The Final Touches
378
Main Navigation
379
Login Form
381
Footer Content
382
Finished
384
Its the End of the Book
385
CSS Reference
388
Border
389
Margin
390
Padding
391
Text
392
Font
393
List and Marker
394
Positioning
395
Classification
396
Table
397
Pseudo Elements
398
Shorthand
399
List Shorthand
400
Border Shorthand
401
INDEX
404
Copyright

Other editions - View all

Common terms and phrases

Popular passages

Page 3 - The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and Long-term viability of any site published on the Web. We work with browser companies...
Page 3 - Project is a grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all.
Page 393 - ... normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal | italic | oblique normal | small-caps normal | bold | bolder | lighter...
Page 395 - ... clip Sets the shape of an element. The element is clipped into this shape and displayed. shape auto left Sets how far the left edge of an element is to the right/left of the left edge of the parent element. auto length overflow Sets what happens if the content of an element overflows its area. visible hidden scroll auto position Places an element in a static, relative, absolute, or fixed position.
Page 389 - Property Description Values border A shorthand property for setting all of the properties for the four borders in one declaration border-width.
Page 395 - Places an element in a static, relative, absolute, or fixed position. static relative absolute fixed right Sets how far the right edge of an element is to the left/right of the right edge of the parent element. auto length %' top Sets how far the top edge of an element is above/below the top edge of the parent element.
Page xxiv - When prised away from the laptop, Simon can most likely be found in the pub or at a gig, waffling incessantly about good music, football, or biscuits. Simon has lived in many cities, including London and Reykjavik, but has now settled back in his beloved Nottingham, where the grass is green and the girls are pretty.
Page 389 - Sets the width of the left border thin. medium. thick. length border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width. borderstyle, border-color...
Page 388 - A shorthand property for setting all background properties in one declaration background-attachment Sets whether a background image is fixed or scrolls with the rest of the page...

About the author (2007)

In October 2006, Simon Collision started Erskine Design based in Nottingham, U.K. which grew to become an eight-strong team of creative web designers and developers who are afraid of nothing. Some people say they're one of the best agencies out there, and their clients include major magazines, government stuff, software companies and polar explorers. Moons ago, he was a successful visual artist, and founded an independent arts org and annual arts festival, putting his degree to some use at least. Then he caught the interwebs bug. As lead web developer at Agenzia from 2002 to 2006, he worked on numerous web projects for major record labels (such as Poptones, Universal) and bands (including The Libertines, Dirty Pretty Things, Beta Band), visual artists and illustrators (Jon Burgerman, Paddy Hartley, Lucy Orta, NOW Festival), businesses, community, and voluntary sector orgs, passionately ensuring everything was accessible and complied with current web standards. He does a bit of public speaking here and there, and will generally do anything for a biscuit and cup of tea, but prefers hard cash. He has lived in many cities, including London and Reykjavik, but has now settled back in his beloved Nottingham, where the grass is green and the girls are pretty. He also drives a 31-year-old car, and has a stupid cat called Bearface.

Bibliographic information