CSS - Cascading Style Sheet
| Filename extension | .css |
| Internet media type | text/css |
| Developed by | World Wide Web Consortium |
| Initial release | 17 December 1996 |
| Type of format | Style sheet language |
| Standard(s) | Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Recommendation) |
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.
Syntax of CSS
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 (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.
Pseudo-classes are used in CSS selectors to permit formatting based on information that is outside the document tree. An often-used example of a pseudo-class is :hover, which identifies content 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. A pseudo-class classifies document 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.
selector [, selector2, ...] [:pseudo-class] {property: value;[property2: value2;...]}/* comment */
How to Use CSS ?
CSS information can be provided from various sources. CSS style information can be in a separate document or it can be embedded into an 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):
- CSS information can be provided from various sources. CSS style information can be in a separate document or it can be embedded into an 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
styleattribute - Embedded style, blocks of CSS information inside the HTML itself
- External style sheets, i.e., a separate CSS file referenced from the document
- Inline styles, inside the HTML document, style information on a single element, specified using the
- 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 each element's presentation
The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading.
The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading.
An "external" CSS stylesheet file, as described above, can be associated with an HTML document using the following syntax:
An "external" CSS stylesheet file, as described above, can be associated with an HTML document using the following syntax:
<link href="path/to/file.css" rel="stylesheet">
An internal CSS styling can be done easily which can be used in an HTML document
<style ="text/css">
/* css codes */
</style>
It can also be used with HTML element with style property. the syntax of this is
<div style="property:value;">
any written document
</div>
