Cascading Style Sheets : Designing for the Web

by Lie, Hakon Wium; Bos, Bert

• ISBN13: 9780201596250
• ISBN10: 0201596253
• Edition: 2nd
• Format: Paperback
• Copyright: 1999-01-01
• Publisher: Addison-Wesley Professional

Summary

Cascading Style Sheets (CSS) is a standard that provides an easy and manageable way to add style and layout to Web pages. The World Wide Web Consortium (W3C) developed it as a companion to HTML and XML. Written by the inventors of CSS, this book contains tutorials on CSS, HTML and XML with simple examples and makeover documents as well as detailed information on both CSS level 1 and 2. It is the perfect introduction to CSS for beginning writers of Web pages, and the definitive guide for professional Web designers.

Author Biography

Hakon Wium Lie is a product of the MIT Media Lab's Electronic Publishing Group, who joined the WWW project at CERN Physics Laboratory in Geneva in the early days of the Web. He first proposed the concept of Cascading Style Sheets in 1994 and is now responsible for Style Sheets within W3C. When not working on how to beautify web pages, he paints 'Rothko'-like paintings and collects bits and pieces for his soon to be built, computer controlled pipe organ. Bert Bos completed his Ph.D. in Groningen, The Netherlands, on a prototyping language for graphical user interfaces. He developed browser software and support for humanities scholars and then joined the W3C at INRIA/Sophia-Antipolis in 1995. He started, and for three years led, W3C's work on internationalization, and now coordinates the development of new versions of XML. He continues his work on Style Sheets.

Table of Contents

