CSS Cookbook- P18

Testing the background color of the textarea element... Testing background images in the textarea element... Testing the removal of borders on the textarea element... Testing colors on t

Figure E-141 Testing the background color of the textarea element

Figure E-142 Testing background images in the textarea element

border: 0;

Figure E-143 Testing the removal of borders on the textarea element

Figure E-144 Testing colors on the textarea element borders

Figure E-145 Testing the styles of borders on the textarea element

Figure E-146 Testing the widths of borders on the textarea element

Figure E-147 Testing the color on the textarea element

Figure E-148 Testing setting a different font on the textarea element

Figure E-149 Testing a different size of font on the textarea element

Figure E-150 Testing a bold font on the textarea element

Figure E-151 Testing setting a height for the textarea element

Figure E-152 Testing the letter spacing of the textarea element

Figure E-153 Testing setting the spacing between lines of text on the textarea element

Figure E-154 Testing margins on the textarea element

Figure E-155 Testing padding on the textarea element

Figure E-156 Testing the alignment of text on the textarea element

Figure E-157 Testing setting a different font on the textarea element

Figure E-158 Testing indenting the text on the textarea element

Figure E-159 Testing the width of the textarea element

Figure E-160 Testing the spacing between words on the textarea element

Symbols

& (ampersand) flourish, 112–113

< (angle bracket) for child selectors, 47

in links, 25 (period) for class selectors, 41, 58 (dot-dot) for parent folder, 24+ (plus)

for adjacent selectors, 49

in columns, 521, 523, 545access keys

for form elements, 428–429

in navigation menus, 374–375Accessify’s List-O-Matic menu builder, 342accesskey attribute (a element), 374acronyms, returning values of, 491:active pseudo-class, 346, 353, 671background-image property with, 379addClass( ) function (JavaScript), 632adjacent selectors, 49, 152, 605adjacent sibling selectors, 670Adobe BrowserLab service, 565Adobe Fireworks application, 211Adobe Flash, drop-down menus and, 373:after pseudo-element, 55, 327, 672inserting special characters with links, 492–

493printing URIs with links, 490–492stylizing punctuation, 581align attribute (hr element), 286align attribute (img element), 92alignment

background images, 188–190centering elements on web pages, 275–280columns, 175–177

fixed-width layouts, 523–524flexible layouts, 520–523definition list items, 323–328, 323–328forms, spacing around, 398–399list markers

cross-browser consistency, 303–304

superscripts and subscripts, 173

of textbaseline rhythm, applying, 171–173centering, 126

double justification, 126–128into multiple columns, 175–177U.S flag sample design, 613, 616all media type, 83, 482

alpha transparency, 15background colors, 294–297CSS gradients, 210

fade effect, with PNGs, 284masks, applying to images and borders,

262–263with PNG images, 211–214supporting transparent PNGs in IE6, 640–

642texture, adding to page, 619alt attribute (img element), 15alternate stylesheets, 88–89alternative text for images, 15alternative text for video, 19

& (ampersand) flourish, 112–113

an (anchor) elementaccesskey attribute, 374class attribute, 42

id attribute, 386pseudo-classes for, 344, 346rel attribute, 638

title attribute, 389anchors in HTML documents, 25

< (angle bracket) for child selectors, 47animating elements on page, 584–588animation-direction property, 588animation-duration property, 587animation-iteration-count property, 587animation-transform property, 586Any Order Columns method, 524–544associating styles with web pages, 70–73

* (asterisk)

in attribute selector declarations, 52

audio element, 16–17audio, adding to HTML documents, 16–17aural media type, 83

auto value (background-size property), 201auto value (cursor property), 352

auto value (for margin properties), 277autosave attribute (input element), 410

B

background-attachment property, 197, 589,

652background-color property, 146, 160, 652background colors

fade effect, with PNGs, 284opacity of, 294–297table rows, 465–468, 630–632background gradients, 208–210background-image property, 139, 186, 215,

