Including: To specify alternatives: rel="alternate stylesheet" (some browsers provide a menu to select this) Any stylesheet with a title attribute is preferred over one which does not. However, multiple titled style sheets cannot be used, but multiple title-less stylesheets can be used. (CSS 17) @import(other.css) - can be used ONLY at beginning of style sheet Selectors (HTML): html p Descendent html > p Direct child only p + p Subsequent sibling * everything p.class class (can omit element: "*.classname" is ".classname") p.c1.c2 AND of classes (doesn't work in IE6 or before) p#id id :link unvisited only (but buggy browsers apply to all) :visited visited link :focus Has keyboard focus :hover Mouse is over element :active Link while it is being clicked :first-child Is the first child of its parent :lang(..) Works like |=, but also gets lang from other sources :first-letter pseudo-element, limited attributes :first-line pseudo-element, limited attributes :before Generated content, apply "content:" property :after a[href] has attribute a[href="foo"] has certain value for attribute ^= begins with $= ends with *= substring match ~= space-separated substring match |= language match (dash-separated prefix) Note that [id=] is different from #id in the specificity it adds, but [class~="value"] and .value are identical. Specificity, Inheritance, Overriding: 1,0,0,0 for inline styles (as of CSS 2.1) 0,1,0,0 for each ID (but only if given as #id, not [id=...]) 0,0,1,0 for each attribute or pseudo-class 0,0,0,1 for each element or pseudo-element 0,0,0,0 for * Grouped styles are "ungrouped" for specificity comparisons - there is no guarantee that a {} block will be applied all-or-none. Most box-model properties are not inherited. Inherited values have "no specificity", which is lower than "0,0,0,0". (pretty horrible terminology, eh?) Note that this means a universal selector has greater specificity than an inherited property, which may not be what you wanted. There is backpropagation of background styles from to The following is the order of priority: reader !important author !important author reader user-agent Within a priority and specificity, later wins. Imports are "before" the importer. "!important" declarations are all grouped separately and used first, but for whatever reason, this is not handled as another specificity number Visual Formatting Model General Notes: A replaced element is one whose dimensions are defined by something external, such as img, input, textarea, select, and object. Block elements are those which do not allow overlap above or below. Normal Flow applies to everything which is not floated or positioned. From inside out, the areas are content, then padding, then border, then margin. The width and height refer to that of the content area. The background of the element is applied to the padding. If the border has gaps, the background is also visible there. Margins can be collapsed in between elements; this happens with both the top and bottom margins of adjacent elements and with the same-side margins of parents and block-level children unless the parent has margins or padding. Margin is the only one of these which can be negative. The "containing block" of a static element is formed by the content edge of the nearest block-level, table cell, or inline-block ancestor. The root is either "html" or "body" depending on the browser. See http://www.w3.org/TR/CSS2/visudet.html and CSS 160 and on, also CSS 303. Normal Flow: Block Nonreplaced Horizontal: Width must be equal to that of the parent. Of the horizontal properties, only margin and width may be set to "auto"; the rest must be specified or 0. If nothing is auto, right-margin is implicitly changed to auto (in LTR languages). If both margins are auto, they are set equally. If the width and one margin are set to auto, the margin is changed to 0. If one of the margins is made negative, the child becomes wider than its parent. Percentage values are all relative to the width of the containing block. Block Replaced Horizontal: As above, except that a width of "auto" takes that of the source. If the width is changed from its original, the height may be scaled to match. Block Nonreplaced Normal-Flow Vertical: If height is specified as greater than required, it acts like extra padding. If it is too little, the browser should provide a scroll bar or other mechanism to make things fit; see the "overflow" property. As with horizontal properties, only the height and margins can have the value auto. If any margin is auto for a block element in normal flow, it becomes 0; they do NOT result in centering it within its parent. Percentages are relative to the height of the containing block, but only if the height of the containing block is explicitly given. If it is auto, any percentages relative to it are also changed to auto. Auto- height elements have their height set by their children - if they have only block-level children, the child margins are combined with the parent, but if they have inline children, their margins are INSIDE the parent's content. Inline Nonreplaced: Each character gets a box, with a content area determined by font-size and total height by line-height. Text is baseline-aligned by default. The line height is that of the tallest thing on the line. If you move the tallest thing up with vertical-align, the line becomes taller. (CSS 185 summary, Chapter 6 details) Values for vertical-align are: top: align the top of the inline box with containing line box bottom: bottom of the inline box with containing line text-top: element inline box top with parent's content area text-bottom: as above for bottom middle: midpoint of element's box with .5ex above parent's baseline super: moves unspecified amount up sub: moves unspecified amount down percentage: moves up or down by percentage of element's line-height Line height inherits from block-level elements as computed for the *parent* if it is set it units of em or ex, but NOT if set as a scaling factor. For this reason, setting it as a scaling factor is desirable. Note that left and right borders apply only at the beginning and end of the whole paragraph, not each line, which may be counterintuitive. The same is true of left and right margins. Adding padding will push the borders out, but not change how the lines are laid out with respect to each other. Top and bottom margins do not apply to inline nonreplaced elements (CSS 193). Inline Replaced: Line height is not used to determine the height of the box, but it still present for the replaced element, and is used for vertical alignment values which are calculated as percentages of line height (CSS 195). SVG images may also use CSS values internally. Unlike nonreplaced elements, padding and margins are used to calculate the size of the box. Negative margins are also possible. By default, replaced elements have the bottom of the element aligned with the baseline. The "correct" behavior, implemented in some browsers, is for a single replaced element inside a div or table cell to be laid out as if there were text; to get what you probably wanted, make the child element "display: block" instead. Alternatively, make font-size and line-height 1px (CSS 197) Float: Floating has always been available for images with alight=left and align=right. Now it's available for everything with the float: property. The options are still left and right (or none). Margins around floated elements are NOT collapsed. Floated nonreplaced elements must have a declared width. All floated elements generate a block box; "display: block" is unnecessary and redundant. Layout within the containing block is described in detail at CSS 287; basically, start to the side of where it's declared, and adjust in or down as necessary to avoid overlap. Floats can stick out of the bottom or right of their parent, if they are larger, unless the parent is also floated. Negative margins, as usual, can move the float outside the parent. If negative margins cause overlap, block boxes are behind the float and inline boxes are in front of it. To stop something from overlapping with a float, use the clear: property. The following thing's margin is collapsed into the extra clearance, so if you want a certain margin, put it on the floated thing instead. Position: static This is the default. relative: Move a certain distance from the default. The space it would normally have occupied is preserved. Note that setting something to relative with no offset still makes it a containing block for absolute children. absolute: remove the box from the flow of the document and positioned with respect to its containing block. The containing block, here, is the nearest ancestor that has a position other than static. For a block-level ancestor, the containing block is the padding edge, not the content area. The values given are the distance from the content block to the child's margin edge, and positive values generally move it inward. (CSS 305) If both left and right or both top and bottom are given, this effectively sets width or height, respectively. If you use min- or max- size properties, they will override the positioning, making the element grow to the right and down. "auto" has special behavior on everything except bottom - they put things where they would have been in normal flow (but they still don't take up space, and they'll overlap the next normal flow thing if all the values are auto). If width is auto, it is "shrink to fit". If both left and right are auto, they are both set the same (doesn't work in IE67). If things are overconstrained, fixed: Like absolute, but the containing block is the viewport. Some display types are changed for positioned elements; for example, inline-xxx is not available. See table in CSS 205. Other Display Types: Inline-block elements are placed as if they were inline, but then act like a block element to their children. This is available only by setting the display manually and is not the default for anything. Width and height settings apply to the element. Run-in elements, if followed by a block box, become inline at the beginning of the following block. This is basically to support headings being joined into the following text. Note that inheritance of properties into the run-in element is from their real parent, not from the block into which they're placed. Support for this is not available in all browsers. Overflow: Visible (default): The content may extend outside of the box. Hidden: Hide the content which is outside the box. Scroll: The browser should provide some unspecified method of accessing the content, such as one or more scrollbars. The scrolling mechanism should always appear if scroll is used, even if the content fits. Inherit: This property is not inherited by default. Auto: "Do whatever you think best" - this could mean providing scrollbars if and only if the content does not fit. Clip property: This is a separate property. It is specified as rect(top, right, bottom, left), where the values are distances from the upper-left corner. "auto" can be used in place of any of the values. Percentages are not permitted, so it is basically impossible to center without knowing the size of the content. Lengths can be negative, but the content will not move up or left to fill the clipping area. (CSS 314) Visibility: Set to "hidden" to make the element invisible. It still affects layout, and is thus different from "display: none". The "collapse" value is the same as hidden on everything that isn't a table. Tables: Lists: The list market (bullet, etc) is not part of the content area; this can be changed with list-style-position. There is no way to control the distance between the content and the marker in CSS 2.1. References: CSS: O'Reilly Definitive Guide, Eric Meyer, 3rd Ed Page Numbers http://www.w3.org/TR/CSS2/ vim: ai wm=5