CSS Level 1 and CSS-Positioning

This document: http://www.utoronto.ca/ian/books/xhtml1/extras/

CSS LEVEL 1 AND CSS-P QUICK REFERENCE CHARTS
1. BRIEF PROPERTY DESCRIPTIONS
Property
background background-attachment background-color background-image background-position background-repeat border border-bottom border-bottom-width border-color border-left border-left-width border-right border-right-width border-style border-top border-top-width border-width clear color display float font font-family font-size font-style font-variant font-weight height letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left padding-right padding-top

Description
Shorthand for setting next five background properties (color, image, attachment, image position and image tiling rules) Set background to scroll with the page (default) or to remain fixed with the page scrolling on top of it. Sets the background color for an element. Note that background color is opaque, and hides whatever is behind it. Sets (using a URL) the image to use as a background. The image is tiled according to the rules set by backgroundrepeat. Set position for initial placement of the background image -tiling starts from this position. Applies only to block elements. Define how the background image is tiled (e.g., left-to right only, top-to-bottom only, or not at all). Shorthand for setting identical border widths and properties for all four borders around an element. Sets the border properties (size, style and color) for the border at the bottom of an element. Sets the width of the border at the bottom of an element. With inline elements, this does not affect line spacing. Shorthand for setting the color for all four borders. The default color is set by the color property. Sets the border properties (size, style and color) for the border at the left of an element. Sets the width of the border to the left of an element. With inline elements this does affect spacing between the element and text to it's left. Sets the border properties (size, style and color) for the border at the right of an element. Sets the width of the border to the left of an element. With inline elements, this does affect spacing between the element and text to it's right. Shorthand for setting the style (solid, dashed, etc.) for all four borders around an element. Sets the width of the border at the top of an element. With inline elements this does not affect line spacing. Sets the width of the border at the top of an element. With inline elements this does not affect line spacing. Shorthand for setting the widths of all four borders of an element. Clear an element to move down so that the margin is clear to the left (clear: left), to the right (clear: right) or to both margins (clear: both). (Analogous to - and replaces - the HTML markup <br clear="left">, etc.) Set the foreground (i.e., text) color. This is also the default color for element borders. Defines the display type (i.e. block, inline, or list-item) for the element. The value "none" removes the element from display -- the page is formatted as if the element were not part of the document. Float an element to the left or right (or turn floating off). This "floats" an element within the block element the element is directly inside. (Analogous to - and replaces - align="left" (etc.) attributes on HTML img elements). Shorthand for setting properties of the text font (family, size, weight, variant, style, and line height) Specify the desired font family for the text in an element. Given as a comma-separated list of desired fonts, in decreasing order of preference. Sets the desired size for text inside the element. Sets the style (e.g., italic) for text inside the element. Set the variant (e.g. small-caps) for text inside the element. Set the weight or boldness for text inside the element. Sets the height for an element, Relevant only for block elements, replaced elements (such as inline images), and absolutely positioned element (see position). Adjust the spacing between letters relative to a default value. Negative values can lead to overlapping letters. Set the line height or spacing between lines inside a block element. Shorthand for setting the three list style properties described below. Set (using a URL) an image to use as the marker for the list items. This overrides the marker set by list-styletype. Set whether list items should wrap around the list item marker (inside) or should line up next to the marker (outside). Set the type of the list, and the marker to use for the items (e.g., circles, digits, roman numbers, etc.) Shorthand for setting the margins on all four sides of an element (can set different margin settings on each side) Set the margin length (positive or negative) at the top of an element. With inline elements, this does not affect line spacing to the next line. Set the margin length (positive or negative) to the left of an element. With inline elements, this does affect spacing between the element and text to it's left. Set the margin length (positive or negative) to the right of an element. With inline elements, this does affect spacing between the element and text to it's right. Set the margin length (positive or negative) at the top of an element. With inline elements, this does not affect line spacing from the preceding line. Shorthand for setting padding space on all sides of an element (can set different padding sizes for all four sides) Set padding space at the bottom of an element. With inline elements, this does not affect line spacing. Set padding space for the left side of an element. . With inline elements this does affect spacing between the element and text to it's left. Set padding space for the right side of an element. With inline elements, this does affect spacing between the element and text to it's right. Set padding space at the top of an element. With inline elements, this does not affect line spacing.

