The Stylish Way to Style
Syntax CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.[2] In CSS, selectors are used to declare which of the markup elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements that match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the Document Object Model. Pseudo-classes are another form of specification used in CSS to identify markup elements, and in some cases, specific user actions to which a particular declaration block applies. An often-used example is the :hover pseudo-class that applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), "c".[clarification needed] A pseudo-class selects entire elements, such as :link or :visited, whereas a pseudo-element makes a selection that may consist of partial elements, such as :first-line or :first-letter. Selectors may be combined in other ways too, especially in CSS 2.1, to achieve greater specificity and flexibility.[3] Here is an example summing up the rules above: selector [, selector2, ...] [:pseudo-class] { property: value; [property2: value2; ...] } /* comment */ [edit] Use Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup. Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational. Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to use the HTML font and other presentational elements for each occurrence of that heading type. The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C now considers the advantages of CSS for defining all aspects of the presentation of HTML pages to be superior to other methods. It has therefore deprecated the use of all the original presentational HTML markup. CSS files are inserted into HTML documents using the following syntax: [edit] Sources CSS information can be provided by various sources. CSS style information can be either attached as a separate document or embedded in the HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium. Priority scheme for CSS sources (from highest to lowest priority): Author styles (provided by the web page author), in the form of: Inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute Embedded style, blocks of CSS information inside the HTML itself External style sheets, i.e., a separate CSS file referenced from the document User style: A local CSS file the user specifies with a browser option, which acts as an override applied to all documents User agent style Default styles applied by the user agent, i.e., the browser's default settings for element presentation The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on by a source of lower priority such as the user agent style. This process is called cascading. One of the goals of CSS is also to allow users greater control over presentation. Someone who finds red italic headings difficult to read may apply a different style sheet. Depending on their browser and the web site, a user may choose from various style sheets provided by the designers, may remove all added style and view the site using the browser's default styling, or may override just the red italic heading style without altering other attributes. File highlightheaders.css containing: h1 { color: white; background-color: orange !important; } h2 { color: white; background-color: green !important; } Such a file is stored locally and is applicable if that has been specified in the browser options. "!important" means that it prevails over the author specifications.