Foreword	iii
Preface	v
Trademark notice	viii
The Web and HTML	1	(29)
The Web	3	(1)
Development of the Web	3	(1)
Markup Languages	4	(1)
Dodging the Limitations of HTML	5	(4)
Proprietary HTML extensions	5	(1)
Converting text into images	6	(1)
Placing text into a table	7	(1)
Writing a program instead of using HTML	8	(1)
HTML Basics	9	(16)
Elements	10	(1)
Building a simple HTML document	10	(4)
Block-level and inline elements	14	(1)
Element overview	14	(2)
Comments	16	(1)
Lists	16	(3)
Empty elements HR and BR	19	(1)
Maintaining preformatted text	20	(1)
Adding hyperlinks	21	(3)
Adding images	24	(1)
Document Trees	25	(5)
Nested elements	27	(3)
CSS	30	(20)
Rules and Style Sheets	30	(4)
Anatomy of a rule	31	(1)
Anatomy of a declaration	31	(2)
Grouping selectors and rules	33	(1)
``Gluing'' Style Sheets to the Document	34	(1)
Gluing by using the STYLE element	34	(1)
Browsers and CSS	35	(2)
Tree structures and inheritance	37	(2)
Overriding Inheritance	39	(1)
Properties that don't inherit	40	(1)
Common tasks with CSS	41	(7)
Common tasks: fonts	41	(2)
Common tasks: margins	43	(4)
Common tasks: links	47	(1)
A word about Cascading	48	(2)
The Amazing EM Unit and Other Best Practices	50	(7)
CSS Selectors	57	(27)
Selector Schemes	57	(1)
Type Selectors	58	(1)
Simple attribute selectors	59	(4)
The CLASS attribute	59	(3)
The ID attribute	62	(1)
The STYLE Attribute	63	(2)
Combining Selector Types	65	(1)
Simple contextual selectors	66	(1)
External information: pseudo-classes and pseudo-elements	67	(4)
The anchor pseudo-classes	68	(1)
The first-letter and first-line pseudo-elements	69	(2)
DIV and SPAN	71	(2)
Advanced attribute selectors	73	(4)
Selecting on the presence of an attribute	73	(1)
Selecting on the value of an attribute	74	(1)
Selecting on a single word in the value of an attribute	74	(1)
Selecting on the language of an element	75	(2)
Advanced contextual selectors	77	(1)
The child selector	78	(1)
The sibling selector	78	(1)
Advanced pseudo-classes	78	(3)
User-interaction: the active, hover and focus pseudo-classes	79	(1)
Counting elements: the first-child pseudo-class	80	(1)
Advanced pseudo-elements	81	(1)
The ``any'' selector	81	(3)
Fonts	84	(36)
Typesetting terminology	85	(2)
Classifying font families	87	(3)
Serif or sans-serif?	87	(1)
Proportional-spaced or monospaced?	87	(1)
Does it resemble handwriting?	88	(1)
Is it mainly for decorative purposes?	89	(1)
The font-family property	90	(4)
Design tips using font families	93	(1)
Font metrics	94	(2)
length units	96	(3)
Absolute units	96	(1)
Relative units	97	(1)
The pixel unit	97	(2)
Percentages as values	99	(1)
Keywords as values	99	(1)
The font-size property	99	(3)
The ``length'' value	100	(1)
The ``percentage'' value	100	(1)
The ``absolute-size'' value	101	(1)
The ``relative-size'' value	102	(1)
The font-style property	102	(2)
The font-variant property	104	(1)
The font-weight property	105	(3)
The font property	108	(2)
The font-stretch property	110	(1)
Numbers as values	111	(1)
The font-size-adjust property	112	(1)
The text-decoration property	113	(4)
The text-transform property	117	(2)
More information about fonts	119	(1)
Webfonts	120	(15)
Prerequisites for WebFonts	120	(1)
Font Descriptions	121	(2)
Font Descriptors	123	(1)
Basic font descriptors	124	(2)
Resource descriptors	126	(1)
The Unicode-range descriptor	127	(2)
Matching descriptors	129	(2)
Synthesis descriptors	131	(2)
Alignment descriptors	133	(2)
The Fundamental Objects	135	(25)
The box model	136	(1)
The display property	137	(3)
The block value	138	(1)
The inline value	138	(1)
The list-item value	138	(1)
The none value	139	(1)
The run-in value	139	(1)
The compact value	140	(1)
Creating side-heads	140	(1)
Achieving different effects	141	(1)
More about lists--the list-style properties	142	(1)
The list-style-type property	143	(1)
The list-style-image property	144	(1)
The list-style-position property	145	(1)
The list-style property	145	(1)
Generated text, counters and quotes	146	(10)
The :before and :after pseudo-elements and the content property	147	(2)
Generating quote marks	149	(2)
Counters	151	(2)
Styles for counters	153	(1)
Self-nesting counters	154	(1)
Markers and the marker-offset property	155	(1)
The white-space property	156	(4)
Space Inside Boxes	160	(19)
Space inside Block-Level Elements	161	(1)
The text-align property	162	(1)
Right aligning text	163	(1)
Justifying text	164	(1)
The text-indent property	164	(1)
Using the text-indent property	165	(2)
The line-height property	167	(3)
Using the line-height property	170	(1)
The word-spacing property	170	(1)
Using word spacing	171	(1)
The letter-spacing property	172	(1)
Using the letter-spacing property	173	(2)
The vertical-align property	175	(4)
The top and bottom keywords	176	(2)
The value as a percentage or length	178	(1)
Space Around Boxes	179	(32)
Margins and the margin properties	180	(1)
Using the margin property	181	(2)
Common usages of the margin properties	183	(2)
The padding properties	185	(1)
Using the padding property	186	(1)
The border properties group	187	(1)
The border-color properties	188	(2)
The border-style properties	190	(2)
The border-width properties	192	(1)
Using the border-width property	193	(1)
The border properties	194	(1)
Using the border property	195	(1)
Working with the Border Properties	195	(2)
Outline borders	197	(1)
Collapsing margins	198	(2)
The width property	200	(1)
The height property	200	(1)
The float property	201	(2)
The clear property	203	(1)
Minimum and maximum widths and heights	204	(2)
The whole story on width computation	206	(1)
no value is ``auto''	207	(1)
one value is ``auto''	208	(1)
two or three of the three values are ``auto''	208	(2)
Overflow	210	(1)
Relative and Absolute positioning	211	(13)
The position property	213	(1)
The containing block	213	(3)
Relative positioning	216	(1)
Fixed positioning	217	(2)
Absolute positioning	219	(2)
Using auto values	220	(1)
The z-index property	221	(1)
Making elements invisible	222	(2)
Colors	224	(23)
Specifying colors	225	(5)
Color names	226	(1)
RGB colors	226	(3)
System colors	229	(1)
The properties	230	(1)
The color property	230	(1)
Setting the color of a border	231	(1)
Setting the color of hyperlinks	231	(1)
The background properties	232	(1)
The background-color property	232	(3)
Background color in inline elements	233	(1)
Background color in block elements	233	(1)
Background color in list items	234	(1)
The transparent value	234	(1)
The background-image property	235	(1)
The background-repeat property	236	(1)
The background-attachment property	237	(2)
The background-position property	239	(3)
Placing images using percentages	240	(1)
Placing images using absolute positions	241	(1)
Placing images using keywords	241	(1)
The background property	242	(1)
Setting the background of the canvas	243	(1)
Shadows	244	(3)
Printing and Other Media	247	(16)
Page breaks	248	(4)
Usage of page break properties	251	(1)
Page areas	252	(7)
Page selectors and margins	253	(1)
Left and right pages	254	(1)
First pages	255	(1)
Units for page margins	255	(1)
Page box dimension and orientation	256	(2)
Crop marks	258	(1)
Named pages	258	(1)
Media-specific style sheets	259	(4)
Media types	260	(3)
Aural Style Sheets	263	(14)
Introduction to aural style sheets	263	(1)
Volume properties: volume	264	(1)
Speaking properties: speak	265	(1)
Pause properties: pause-before, pause-after, and pause	266	(1)
Cue properties: cue-before, cue-after, and cue	267	(2)
Mixing properties: play-during	269	(1)
Spatial properties: azimuth and elevation	270	(2)
Voice characteristic properties: speech-rate, voice-family, pitch, pitch-range, stress, and richness	272	(3)
Speech properties: speak-punctuation and speak-numeral	275	(2)
From HTML Extensions to CSS	277	(17)
Magnet	278	(2)
Cyberspazio	280	(4)
Colors	281	(1)
Images	281	(1)
Fonts	282	(1)
White space	282	(2)
``The form of the book''	284	(2)
``The new typography''	286	(2)
TSDesign	288	(6)
Cascading and Inheritance	294	(11)
The Basics	296	(1)
conflicts appear	297	(2)
accommodating user styles	299	(1)
a more complex example	300	(4)
Find all rules that apply	301	(1)
Sort the rules by explicit weight	302	(1)
Sort by origin	302	(1)
Sort by specificity	303	(1)
Sort by order specified	304	(1)
The ``inherit'' keyword	304	(1)
External Style Sheets	305	(16)
Why external style sheets?	305	(1)
External HTML style sheets	306	(1)
Linking to style sheets	306	(4)
Persistent, preferred and alternate author style sheets	308	(1)
The MEDIA attribute	309	(1)
@import	310	(3)
Using @import: a case study	311	(1)
@import: the details	312	(1)
External XML style sheets	313	(1)
W3C Core Styles	314	(7)
Other Approaches	321	(9)
Creating a document without using a style sheet	321	(5)
Using elements for layout	322	(2)
Using attributes for layout	324	(1)
The single-pixel GIF trick for controlling space	325	(1)
Using a different format from HTML	326	(2)
The Portable Document Format (PDF)	326	(1)
Images	327	(1)
Using XSL	328	(2)
XML Documents	330	(7)
Experimenting with XML	332	(1)
Some examples	333	(4)
Tables	337	(18)
The parts of a table	337	(2)
The collapsing borders model	339	(3)
The separated borders model	342	(2)
Borders for empty cells	343	(1)
Alignment	344	(2)
Sizes	346	(3)
Fast size	347	(2)
Setting background colors	349	(1)
``Collapsing'' columns and rows	350	(1)
Inline tables	350	(1)
XML and tables	351	(4)
The CSS Saga	355	(7)
Browsers	359	(3)
Appendix A HTML 4.0 QUICK REFERENCE	362	(12)
Document structure	362	(1)
The HEAD element	363	(1)
The BODY element	364	(3)
Container elements	364	(1)
Bridge elements	365	(1)
Special elements	365	(2)
Text-level elements	367	(4)
Normal text-level elements	368	(1)
Restricted text-level elements	369	(2)
BUTTON: a text-level container element	371	(1)
Special characters	371	(3)
Appendix B READING PROPERTY VALUE DEFINITIONS	374	(7)
Multiple values	376	(3)
Tying it all together	379	(2)
Appendix C SYSTEM COLORS	381	(2)
Index	383