Page Refs.
79, 200, 576 200, 576-578 56-57, 73, 78, 192-193, 578 78, 135-136, 193, 579 195-199, 579 193-195, 580 580 135, 181-189, 581 174, 181-189, 582 583 135, 584 174, 175-181, 585 585 174, 175-181, 586 587 56-57, 115, 135, 587 174, 181-189, 588 588 276-277, 279, 590 56-57, 83-87, 591 200-201, 310, 329, 594 140, 201, 204, 265, 268270, 340, 596 596 55-57, 73-76, 448, 450-451, 597 57, 76-77, 451, 598 73, 77, 598 73, 77, 79, 80, 451, 599 73, 77, 599 128-131, 173, 174, 181189, 204-206, 600 77, 602 169-173, 602 189, 603 189-191, 603 188-191, 603 188-191, 604 173-174, 604 174, 181-189, 269-273, 605 173-181, 269-273, 605 174,-181, 269-273, 282, 606 174, 181-189, 269-273, 282, 606 115, 135-136, 173-174, 610 174, 181-189, 611 174, 175-181, 612 174-181, 613 174, 181-189, 613

Last Update: 7 November 2000 Copyright © 1999-2000 Ian S. Graham

1/4

The XHTML 1.0 Language and Design Sourcebook http://www.utoronto.ca/ian/books/xhtml1/

CSS Level 1 and CSS-Positioning

This document: http://www.utoronto.ca/ian/books/xhtml1/extras/

BRIEF PROPERTY DESCRIPTIONS (CONT.) Property
text-align text-decoration text-indent text-transform vertical-align white-space width word-spacing

Description
Set text alignment (left, right, justify, center) for text inside a block element. (Analogous to - and replaces - align="left" (etc.) attributes on HTML block elements such as p or div). Set the text decoration (underline, strike-through, etc.) for the text content. Set the indent (positive or negative) for the first line of a block element. Negative value produce a 'hanging' indent. Transforms text before it is displayed, (e.g., to uppercase, to lowercase, or capitalize all first letters) Define how an element is vertically aligned relative to adjacent content, (e.g., super- or subscripts, middle-alignment, baseline-alignment, etc.) Applies only to inline elements. Defines how white space should be handled inside the element (e.g., preserve them (like inside an HTML pre element), collapse them, or disallow line wrapping in the absence of line breaks) Sets the width for an element, Relevant only for block elements and replace elements (such as inline images). Adjust the spacing between words relative to the default value. Negative values may cause words to overlap. Applies only to block elements.

Page Refs.
147, 164, 204, 371, 615 73, 77-78, 616 164-165, 617 78, 617 115, 131-134, 139, 370, 619 166-168, 621 128-131, 173-174,-181, 204-206, 375-377, 621 78, 164, 623

CSS Positioning Properties
clip left overflow position top visibility z-index Sets a clipping window for positioned elements -- content outside the window can be clipped (see overflow). Defines the position of the left side of a positioned element relative to a well-defined origin. The origin depends on how the element is positioned (absolute or relative). Defines how clipped content should be displayed. The value clip means that content outside the clipping window is clipped, while scroll calls for scrollbars inside the clipping window, if needed. Sets the positioning model for an element: absolute and relative define the special CSS-Positioning models; the default is static, which corresponds to the standard (non-positioned) mechanism. Defines the position of the top side of a positioned element relative to a well-defined origin. The origin depends on how the element is positioned (absolute or relative). Sets whether or not the element content is visible or invisible. Positioned elements can appear one above the other - z-index defines the order in which they appear (relative to the other specially positioned elements).
310, 315, 3316-317, 590 310, 312-314, 319-321, 601 310, 315-319, 182-184, 281-282, 610 309, 310-317, 613 310, 312-314, 319-321, 618 310, 324-329, 382-385, 620 310, 311, 314-315, 322326, 623

2. PSEUDO-ELEMENTS, PSEUDO-CLASSES AND SPECIAL DECLARATION DESCRIPTIONS
Term
A) Pseudo-Elements
:first-line :first-letter
Selects for the first line in a block element, and applies only to block elements (e.g. p:first-line) Selects for the first letter in an element (e.g., span:first-letter)
168-170 168-170

Description

Page Refs.

B) Pseudo-Classes
:link :visited :active :hover (CSS Level 2)
Select for hypertext links that are links to elsewhere (i.e., have an href attribute) (e.g. a:link) Selects for hypertext links that are links to elsewhere and that have already been visited by the user. Selects for hypertext links that are links to elsewhere and that are active (i.e., the user has selected the link) Selects for elements the mouse pointer is "hovering" above: often used to change the background color behind links when the mouse "rolls over" the link. (e.g. a:link:hover)
108-109, 110, 112 108,109, 110-112 110, 112 109-111, 111-112