378, 379, 619, 652

in :first-line pseudo-element, 158background images

clipping, 260–261creating columns with, 539–541fade effect, with PNGs, 284font inheritance and, 107for headings, 139–141for initial caps with decoration, 133line of (repeating), 187–188for list item markers, 311–313for lists, 313–317

moving when window resizes, 582–584multiple, on one HTML element, 191–193panoramic presentations, 220–222positioning, 188–190

setting, 186–187shadow behind text, 165–168stationary (locked against scroll), 197–199stretching

across entire browser window, 202–203

as browser resizes, 199–202supporting transparent PNGs in IE6, 640–

background property, 87, 191, 652

in :first-line pseudo-element, 158for list item markers, 312background-repeat property, 134, 139, 201,

620, 652no-repeat value, 186repeat-x and repeat-y values, 187background-size property, 200, 202

| (bar) in attribute selector declarations, 51baseline rhythm, applying, 171–173BasicImage filter property, 207:before pseudo-element, 55, 308, 378, 672inserting special characters with links, 492–

493stylizing punctuation, 581bevel effects, 166

black and white, transforming images to, 179–

180, 484–486, 495blended PNG8 images, 211blink value (text-decoration property), 345block-level elements

box model, 62–70centering on web pages, 275–280images in tables as, 462

input and label elements as, 420making clickable, 639–640block-level elements

about, 13blockquote element, 12–13, 142, 145, 147body element, 5

margin and padding properties, 266percentage-value margins for, 505boldface (see emphasizing certain words)bookmarklets, 102

for troubleshooting CSS, 554Boot Camp application, 564border attribute (table element), 455border-bottom-color property, 653border-bottom-left-radius property, 183border-bottom property, 138, 146, 370, 653border-bottom-right-radius property, 183border-bottom-style property, 653border-bottom-width property, 653border-collapse property, 455, 465, 652border-color property, 281, 652

border-left-width property, 653border property, 68, 86, 139, 180, 280, 359,

654creating folder tab look, 369for dividers between list items, 304drop shadows behind images, 245forms, 398

for tables, 453–456zero value, 184border-radius property, 182border-right-color property, 653border-right property, 138, 145, 653border-right-style property, 653border-right-width property, 653border-spacing property, 652border-style attrbute, 455border-style property, 281, 653border-top-color property, 653border-top-left-radius property, 183border-top property, 138, 146, 653border-top-right-radius property, 183border-top-style property, 653border-top-width property, 653border-width property, 196, 281, 653borders

applying masks to, 262–263box model, 62–70

for browser’s viewport, 283–284defined, 63

dividers between list items, 304–305font inheritance and, 107

around images, 180–185, 282

as browser default, removing, 184–185rounded corners, 182–184

setting, 180–181images on, 194–197for pull quotes, 145–146stylized, for headings, 137–139table, 453–456

for web pages, 280–282bottom property, 654elements in multicolumn layouts, 522with shackling positioning, 100bottom value (background-position property),

189

[ ] (brackets) for attribute selectors, 51braille media type, 83, 482

breadcrumbs (navigation), 375–378breaks, forcing on long words, 118–119browser consistency (see cross-browser

consistency)BrowserCam service, 565, 649BrowserLab service, 565browsers

defaults of, resetting, 268–272, 594delivering rules with CSS filters, 561diagnosing issues with, 552extensions for, troubleshooting CSS with,

555image rendering method, setting, 205–206JavaScript availability, checking for, 623–

624moving background images when resizing,

582–584opening new, with links, 638–639page titles, 5

resolution-independent page layouts, 547–

550resolution-specific page layouts, 626scroll bar (IE), coloring, 272–275size of background imagepanoramic image presentations, 220–

222stretching across entire window, 202–

203stretching when browser resizes, 199–

202testing platforms from one computer, 564–

