CSS (Cascading Style Sheets) is a language used to describe the presentation of documents written in various markup languages, including HTML (Hyper Text Markup Language) and XML (Extensible Markup Language), and SVG elements. Use this tag for issues involving the teaching of CSS, or its use in the classroom. DO NOT use this tag for questions about CSS or its syntax.

CSS, or Cascading Style Sheets, is a language used to control the visual presentation of documents written in a markup language, including HTML, XML, XHTML, SVG and XUL.

The visual presentation of HTML was originally defined by HTML attributes, but HTML 4 deprecated these attributes as CSS was introduced to separate the control of the visual presentation from 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 zero or more property declarations that define the presentation of the matching elements. For example:

/* This is a comment */ 

a {                             /* Select 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 {                       /* Select all <a> elements which are currently being hovered over */
    color: red;                 /* change the color to red */
    text-decoration: underline; /* and add an underline again */
}

The simple example above also illustrates the cascading element of CSS. 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. Because of the first rule, 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.


Selector precedence and specificity

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 {                 /* any 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 Recommendation.

.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.

According to MDN,

Specificity is basically a measure of how specific a selector is — how many elements it could match. [...] element selectors have low specificity. Class selectors have a higher specificity, so [classes] will win against element selectors. ID selectors have an even higher specificity, so [IDs] will win against class selectors.

Complex selectors can be created from joining multiple simple ones together. It is also possible to style elements depending on an attribute:

/* The first <a> element inside a <p> element that's next to an <h3> element
   that's a direct child of #sidebar matches this rule */
#sidebar > h3 + p a:first-of-type {
    border-bottom: 1px solid #333;
    font-style: italic;
}

/* Only <img> elements with the 'alt' attribute match this rule */
img[alt] {
    background-color: #F00;
}

A CSS rule specificity calculator is available here. It may help when a project has one or multiple large CSS files.


Inheritance

Inheritance is a key feature in CSS.

Inheritance is the mechanism by which properties are applied not only to a specified element, but also to its descendants. In general, descendant elements automatically inherit text-related properties, but box-related properties are not automatically inherited.

  • Properties that are inherited by default are color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space and word-spacing.
  • Properties that are usually not inherited are background, border, display, float and clear, height, and width, margin, min/max-height/width, outline, overflow, padding, position, text-decoration, vertical-align and z-index.

It is worth noting that any property can be inherited by using the inherit property value. This should be used with care, however, since Internet Explorer (up to and including version 7) doesn’t support this keyword. As an example:

/* Set the color of <p> elements to a light blue */
p {
    color: #C0FFEE;
}

/* Set the color of #sidebar to a light red */
#sidebar {
    color: #C55;
}

/* <p> elements inside #sidebar inherit their parent's color (#C55) */
#sidebar p {
    color: inherit;
}


/* You may also override inherited styles using the !important keyword */
#sidebar p:first-of-type {
    color: orange !important;
}

References

Video Tutorial

Validation