CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on braille-based, tactile devices. Similarly, identical HTML or XML markup can be displayed in a variety of styles, ‘brands’, liveries or colour schemes by using different CSS.
CSS information can be provided by various sources:
- Author styles (style information provided by the web page author), in the form of
- external stylesheets, i.e. a separate CSS-file referenced from the document
- embedded style, blocks of CSS information inside the HTML document itself
- inline styles, inside the HTML document, style information on a single element, specified using the “style” attribute.
- User style
- a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents.
- User agent style
- the default style sheet applied by the user agent, e.g. the browser’s default presentation of elements.
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.
Advantages of using CSS include:
- Presentation information for an entire website or collection of pages can be held in one place, and can be updated quickly and easily.
- Different users can have different style sheets: for example a large text alternative for visually-impaired users, or a layout optimised for small displays for mobile phones.
- The document code is reduced in size and complexity, since it does not need to contain any presentational markup.
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 consists of one or more comma-separated selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (:) then a value.
Example:
p { font-family: "Garamond", serif; } h2 { font-size: 110%; color: red; background: white; } .note { color: red; background: yellow; font-weight: bold; } p.warning{ background: url(warning.png) no-repeat fixed top; } #paragraph1 { margin: 0; } a:hover { text-decoration: none; } #news p { color: blue; }
These are seven rules, with selectors p, h2, .note, p.warning, #paragraph1, a:hover and #news p.
Property values are specified by, for example, color: red, where the property color is given the value red.
In the first two rules, the HTML elements p (paragraph) and h2 (level-two heading) are being assigned stylistic attributes. The paragraph element will be rendered in Garamond font or, if Garamond is unavailable, some other serif font. The level-two heading element will be rendered in red on a white background.
The third rule shown matches those elements that have a class attribute containing the token ‘note’. For example:
<p class="note">This paragraph will be rendered in red and bold, with a yellow background.</p>
The fourth rule shown matches those p elements that have a class attribute containing the token ‘warning’. This is in contrast to the third rule which matched all elements that are marked with a given class attribute. (The earlier rule .note could also have been written as *.note.)
In fact, .class selectors involve a special kind of attribute matching, as opposed to testing for equality. Since the HTML class attribute is defined as a whitespace-separated list of tokens, a class selector is evaluated against each of them separately. For example, <p class="note warning">, would apply both the note and the warning rule.
The fifth rule will match the one and only element in each HTML document whose id attribute is set to paragraph1: It will have no margin within its rendering ‘box’ as its margin width is set to zero.
The sixth rule defines the hover style for a elements. By default in most browsers, a elements are underlined. This rule will remove the underline when the user “hovers” the mouse cursor over these elements.
The last rule matches those p elements that are within an element whose id attribute has the value news; an example of a descendant selector.
A CSS stylesheet can contain comments; the syntax for comments is similar to that used in the C programming language
/* comment */
In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Here are some examples of selector syntax:
- All elements
- that is, using the
* selector
- By element name
- e.g. for all
p or h2 elements
- Descendants
- e.g. for
a elements that are descendants of li elements (e.g links inside lists) the selector is li a
- class or id attributes
- e.g.
.class and/or #id for elements with class="class" or id="id"
- Adjacent elements
- e.g. for all
p elements preceded by h2 elements, the selector would be h2 + p
- Direct child element
- e.g. for all
span elements inside p, but no span elements deeper within the hierarchy, the selector would be p > span
- By attribute
- e.g. for all
<input type="text"> the selector would be input[type="text"]
In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is :hover, which 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), where the style would be applied on an element only if it is in language “c”.
Selectors may be combined in other ways too, especially in CSS 2.1, to achieve greater specificity and flexibility, see the complete definition of selectors at the W3C Web site.
In the following example, several selectors are grouped using comma separation[1]. The rule sets the font for all HTML headings.
h1, h2, h3, h4, h5, h6 { font-family: "Arial", sans-serif; }
To use a CSS stylesheet, save the CSS code in a file such as example.css and then either link to it or import it from HTML or XHTML web pages using one of the two following formats:
<link rel="stylesheet" href="example.css" type="text/css" />
<style type="text/css"> @import "example.css"; </style>
In the first example, note that the /> syntax only applies in XHTML; If you are writing HTML, close an empty element such as this with >.
To apply a CSS stylesheet to an XML document, add the following processing instruction, as per the XML example below:
<?xml-stylesheet type="text/css" href="example.css"?>
Posted in Web Technology