565testing sites with text browser, 565view source stylesheet, customizing, 590viewport, border around, 283–284BrowserShots service, 565

bugs, diagnosing, 552bullet types, 301bulleted lists (see unordered lists)

Submit buttons that look like text, 417–

419submit-only-once buttons, 416–417text links that operate like, 419

C

cached images, 255calculators for specificity, 79calendar events (see HTML basics, hCalendar

events)calendar (sample design), 470–479canvas (U.S flag sample design), 611capitalization (initial caps)

images for, 133–135large centered version, 131–133simple version, 130–131, 603caption element, 25–27, 457caption-side property, 654captions, tables, 457–458

189centered initial caps (paragraphs), 131–133centering

background images, 188–190elements on web pages, 275–280

in general (see alignment)text, 126

vertical, on web pages, 278chaining functions (JavaScript), 634characters (see HTML entities; words and

characters):checked pseudo-class, 53checking HTML validity, 29–31, 30, 102, 554,

649

for table cells, 458–460when to use, 56–61CleanCSS tool, 649clear property, 92, 94, 165, 654both value, 509

for definition list items, 324

in :first-line pseudo-element, 158clearing floats, 92–95, 371

click( ) function (JavaScript), 638clip property, 654

clipping background images, 260–261clock-specific stylesheets, 625–626code (view source) stylesheet, Firefox, 590collapse model (table borders), 455, 464collapsible menus, 383–386

color images, transforming to grayscale, 179–

180, 484–486, 495color property, 146, 654

in :first-line pseudo-element, 158form buttons, 411

for list bullets, 302colors

bullets (unordered lists), 302contrast between, checking for enough,

578for IE scroll bar, 272–275

of links, changing, 345, 346–347, 608differently within page, 348–349Nifty Corners Cube technique, 240opacity of background colors, 294–297table rows

alternating, 465–468, 630–632highlight effect, 468–469, 632–634text selection, 160–161

-column-gap properties, 176-column-rule properties, 176-column-width properties, 176columnar forms, designing without tables,

422–425columnar layouts, 175–177asymmetric or organic, 544–547fake, with background images, 539–541multicolumn with floats

columns in any order, 524–544fixed-width, 517–519

one-column pages, 505–507two-column layouts, 507–511with fixed-width columns, 511–514using grids, 592

columns, rounding corners on, 227–238fixed-width columns, 227–230Mountaintop technique, 235–238Sliding Doors technique, 230–235combining unlike elements, 574–576comic book look and feel, 252comma-separated lists, from unordered lists,

318–319comments in stylesheets, 83–84compression schemes, 15conditional comments (Internet Explorer),

559–561, 609Conference Schedule Creator utility, 29conflicts between rules (see precedence of CSS

rules)consistency between browsers (see cross-

browser consistency)contact information (see hCards)content area (box model), 63content for documents, 1content property, 581, 654context of parent element, changing, 101contextual menus, 386–388

contextual selectors (see descendent selectors)contrast (see designing with CSS)

contrast, color, 578copyright notice (see footer, adding to pages)corners, rounded

on columns, 227–238fixed-width columns, 227–230Mountaintop technique, 235–238Sliding Doors technique, 230–235

on elements, with JavaScript, 239–242

on image borders, 182–184counter-increment property, 328, 654counter-reset property, 328, 654counters( ) function, 328counting style (list), 301cross-browser consistencyeliminating auto-generated content, 268–

272, 594

supporting transparent PNGs in IE6, 640–

642testing on one computer, 564–565using CSS3 selectors in IE6 and IE7, 628–

630crosshair value (cursor property), 352CSS 2.1 properties (complete list), 651–661CSS 2.1 selectors, pseudo-classes, and pseudo-

elements, 669–672CSS filters, 561

CSS Frameworks, 591–593CSS instruction (resources), 645CSS resets, 268–272, 594CSS rules

applying, 35–37delivering to browsers with filters, 561organizing in stylesheets, 84–86precedence of

