Cascading Style Sheets/Typography
Colors
Always reset the :visited color when you reset the :link/default color of a link for consistent behavior between IE and standards-compliant browsers
Use three char styles as shorthand for hex color codes with repeating patterns (#FC0 = #FFCC00; #AAA = #AAAAAA)
Line Height
The difference between the line-height and font-size is called leading
The baseline is an invisible line onto which all type characters sit
Descenders are lowercase letters that hang below the baseline, including j, g, y, and p.
Baseline shift involves moving characters up or down in relation to the baseline to align entities, bullets, brackets, numbers and other font-based graphics with letters
Use relative positioning and minor top and bottom movements to implement baseline shifting with CSS
(font-size + vertical padding + vertical margin)/line-height for each element must be a multiple of a baseline number
(font-size + vertical padding + vertical margin) * line-height gives you the total height of each row of text
The leading for inline replaced elements(img, object, select, etc) in IE6 collapses the half-leading of the line with the half-leading of the preceding and following line. To workaround this, give the replaced element top and bottom margins equal to half of the difference between its height and the line-height
Inline text needs the same font-size, line-height, vertical alignment, padding, border, margins and position values to line up consistently across browsers
Use line-height to emulate height and padding to emulate width/2 for inline elements
Set generous bottom margins for paragraph tags globally for create consistent and maintainable leading standards
Set vertical margins equal to the global line-height to maintain vertical alignment for text with standard size fonts. For text equal to the line height, set vertical margins and line-height equal to 100% of the text height
Use multiple fonts in one line, such as <em>Hi</em><string>!</strong> to override line-height and reset it relative to the largest font-size
Set uniform left and right padding for container divs to create consistent and maintainable gutter standards
Set wider left margins for list items and quoted text to facilitate hanging punctuation
Specify the line height to be the same as the height of the box to align text vertically
If line-height is specified as a floating point number instead of a fixed unit, the inherited line-height of child elements will be the font-size of the child element multiplied by the number
If line-height is specified as a relative unit, the inherited line-height will be the same as that of the parent element
Use a font with a color matching the background and a font size larger than the line-height to maintain a vertical consistency for text which does not match the flow of the page
Font Size
The top and bottom margins between the font-size and the line box are half-leading, so a 12px font-size on a 18px line will half 3 pixels of space on the top and bottom between the text and the next line
Divide the font-size of an element by that of its container to convert it to ems. Multiply by 100 to convert that to percentages
Divide the width of a comp layout by the default browser font size of 16px to get the min or max width in ems. Multiply by 100 to convert that to percentages.
Use percentages for all fonts to allow for browser selectable sizing
Use a wrapper with the desired font-size when setting margins, letter-spacing, or text-spacing in IE7, since the font-size of the parent element is used to compute the relative property values instead of font-size of the element itself
Font Family
Never use carriage returns within font-family lists since it won't work in IE
Use font-family:monospace to style pre-tags in Opera
Vertical-Align
Define font-size and the corresponding line-height to set a vertical rhythm
Use offsetting values for vertical-align and line-height, such as { vertical-align: 10px; line-height: -10px } to emulate vertical padding for inline elements
Use overflow:hidden on elements with display:inline-block to change their baseline for vertical alignment
Use a pixel value for line-height to reposition input elements cross-browser
List-Style
Use direction: rtl; on the ul or ol to right align bullet points next to a list item. If there are spacing issues, use a bullet background-image with background-position:right center as an alternative
Use display:list-item and list-style-type:decimal to enumerate an element that is not semantically part of a list
Use list-style-type:decimal to enumerate an unordered list when you cannot modify the markup
Use a margin reset on ordered list with hasLayout and add margins to the list items to prevent the enumeration from being cropped
Text-Decoration
Use text-decoration:none and list-style-type:none to remove bullets and underlines from links and lists respectively.
Use text-decoration:line-through instead of the deprecated <s> and <strike> tags to strikethrough text
Text-Transform
Use text-transform:capitalize to capitalize headers and section titles
Text-Indent
Use text-indent: 0 on elements with display:inline-block to avoid inheritance and has Layout issues since IE6 crops text moved outside the container due to negative text-indent values
Use text-indent and text-align on block elements to affect their children, and vertical-align on the children themselves
Use a negative value for text-indent to create an outdent for hanging punctuation
Use text-indent to reposition inline-blocks in Webkit, but use horizontal margins if cross-browser compatibility is necessary
Text-Overflow
Use text-overflow to truncate text inside fixed width/height containers with overflow visible
White-Space
Use white-space:pre with a return after each letter to display text that reads vertically
Use white-space: -moz-pre-wrap; for Firefox 2, word-wrap: break-word; and white-space:pre; for IE6/7, the pre tag for Safari 2 and white-space: pre-wrap for Opera, Safari 3, and Firefox 3 and to force wrapping on predefined text
Use white-space: pre; on a span with a single carriage return or its entity equivalent ( ) instead of two br tags to add a space between two inline sentences. Use conditional comments to insert another span that has a word-wrap:pre rule around the paragraph preceding the one with the predefined spacing to achieve consistent display in IE6/7
Word-Wrap
Use margins and the <wbr> tag (or its equivalents) to control wrapping and vertical alignment of list items and headers with long unbroken strings when overflow:hidden is not an option
Use the <wbr> tag or its entity equivalent in conditional comments <![if (!IE)]> <![endif]> to insert a conditional carriage return that will wrap long words if necessary at the position where the tag is placed. Use wbr:after { content: "0200B" } in CSS to insert the equivalent HTML entity for Opera and Safari, which do not recognize the <wbr> tag, in order to produce the effect on those browsers. Use word-wrap:break-word if Firefox 2, Safari 2, and Opera 9 are not supported.
Pseudo-Elements
Use p:first-letter to set a large font and create a literature style drop cap effect for paragraphs
Use a:first-line to set a specific line-height for links that wrap
There can be only one pseudo-element per selector, so :first-letter and :first-line cannot be used together
In IE6 and IE7, a pseudo-element has to be followed by whitespace to be parsed correctly, so format your style sheet accordingly to avoid mysterious errors like this:
P:first-letter{ color: blue; } /* Fails due to the lack of whitespace */
Succeed - P:first-letter { color: blue; } /* Note the added space */
In IE6 and IE7, a pseudo-element has to be at the end of a selector to be parsed correctly, so make sure to put :first-line or :first-letter after any :hover, :focus, or :first-child pseudo-classes as follows:
P:first-letter:hover { color: blue; } /* Fails due to the lack of whitespace */
P:hover:first-letter { color: blue; } /* Note the ordering */
Generated Content
Use CSS3 selectors, generated content, and Unicode values to dynamically surround content in blockquotes with quotation marks:
blockquote > *:first-child:before { content:"\201C"; }
blockquote > *:last-child:after { content:"\201D"; }
Opacity
Text in Firefox 3 Mac with opacity set on it looks messed up, and text in Firefox 2 Mac with opacity set has reduced contrast
Unicode Direction
Use unicode-bidi:bidi-override; and direction:rtl; to create a left-handed scrollbar
Vertical Text
Use the writing-mode property with a value of tb-rl value to rotate text 90 degrees clockwise and align it to the right in IE, and using the transform property with a value of rotate(90deg) in standards browsers
Pagination
Use the widows and orphans properties to set the minimum lines of text displayed at the top and bottom of the page respectively when generating page breaks in CSS