Getting StartED with CSS (eBook)

David Powers (Autor)

eBook Download: PDF

2010 | 1st ed.
350 Seiten
Apress (Verlag)
978-1-4302-2544-7 (ISBN)

Infos

Knowledge of Cascading Style Sheets (CSS) is essential for developing modern, attractive websites, but many beginners are put off by the need to learn about unfamiliar concepts, such as selectors, properties, and classes, before they can achieve anything. Getting StartED with CSS takes a practical approach by showing you how to use CSS in simple stages, starting by changing the default appearance of HTML tags to improve the look of text and links. It assumes no prior knowledge of CSS and avoids bombarding you with unnecessary technical details. At the same time, it explains all the main points and acts as a reference that you can come back to when you need to refresh your memory. More advanced concepts are introduced gradually, so that by the end of the book you'll have a solid understanding of all the main aspects of CSS. Particular attention is paid to avoiding the common pitfalls of beginners, enabling you to create websites that not only look good, but also are easy to maintain.

• Requires no previous knowledge of CSS
• Instant results-starts off by showing how improve the look of a website stage by stage
• Doesn't bombard you with endless rules and jargon

David Powers is an Adobe Community Expert for Dreamweaver and author of a series of highly successful books on PHP, including PHP Solutions: Dynamic Web Design Made Easy and Foundation PHP for Dreamweaver 8. As a professional writer, he has been involved in electronic media for more than 30 years, first with BBC radio and television and more recently with the Internet. His clear writing style is valued not only in the English-speaking world; several of his books have been translated into Spanish and Polish. What started as a mild interest in computing was transformed almost overnight into a passion, when David was posted to Japan in 1987 as BBC correspondent in Tokyo. With no corporate IT department just down the hallway, he was forced to learn how to fix everything himself. When not tinkering with the innards of his computer, he was reporting for BBC television and radio on the rise and collapse of the Japanese bubble economy. Since leaving the BBC to work independently, he has built up an online bilingual database of economic and political analysis for Japanese clients of an international consultancy. When not pounding the keyboard writing books or dreaming of new ways of using PHP and other programming languages, David enjoys nothing better than visiting his favorite sushi restaurant. He has also translated several plays from Japanese.

Inhalt