clarifying specificity, 77–79origin, understanding, 73overriding certain rules, 76–77sort order, understanding, 73–76separating from hacks, 562–563validating, 102–103

whitespace and line breaks, 37CSS sprites, 258–259, 339for image-based rollovers, 382CSS validator, 29–31, 102, 554CSS Validator, 649

CSS3 properties, delivering to appropriate

browsers, 642–644CSS3 recipes

animating rollovers with transitions, 354–

357applying attribute selectors, 51–52changing styles on anchored links, 392–

396converting lists into directory trees, 331–

335delivering CSS3 to appropriate browsers,

642–644

multiple background images on HTML

element, 191–193multiple columns of text, 175–177replacing text with images, 217–220resolution-independent page layouts, 547–

550rounded borders around images, 182–184setting page breaks for printed documents,

493–495striping table rows, 465–468using pseudo-classes, 53–54using pseudo-elements, 54–56using selectors in IE6 and IE7, 628–630validating CSS rules, 102–103

CSS3 selectors and pseudo-classes, 673–676using in IE6 and IE7, 628–630

cubic-bezier value (transition-timing-function

property), 356{ } (curly braces) for property declarations, 37cursive (font family), 106

web-safe fonts, 109cursor property, 351, 654cursor rollovers

animating with CSS3 transitions, 354–357image-based, 379–383

in navigation menus, 358–362, 597stylizing, 351–362

stylizing without JavaScript, 353–354

computer, 564–565testing site with text browser, 565

default style for, changing, 299–302dividers between list items, 304–305with hanging indents, 319–321styling, 323–328

depth, impression of, 576–577descendant selectors, 45, 670child selectors versus, 47for link colors, 349for list bullet customization, 302with nested lists, 364

for table cells, 458–460design resources for further reading, 646designing with CSS, 569–621

animating elements on page, 584–588checking for color contract, 578combining unlike elements, 574–576excessively large text, 570–571fireworks display, 588–589leading the eye, 576–577moving background images when resizing

window, 582–584sample designs, 593–621smart quotes for emphasis, 579–582unexpected incongruity, 571–574using grids, 591–593

view source stylesheet, customizing, 590dialog element, 329–331

direction property, 655directory trees, turning lists into, 331–335:disabled pseudo-class, 53, 675

disc (bullet style), 301discussion groups, list of, 647display element, for inline forms, 399display property, 120, 287, 655forms, 399

inline value, 319none value, 360, 381web form labels, 420div element, making clickable, 639–640dividers between list items, 304–305division elements, HTML5, 59DOCTYPE declarations, 7DOCTYPEs, 6–10document structure, HTML for, 2, 39HTML5 document division elements, 59

dotted effect (framing), 281dotted lines when clicking links, removing,

347–348double effect (framing), 281double-justified text, 126–128double quotes, stylized, 581Doubled Float-Margin Bug, 534drop-down submenus, 372–374print-ready, 487

drop shadows for images, 244–250dstart property (hCalendar), 29

dt element, 21, 328DTDs for HTML documents, 7dtend property (hCalendar), 29dynamic tabbed menus, 389–392

E

e-resize value (cursor property), 352each( ) function (JavaScript), 637ease-in value (transition-timing-function

property), 356ease-out value (transition-timing-function

property), 356ease value (transition-timing-function

property), 356easel (U.S flag sample design), 611edges on image drop shadows, smooth, 247–

250editor selection, 3–4elements (see page elements; specific element

by name)ellipsis ( ) for text overflow, 128–129

em dashes, 125–126

em element, 19–20for web form access keys, 428

em units, 120, 122, 124, 571emacs editor, 4

Embedded OpenType Font format, 115embedded styles, precedence of, 74embedding font files, 114–118embossed media type, 83, 482emphasizing certain words, 19–20first line of a paragraphs, 156–157with smart quotes, 579–582