Skip to main content
Joomla

About

Ask Question
Tag Info
Info Newest Frequent Score Active Unanswered

CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in a markup language.

CSS

CSS, short for Cascading Style Sheets, is a style sheet language used for describing the look and formatting of a document written in a markup language. CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation. In early days, the visual presentation was defined by HTML attributes; then CSS was introduced to separate the control of the visual presentation from the content.

A basic CSS document is made of rule sets. Each rule set starts with a selector (a pattern that matches elements in an HTML or XML document) and is followed by a block of one or more property declarations that define the presentation of the matching elements. For example:

/* This is a comment */ 

a {                             /* Find all <a> elements(HTML links), */
    color: orange;              /* change their text color to orange, */
    background-color: pink;     /* their background color to pink, */
    text-decoration: none;      /* and remove the underline. */
}

a:hover {                       /* But when you hover over an <a> element */
    color: red;                 /* change the color to red */
    text-decoration: underline; /* and add an underline again */
}

The simple example above also illustrates why they are called cascading style sheets. When you hover over a link (i.e., an <a> element) in an HTML page with this style sheet applied to it, both rules apply. So, the link will have a pink background. But, since the a:hover selector is more specific, its color and text-decoration properties override those from the <a> rule set.

The cascading order defines how specificity and other factors determine which property value is applied to an element.

Some more CSS, continuing from the example above:

/* Selectors with greater Specificity override less specific ones */
#article a.tag {
    color: #F00;
}

/* Complex selectors can be created from joining multiple simple ones together */
#sidebar > h3 + p a:first-child {
    border-bottom: 1px solid #333;
    font-style: italic;
}

/* It is also possible to style elements depending on an attribute */
div[id] a[target=_blank] {
    color: white;
}

Selector precedence

Each component of a CSS selector can be based on one of three possible attributes of an HTML element:

  1. The element's ID (from the id attribute)
  2. The name of one of the element's classes (in the class attribute)
  3. The element's tag name

Selectors using an ID selector have higher priority than selectors using class names, and selectors using a class name have higher priority than selectors using tag names. This is called selector precedence. !important can be used to override the selector precedence. Whenever possible though, higher specificity should always be used instead of !important, in order to prevent overrides on any other styles that might need to be added.

For example:

<!-- Creates an anchor with a class of class1 and an ID of anchor1 -->
<a class="class1" id="anchor1">Sample</a>

a {                 /* anchor element */
    color: orange;
}

.class1 {           /* any element with class name class1 */
    color: red;
}    

#anchor1 {          /* the element with id anchor1 */
    color: green;
}

In the above example, the color of the string "Sample" will be green.

Repeated occurrences of the same selector also increase specificity, as noted in the Selectors Level 3 W3C Recomendation.

.class1.class1 {    /* repeated class selector */
    font-weight: bold;
}

.class1 {
    font-weight: normal;
}

Here the repeated selector has higher specificity than the singular selector and the font-weight of our sample string will be bold.

References

CSS Pseudo Selector

Validation

Browser Support

CSS Pre-processors

Reset Stylesheets

CSS Frameworks

The Future

The following currently have very little (if any) browser support and are still a work in-progress:

Chat Room

Chat about CSS (and HTML / DOM) with other Stack Overflow users:

History Excerpt history