CSS

From JumbaWiki

Jump to: navigation, search
The Wiki Action Group suggests this page should be completely re-written or revamped. Please discuss on the article discussion page.

CSS or Cascading Style Sheets is a stylesheet language used to display markup documents such as HTML, XHTML and XML. The CSS specifications are maintained by the World Wide Web Consortium (W3C). CSS code should be validated to check that it compllies to W3C standards.

Contents

Overview

CSS can change the display of colors, fonts, and layout. HTML is used for structuring content, while CSS is used for presentation. CSS also lets a page be presented in many different styles to allow for on-screen, print, voice (when read out by a screen reader) and on braille-based, tactile devices.

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 Rules

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 the document element whose id attribute has the value news. It is an example of a descendant selector.

Because of the cascading nature of CSS rules, these last p elements will inherit font-family: "Garamond", serif as with all p elements. Those that have the token warning in the value of their class attribute, will inherit that background image too.

Comments

A CSS stylesheet can contain comments; the syntax for comments is similar to that used in the C programming language 

/* comment */

Selectors

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 HTML element|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: 

<?xml-stylesheet type="text/css" href="example.css"?>

See also

External Links

Tutorials


Demonstrations


Code Languages
ActionScript | ASP | ASP.NET | CGI | ColdFusion | CSS | HTML | Java | JavaScript | JSP | MySQL | PHP | Perl | XML
Retrieved from "http://wiki.jumba.com.au/wiki/CSS"
Personal tools
Australian Photography | Unique Views of Reality | Daedalus