C) Other CSS Declarations
!important @import
Appears at the end of a declaration (e.g., color: red !important) and raises the 'weight' of the declaration so that 87, 443, 445-448 it overrides all others that might apply to the same element. Used to import an external style sheet inline into the current style sheet. Must appear at the start of the style sheet. (E.g., 443-445, 446 import url(http://somewhere.org/styles/mystyle.css); )

3. CSS LEVEL 1 SELECTOR DESCRIPTIONS
Selector Example
div.main pre#special .main div.main em a.navbar:visited span p em, div.foo

Description
Class-based selector: Selects all div elements having the attribute class="main" ID-based selector: Selects all pre elements having the attribute id="special" (Note: there can be only one such elements -- no two elements in a document can have the same id attribute value) Select for all elements of any type having the attribute class="main" Contextual selector: Selects for em elements that are somewhere inside a div element having the attribute class="foo" Selects for a elements corresponding to already visited hypertext links that also have the attribute class="navbar" Element-based selector: Selects for all span elements Grouped selector: Selects for all em elements somewhere inside a p element, and also, selects for all div elements of class="foo".

Page Refs.
56, 81, 460 82, 84, 460 81, 460 82, 460 108-112, 460 55-56, , 460 56, 460

Page References: Refer to pages in The XHTML 1.0 Language and Design Sourcebook

Last Update: 7 November 2000 Copyright © 1999-2000 Ian S. Graham

2/4

The XHTML 1.0 Language and Design Sourcebook http://www.utoronto.ca/ian/books/xhtml1/

CSS Level 1 and CSS-Positioning

This document: http://www.utoronto.ca/ian/books/xhtml1/extras/

4. PROPERTY VALUES, ELEMENTS TO WHICH THEY APPLY, AND BROWSER SUPPORT
(TABLE KEY ON NEXT PAGE)
Elements it applies to: Inherit? (Y = yes)

Browser Support NN4.x NN6
P,B — P,B Y — P P,B! — Y P — P — Y P — Y B B Y B B! P P Y P — P P,B — P,B P — — Y P,B B B B B B B B B B Y P Y Y P,B Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y

Property
background background-attachment background-color background-image background-position background-repeat border border-bottom border-bottom-width border-color border-left border-left-width border-right border-right-width border-style border-top border-top-width border-width clear color display float font font-family font-size font-style font-variant font-weight height letter-spacing line-height list-style list-style-image list-style-position List-style-type margin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left padding-right padding-top text-align text-decoration text-indent text-transform vertical-align

Supported Values
shorthand for background properties scroll, fixed color, transparent url(urlstring), none several possible values (see text) no-repeat, repeat, repeat-x, repeat-y shorthand for border properties shorthand for bottom border properties medium, thick, thin, length 1 to 4 color values shorthand for left border properties medium, thick, thin, length shorthand for right border properties medium, thick, thin, length 1 to 4 values, each being dashed, dotted, double, groove, inset, none, outset, ridge, solid shorthand for top border properties medium, thick, thin, length shorthand for four border widths both, left, none, right color block, inline, list-item, none left, none, right shorthand for font properties comma-separated font names xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, length, num% normal, italic, oblique normal, small-caps bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 auto, length, num% normal, length normal, length, num, num% shorthand for list properties url(urlstring), none inside, outside circle, disc, none, square, decimal, lower-alpha, lower-roman, upperalpha, upper-roman shorthand for margin properties auto, length, num% auto, length, num% auto, length, num% auto, length, num% shorthand for padding properties length, num% length, num% length, num% length, num%
center, justify, left, right none, or one or more of: blink, line-through, overline, underline length, num% capitalize, lowercase, none, uppercase baseline, sub, super ,top, text-top, middle, bottom, text-bottom, num%

IE4.x
B Y Y Y B B Y P P Y P P P P P P P P B (Y Mac) Y B B! Y Y B Y Y Y Y Y Y Y Y Y Y P,B P,B P,B P,B P,B P P P P P Y P(no blink) Y Y P

IE5
Y Y Y Y Y Y

IE5.5
Y Y Y Y Y Y

OP3.6
P — Y Y Y Y Y,P

OP4.02
Y,B Y B Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y B Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y B B Y Y Y Y Y Y Y Y Y Y Y

A A A A B, R A A A A A A A A A A A A A A Y A A A Y Y Y Y Y Y A A A A A A B, R, AP A B L L L L A A A A A A A A A A Y B A Y Y B A I

P (Y Mac) P (Y Mac) Y P (Y Mac) P (Y Mac) P (Y Mac) P (Y Mac) P P (Y Mac) P (Y Mac) P B (Y Mac) Y P (Y Mac) B (Y Mac) Y Y Y Y Y Y Y Y Y Y Y Y Y P (Y Mac) P (Y Mac) P (Y Mac) P (Y Mac) P (Y Mac) P (Y Mac) P (Y Mac) P (Y Mac) P (Y Mac) P (Y Mac) Y P(no blink) Y Y P (Y Mac)

Y Y Y Y Y Y P Y Y Y Y Y P Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y P(no blink) Y Y P

Y,P Y Y Y,P Y Y,P Y Y Y,P Y Y P (no left) Y P,B (no lists) Y,B Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y B Y Y Y Y Y P (no blink) Y P,B P.B

Y Y Y Y Y Y

Last Update: 7 November 2000 Copyright © 1999-2000 Ian S. Graham

3/4

The XHTML 1.0 Language and Design Sourcebook http://www.utoronto.ca/ian/books/xhtml1/

CSS Level 1 and CSS-Positioning

This document: http://www.utoronto.ca/ian/books/xhtml1/extras/

PROPERTY VALUES AND SUPPORT... (CONT.)
Elements it applies to:

Inherit? (Y = yes)

Browser Support NN4.x NN6
P B — Y Y Y

Property
white-space width word-spacing

Values
normal, nowrap, pre auto, length, num% normal, length

IE4.x
— B

IE5.x
— (Y Mac) B (Y Mac)

IE5.5
P Y —

OP3.6
— Y,B Y

OP4.02
Y Y Y

Y

Y

B B, R, AP A

— (Y Mac) — (Y Mac)

CSS Positioning Properties
clip left overflow position top visibility z-index auto, rect(len1, len2, len3, len4) auto, length, num% none, clip, scroll absolute, relative, static auto, length, num% hidden, inherit, visible auto, int
AP AP,RP AP,RP A AP,RP (Y if inheri A t) AP,RP Y Y Y Y Y Y Y Y Y Y B B B B B B B Y Y Y Y Y Y Y Y Y Y Y Y Y Y — — — — — — — — B P B B B —

B (no Y visible) Y Y

Pseudo-Elements, Pseudo-Classs and Special CSS Declarations
:first-line :first-letter :link :visited :active :hover (CSS Level 2) !important @import
— — Y B B — — — Y B Y Y Y Y Y Y — — Y Y Y Y Y — (Y Mac) — (Y Mac) Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y — — Y Y Y Y Y Y — Y Y Y

Y (Win only) Y

KEY: "ELEMENT IT APPLIES TO" AND "BROWSER SUPPORT" COLUMNS
NN4, NN6
Netscape Navigator 4 and 6

OP3.6, OP4.02
Opera 3.6 and 4.02

IE4, IE5, IE5.5
Microsoft Internet Explorer 4, 5 and 5.5

NOTE: IE 5.5 available on Windows 9x/NT/2000 Only

“Element it Applies to” Column
Value A B I R AP RP Meaning Applies to all elements Applies to block-level elements (e.g., div, p) Applies to inline elements (e.g. span, em) Applies to replaced elements (e.g. img) Applies to absolutely positioned elements Applies to relatively positioned elements

“Browser Support” Column
Value
— (long dash)

Y P B B! Mac, Win

Meaning Not supported All values supported Partial support -- some values not supported Some bugs in implementation Severe bugs in implementation Macintosh- or Windows -specific E.g.: P, (Y Mac)

KEY: TERMS USED IN PROPERTY VALUE DESCRIPTIONS User-defined property values (Italicized)
Value urlstring color Description A partial or complete URL A color specified as a named color (see Appendix A), or as an RGB code using the syntax #rrggbb, #rgb, rgb(red,green,blue) or rgb(red%,green%,blue%) A length specified in relative (em, ex) or absolute (cm, mm, in, pc, pt, px) length units. Can be a positive or, depending on the property, a negative value. A real number; or a percentage (real) length value. A positive or negative integer.

Margin/Padding/Border Shorthand Assignment Rules
Value Assignment property: v1 property: v1 v2 v3 Meaning All sides given value v1 Top given value v1, right given value v2, bottom given value v3, left given value v2

length

property: v1 v2 v3 v4

Top given value v1, right given value v2, bottom given value v3, left given value v4 Top and bottom given value v1; right and left given value v2

num; num% int

property: v1 v2

5. USEFUL WEB REFERENCES
http://webreview.com/pub/guides/style/style.html CSS Tips and browsers bug workarounds: http://www.richinstyle.com/bugs/table.html http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html http://www.css.nu/faq/index.html http://css.nu/pointers/bugs.html

Last Update: 7 November 2000 Copyright © 1999-2000 Ian S. Graham

4/4

The XHTML 1.0 Language and Design Sourcebook http://www.utoronto.ca/ian/books/xhtml1/

Sign up to vote on this title
UsefulNot useful