CSS
From MobileRead
CSS stands for Cascading Style Sheet where a style sheet controls the presentation of information in a document.
Contents |
[edit] Overview
A Cascading Style Sheets, level 2 (CSS2) is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance. A simple style sheet might look like:
h1 { color: blue;
font-weight: bold;
font-size: 12pt }
h1, h2, h3 {text-indent: 0em}
body {font-size: small; widows:2; orphans:2;
margin-left: 5px; margin-right: 3px }
Style information may be contained in one or more files (usually with a .css extension), within a <style> </style> block in the header element, or as a style attribute in a tag. Since it is possible that the same style could be defined differently in different places the cascade rule will be applied. The more specific definition will override the more generic definition. Note in the example above the <body> tag specifies a font-size that will be overridden by the more specific <h1> tag. (h1 is within the body so it is more specific.)
A style entry generally begins with a ruleset which a keyword (a tag name or the value of the class attribute) with optional modifier and the data between {}. Another type of entry is the ATRule which begins with @keyword and ends with a semicolon (;)
If the ruleset is an attribute it starts with a point (.) and can be used with a tag name to provide more control for example: h1.title. An entry using on an attribute might appear as .sample to apply that attribute entry to all tags.
[edit] Units of Measurement
Non-zero coordinate and size values will have specified units. These values need not be integers. Note that some are scalable, based on the current font size or other existing values, while some are fixed.
| px | Pixels |
| ex | x-height of current font |
| em | font-size of current font |
| pt | Points = 1/72 in |
| in | Inches |
| cm | Centimeters |
| mm | Millimeters |
| pc | Picas = 12 pts |
| % | percentage |
[edit] Fonts
Fonts and Font sizes can be specified in the CSS. The font-size attribute can specify a specific size using units or a generic scalable size. The scalable sizes are to be preferred as then the user can override them as needed. These values include:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
A given system may not support all 7 sizes but may substitute the same size for missing values. Font-size can also be set to larger or smaller to request a one jump from the current size. Percentage values can also be used to change the font size.
See the article on Fonts for more information on fonts themselves and what CSS control there is over fonts.
[edit] Text
In addition to fonts the CSS system provides control of the overall look, typography, of the text. Most text attribute effect blocks of text such as a paragraph but some control inline text. These attributes include
| attribute | value | notes |
|---|---|---|
| text-indent | number % inherit | controls indent of first line in a block, may be negative. |
| text-align | left right enter justify <string> inherit | string value only used in a table to align text to a specific cell. |
| text-decoration | none underline overline line-through blink inherit | blink is likely to be ignored. |
| color | colors or number value | 16 standard colors are recognized. |
| text-shadow | color and three numbers | color is required. three number specify the shading distance, right, and down distance for the shadow. The values may be repeated after a comma for more effect. |
| letter-spacing | normal, number | added distance between letters, may be negative |
| word-spacing | normal, number | added distance between words, may be negative. |
| text-transform | none capitalize uppercase lowercase | can be ignored for non-latin characters |
| white-space | normal pre nowrap inherit | pre does not remove white space |
[edit] Leading
Leading is the distance between lines of text. Generally lines of text are vertically centered within a box boundary and evenly spaced however not all implementations support this. The line-height property can be used to specify a value for leading. One half the leading value will be used above and one half below the line. Values include:
- normal - the default value determined by implementation to provide a pleasing effect.
- <number> - an computed positive value by multiplying the font size
- <length> - an explicit positive value with units specified.
- <percentage> a positive value reference to the font size.
- inherit - final computed value from an earlier box.
Note that if the line-height is less than the font height (size) the font will "bleed" outside the box.
[edit] For more informaton
- CSS2 specification
- Language specific quotes - this site shows how to use CSS to generate curly quotes in many different languages
