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 work around 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