Table of contents 4
About the Author 15
About the Technical Reviewer 16
Acknowledgments 17
Introduction 18
Chapter 1 What Is CSS, and Why Should I Learn It? 20
A short history of CSS 22
Why CSS has taken so long to be embraced by designers 23
The time for CSS has finally come 25
What are the advantages of CSS? 26
Write simpler markup 26
Turn into a quick change artist 29
Gain greater control over the look of page elements 33
So, how do I use CSS? 35
Why are they called “cascading” style sheets? 37
How do I write a style rule? 38
Formatting CSS for ease of maintenance 40
Adding comments to your CSS 41
Where do I create my CSS? 42
Using external style sheets 43
Using a < style>
Applying a style directly to an HTML element 47
Don’t forget the cascade 47
Using Internet Explorer conditional comments 49
Limiting which devices use your styles 51
Learning to write CSS well 54
Avoiding common mistakes 54
Test your CSS early in several browsers 55
Building a useful toolset for working with CSS 55
Chapter review 57
Chapter 2 How Do I Improve the Look of Text and Links? 58
Exploring the CSS text properties 59
Changing the default font and color of text 62
Using font-family to choose a range of alternative fonts 63
Setting color values in CSS 70
Selectively applying a different font and color 72
Changing the size of fonts 75
Setting length with pixels, ems, and other units of measurement 76
Using percentages 79
Changing the look of fonts 83
Italicizing text 83
Making text bolder or lighter 83
Displaying text in small caps 84
Switching between uppercase and lowercase 84
Aligning and spacing text 87
Aligning text horizontally 88
Aligning text vertically 88
Indenting the first line of text 89
Adjusting the vertical space between lines oftext 90
Adding or removing space between words 90
Increasing or decreasing the space betweenletters 90
Controlling whitespace and line wrapping 91
Styling text links 96
Just remember it’s a love-hate relationship 97
Controlling underlines 98
Making full use of the cascade 100
Using the font shorthand property 101
Chapter review 103
Chapter 3 How Can I Improve the Layout of My Text? 104
Sliding boxes and blocks 105
Two HTML tags that are the friends of CSS:< div>
How CSS controls margins 108
Understanding how vertical margins collapse 110
Setting margin values 112
Using margins to improve page layout 113
Removing the default margins from your pages 113
Centering page content 118
Using margin-left to indent text 124
Using negative margins 128
Applying margins to inline elements 130
Keeping your style sheet manageable 131
Using the margin shorthand property 132
Organizing your style rules for easier maintenance 135
Chapter review 138
Chapter 4 How Can I Flow Text Around Images? 140
CSS classes 101 142
Creating and applying CSS classes 142
Using float to flow text around images 144
Creating generic classes to position images 146
How do I center an image? 147
What happens when the image is taller than the text? 151
Using clear to force elements below a floated image 153
What if an element is too wide to sit alongside a float? 157
What happens to margins alongside a float? 158
Using ID selectors to style unique elements 163
Deciding whether to use a class or an ID 164
Adding a caption to an image 167
Chapter review 171
Chapter 5 How Do I Add Backgrounds and Borders to Improve the Look of My Page? 173
Controlling backgrounds with CSS 174
Changing the background color of an element 175
Adding a background image 181
Controlling how background images repeat 184
Fixing a background image in relation to the browser viewport 186
Adjusting the position of a background image 187
Using the background shorthand property 194
Controlling borders with CSS 197
Setting a border color 199
Setting a border style 199
Setting a border width 201
Using border shorthand properties 201
Using borders to simulate embossing and indenting 202
Understanding how borders affect layout 204
How do I get rid of the blue border around link images? 211
How do I prevent backgrounds and borders from displaying under floats? 212
Chapter review 215
Chapter 6 How Do I Solve the Mysteries of Width and Height? 216
Padding—the final piece of the CSS boxmodel 217
Choosing between margins and padding 219
Using padding to add space around elements 220
Controlling width and height 229
Using a fixed height 231
Using minimum and maximum lengths to scale images and text 240
How do I stop content spilling out of its container? 247
Controlling overspill with the overflow property 248
Using overflow as an alternative to clear with floated elements 251
Understanding the difference between visibility and display 253
Displaying a message to users of old browsers 255
Chapter review 257
Chapter 7 How Do I Create Differently Styled Sections? 259
Adding a sidebar 261
Giving the sidebar different styles 266
Adding an accessible page heading 275
Switching the sidebar to the other side 279
Improving the image captions 281
How do I tell which styles will be applied? 283
A review of selectors in CSS2.1 284
Using specificity to work out which rule wins 287
Specificity the easy way 287
Specificity the official way 289
Chapter review 290
Chapter 8 How Do I Style Lists and Navigation Menus? 291
Styling unordered and ordered lists 293
Changing the symbol or number 293
Changing the position of the symbol 297
Replacing the symbol with your own image 298
Using a background image for greater control 299
Using the list-style shorthand property 301
Changing layout with the displayproperty 302
Setting display to inline 304
Setting display to inline-block 305
Creating a navigation bar from a list 307
Creating a vertical text-based navigation bar 308
Creating a horizontal text-based navigation bar 313
Using CSS sprites in a navigation bar 321
How do I continue a numbered list after a break? 326
Using CSS to generate numbered sequences 327
Adding content with :before and :after 328
Adding images with pseudo-elements 330
Generating content from an HTML attribute 331
Using the content property to generate numbered sequences 331
Using generated content with numbered lists 337
Generating subsection numbers with nested lists 338
Chapter review 339
Chapter 9 How Do I Style Tables? 340
Understanding the anatomy of a table 341
Basic table structure 341
Using HTML tags to define sections of a table 343
Defining table columns 343
Defining table header and footer rows 345
Grouping table rows into sections 345
How browsers lay out tables 347
Styling tables with CSS 349
Using CSS for table borders 350
Adding borders to table cells 351
How do I stop border widths from being doubled? 352
Adding borders to columns and rows 355
Applying other styles to columns 356
What’s the CSS equivalent of cellspacing? 357
What’s the CSS equivalent of cellpadding? 358
Controlling the position of the table caption 359
Handling empty cells 360
How can I control the width of my table? 362
How do I create scrolling table cells that work in all browsers? 365
How do I control the position of content in table cells? 366
Chapter review 377
Chapter 10 How Do I Position Elements Precisely on the Page? 378
How does CSS positioning work? 379
Understanding the different types of positioning 381
Fixing elements inside the browser window 382
How do I keep my navigation onscreen all the time? 382
Understanding the limitations of fixed positioning 389
Using relative positioning to nudge elements 392
Using relative positioning to create a containing block 394
Moving elements precisely with absolute positioning 395
Why do absolutely positioned elements move? 398
How do I center a page and use absolute positioning? 400
What happens if I nest absolutely positioned elements? 401
How do I control which element is on top when they overlap? 404
What are the drawbacks of using absolute positioning? 408
Positioning elements against a background image 410
Cropping an image nondestructively with CSS 414
Chapter review 417
Chapter 11 Are There Any Guidelines for Basic Page Layout? 418
Getting the basics right 419
Who is the target audience? 419
What size browser window should I design for? 420
What type of layout is best—fixed or flexible? 421
Creating a single-column layout 424
Keeping a liquid display centered 428
Creating a two-column layout 430
Putting the sidebar first and floating it to one side 431
Using a background image to simulate equal columns 434
What happens if the sidebar is longer? 436
Adding a “skip to main content” link for screen readers 438
Putting the main content first 439
Floating the main content 440
Using absolute positioning for the sidebar 441
Using a negative margin to float the sidebar into position 443
How do I make a more flexible two-column layout? 449
Creating a three-column layout 452
Creating faux columns for a three-column layout 452
Using a single image for a fixed-width layout 452
Using multiple images for a hybrid layout 454
Putting the main content first in a three-columnlayout 455
Creating subcolumns 459
Table-related display—the future oflayout? 461
Chapter review 466
Chapter 12 How Do I Create Styles for Printing? 467
What’s different about print CSS? 468
What print style sheets cannot do 469
Setting page margins with the @page rule and pseudo-classes 470
Controlling where to break content between pages 472
Displaying the URL of links 474
Creating styles for printing 476
Using the media attribute to specify where styles are applied 477
Using the cascade for print styles 478
Attaching independent style sheets 479
The ones that got away—UI properties and quotes 492
Changing the cursor 493
Adding an outline 495
Removing a default outline without destroying accessibility 498
Curly quotes, anyone? 499
Chapter review 506
Appendix 508
CSS Properties and Selectors 508
Specifying property values 508
Specifying color values 508
Specifying sizes 510
Specifying URLs 511
CSS2.1 Properties 511
Background properties 512
background-attachment 512
background-color 513
background-image 513
background-position 513
background-repeat 514
background 514
Border properties 514
border-color 515
border-style 515
border-top, border-right, border-bottom, border-left 515
border-top-color, border-right-color, border-bottom-color, border-left-color 516
border-top-style, border-right-style, border-bottom-style, border-left-style 516
border-top-width, border-right-width, border-bottom-width, border-left-width 516
border-width 516
border 517
Box model properties 517
height 517
margin-right, margin-left, margin-top, margin-bottom 517
margin 518
max-height 518
max-width 519
min-height 519
min-width 519
padding-top, padding-right, padding-bottom, padding-left 519
padding 520
width 520
Display and visibility properties 520
display 520
overflow 521
visibility 521
Float properties 522
clear 522
float 522
Generated content properties 522
content 523
counter-increment, counter-reset 523
quotes 523
List properties 523
list-style-image 523
list-style-position 524
list-style-type 524
list-style 524
Positioning properties 524
bottom, left, right, top 525
clip 525
position 525
z-index 526
Print properties 527
orphans 527
page-break-after 527
page-break-before 527
page-break-inside 527
widows 528
Table properties 528
border-collapse 528
border-spacing 528
caption-side 529
empty-cells 529
table-layout 529
text-align 529
vertical-align 530
Text properties 530
color 530
direction 530
font-family 531
font-size 531
font-style 531
font-variant 531
font-weight 532
font 532
letter-spacing 532
line-height 532
text-align 533
text-decoration 533
text-indent 533
text-transform 533
unicode-bidi 534
vertical-align 534
white-space 534
word-spacing 535
User interface properties 535
cursor 535
outline-color 536
outline-style 536
outline-width 536
outline 536
Selectors 536
CSS2.1 selectors 537
Universal selector 537
Type selectors 537
Class selectors 537
Pseudo-classes 539
Pseudo-elements 540
ID selectors 540
Descendant selectors 541
Child selectors 541
Adjacent sibling selectors 542
Attribute selectors 543
Grouping selectors 544
Building complex selectors 545
Widely-supported CSS3 selectors 545
Matching an attribute that begins with a value 546
Matching an attribute that contains a substring 546
Matching an attribute that ends with a value 546
General sibling combinator 547
Index 548

Produkt-Details

• Erscheint lt. Verlag: 25.3.2010
• Zusatzinfo: 350 p.
• Verlagsort: Berkeley
• Sprache: englisch
• Themenwelt: Mathematik / Informatik ► Informatik ► Theorie / Studium
• Themenwelt: Mathematik / Informatik ► Informatik ► Web / Internet
• Schlagworte: CSS • HTML • Navigation • page layout • Time
• ISBN-10: 1-4302-2544-0 / 1430225440
• ISBN-13: 978-1-4302-2544-7 / 9781430225447