(¯`·.¸(¯`·.¸ CSS Galore ¸.·´¯)¸.·´¯)
This file, originally @ http://www.htmlcompendium.org/Menu/0framefn.htm,
was ported to http://www.searchlores.org in November 2000

Style sheets are lists of style instructions that a browser follows to present a page. A browser presents an HTML document according to a predefined set of instructions most of which are defaults or de facto standards. CSS allows those standards to be modified or adjusted, or more, to suit the page-designer.

Style instructions can be defined in four places, as part of an HTML tag (presented as an attribute/argument structure); defined in the <head> section of a page (using the <style> tag and a typical style definition); as a separate document defined as a style sheet using the file extension of "*.css"; and as a style sheet referred to by another style sheet (using the @import rule). More information on this can be found in the Coding Notes for styles.

CSS Hierarchy

The Cascading Style Sheet (CSS) is a grouping of at-rules and rule-sets that control how an HTML page is described to a browser.

1. @rules (aka at-rules)

The at-rules provide over-all instructions as to how a document is to be handled. The at-rules can describe the selection of a character set for the document (@charset), selection (and subsequent downloading) of fonts (@font-face), the importation of supplementary style sheets (@import), the specification of specific media for which the page is designed to support (@media) or how a page is to be formated for printing (@page).

Typically, the @rules would be the first elements of a style declaration. The @import rule specifically states that "any @import rules must precede all rule sets in a style sheet" (W3C CSS2). I would think that this would be true for all @rules — don't take my word for this, but it is logical.

The opening terminator of an at-rule is the "at" character ("@") followed by a keyword (no space allowed between them) and the closing terminator is the first instance of a semi-colon ";"

2. Rule set

The rule set gets down to the specifics of how a specific text block is to be displayed or presented in an HTML document.

The CSS rule set consists of two main parts, a selector and a declaration. The selector is everything up to, but not including, the opening brace character ("{"). The declaration is everything between the opening ("{") and closing ("}") braces.

2.1 Selectors

The selector is the "handle" that identifies specifically what is to be modified (from the HTML defaults) by the content of the declaration.

The selector could be the universal selector ("*" — matches all elements), the name of an HTML tag, or the tag and one of its attributes (attribute selector), a pseudo-class, a class or an id. There are currently, four types of selectors, block, in-line, list-item and table.

Multiple selectors are permitted and there is a series of rules that govern this.
Syntax Meaning
* universal selector
p (an HTML tag) all <p> selectors
p em descendant selectors — all instances of an HTML <em> tag contained between a <p> and its closing tag.
p > em child selectors —
p:first-child when <p> is the first child of a parent element (i.e. when <p> is the first paragraph after a <body> tag.
a:link
a:visited
an anchor hyperlink before it is visited (:link) or after (:visited)
p:active
p:hover
p:focus
when a mouse pointer pauses over an element (:hover); after a reader presses a mouse button but before it is released (:active); and while an element accepts keyboard or other input (:focus)
p:lang(en) a <p> when the lang attribute is set to "en" and/or when human language is set in the <meta> tag.
p+em when <em> is immediately preceeded by <p>
p[title} all instances of the <p> tag where the title= attribute has been set, no matter what the argument of title
p[title="important"} all instances of the <p> tag where the title= attribute has an argument exactly equal to "important".
p[title~="interesting"] all instances of the <p> tag where the title= attribute has an argument of a list of space separated words, one of which exactly equals "interesting". (the word, not including the quotes.)
p[lang|="en"} all instances where the attribute to the <p> tag has a hyphen-separated list of arguments beginning with "en" (syntax rendered left to right)
p.warning HTML only, The same as p[title~="warning"]
p#someid any instance of <p> where the id= attribute is set with an argument of "someid"

2.1.1 Block Selectors

CSS dictates that everything happens in a box. This type of box occupies space and causes other boxes to be contained within a block box or pushed farther down the page by it.

A listing of block selectors is available here.

2.1.2 In-line Selectors

The in-line selector does not cause the movement of a block box. It causes the properties defined to act on the specified text without disrupting the position of a block box.

A listing of in-line selectors is available here.

2.1.3 List-item Selectors

This selector type creates a principal box that bounds the content and a second box for a marker. The marker can be inside or outside of the principal box and can contain a bullet, image or number as a marker. Uses the marker: property.

2.1.3 Tables Selectors

The HTML tag <table> can be specified as a block element or an in-line element depending on the specification and where it is used. The table properties all apply only to a table structure and the HTML structure must be present for them to work.

2.1.4 Pseudo-Elements

Pseudo-elements address those functions that a browser has access to that HTML does not. Things like identifying the :first-letter of a paragraph or identifying when a mouse pointer is over a specific area of a page.

2.2 Declarations

The declaration is further sub-divided into properties and values each separated from the other by a semi-colon";". The property stipulates what, of the selected element, is to be modified and the value stipulates how it is to be modified.

2.2.1 Properties

This tells the browser how a selected item is to be modified.

2.2.2 Values

Values are listed as sub-ordinate elements to properties, above. Click on properties, and select a property to see the relevant values. Where multiple values can be stated, they must be separated by a comma (",").



Petit image
Back to others.htm


(c) 2000: [fravia+], all rights reserved