text-alignalignment of text to the containing block: left, center, right, or justify. justify is normally used for paragraphs when there is a great deal of content on the page (such as this document). Be careful with center and right alignment: web pages on wide monitors with a mixture of center, left, or right justification can induce a “ping pong” effect in the viewer. | h1 { text-align: center; }line-height| The vertical space between lines of text, referred to as “leading” in most other typographical contexts. Usually measured in percentages. | p { line-height: 200%; }letter-spacing | The space between letters. Usually applied to heading elements, typically specified in ems. | h1 { letter-spacing: 0.8em; }word-spacing | The space between words. Usually applied to heading elements, typically specified in ems. | h2 { word-spacing: 2em; }text-indent| Amount of horizontal indentation of the first line of text. Commonly applied to paragraphs (especially the first paragraph in a block of text) in em units. | h2 + p { text-indent: 2em; } text-decorationCan take values of underline, overline, line-through, none, and blink. Never use blink.You will make me angry. You wouldn’t like me when I’m angry.
Be careful with underline, as using it can confuse users into thinking that underlined text is a link. Conversely, text-decoration: none set on an a selector will remove underlining on links, which also has to be approached with care.
border-bottom may be used as a substitute for text-decoration: underline, and border-top for overline, as they have more flexibility.
line-through is usually used to indicate redacted or corrected text, such as a previous price. | h3 { text-decoration: underline; }font-styleFormats text to italic or re-formats it to normal. A value of oblique is also possible to force a font without an italicized face into pseudo-italics. | h4 { font-style: italic; }font-weightSets the weight (boldness or lightness of a font). Can be specified in numbers (100 to 900, in increments of 100; 400 is normal, 700 is bold; 100 is light), or by keyword: bold, bolder, or lighter. Note that the effect of this should be tested, as not all fonts have generated light or bold variants.
Avoid font-weight on headings, as it rarely makes any difference. (h1 - h4 are bold by default. Do not use font-weight as a substitute for markup: headings should still be marked up as headings.
A font-weight example, using Zurich as a base font: | Font-weight keyword | Font-weight numeral | Resulting font face | | 100, 200, 300| Zurich Light | normal400| Zurich Regular | | 500| Zurich Medium | bold600, 700| Zurich Bold | | 800| Zurich Black | | 900| Zurich UltraBlack | | | | | | | | |
| p { font-weight: bold; } text-transformTakes values of uppercase, lowercase and capitalize. Especially useful on headings and links, where it can be used to ensure consistency of text appearance without worrying about always leaving the capslock key on (or off) while creating content. | h1 { text-transform: uppercase; } font-variantSets the text content of the selected element to Latin-style small-caps. Useful for headings and the first lines of opening paragraphs. | h1 { font-variant: small-caps; } | | | | | | | | | | | | | | | | | 
Auto-Generate Image Thumbnails With CSS
“Curved” Dropshadows With Pure CSS
Captioning Portfolio Images With GET
so we don't need the jQuery minimum length anymore:) cool!
