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 Hi<string>! 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 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 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 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 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 &gt; *:first-child:before { content:&quot;\201C&quot;; }
 blockquote &gt; *:last-child:after { content:&quot;\201D&quot;; }

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

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