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:


The element's ID (from the id attribute)
The name of one of the element's classes (in the class attribute)
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:




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


W3C CSS2.1 Specification
W3C CSS3 Selectors Specification
W3C CSS3 Media Queries Specification
W3C Cascading Style Sheets home page
Way2Tutorial CSS Tutorial
SitePoint CSS Reference
HTML Dog: HTML and CSS Tutorials
Cascading Style Sheets on the Web Standards Curriculum
The 30 CSS Selectors you Must Memorize
W3C Web Content Accessibility Guidelines
DocHub Instant Documentation Search
DevDocs - Documentation Searching Service


CSS Pseudo Selector


CSS Pseudo Class Selector


Validation


W3C CSS Validation Service
CSS Lint
CSS Portal


Browser Support


MDN: Mozilla CSS support chart
MSDN: CSS Compatibility and Internet Explorer
Opera web specification support pages
Konqueror CSS support
QuirksMode CSS
When can I use... Compatibility tables for CSS3 and more
CSS3 Selectors Test
Wikipedia: Comparison of layout engines


CSS Pre-processors


LessCSS
SASS
Stylus


Reset Stylesheets


Eric Meyer's reset.css
HTML5 Reset Stylesheet
CSS Wizardry Reset restarted
Normalize.css


CSS Frameworks


Blueprint
960 CSS Framework
jQuery UI CSS Framework
YAML
YUI CSS Grids
Twitter Bootstrap
Zurb's Foundation
Skeleton
inuit.css


The Future

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


W3C Selectors Level 4 Draft
W3C Custom Properties (CSS Variables) Draft


Chat Room

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


HTML / CSS / DOM & web design