Stack Overflow
Stack Overflow

Questions tagged [css]

CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (HyperText Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.

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. In October 1994, Håkon Wium Lie first proposed Cascading HTML Style Sheets while working at CERN with Sir Tim Berners-Lee, who had been developing a web browser and inventing HTML.

A basic CSS document is made of rule sets. Each rule set starts with a selector, a pattern that matches elements in a HTML or XML document, and is followed by a block of zero or more property declarations that define the presentation of the matching elements. The selector is quasi-identical to the selector used by Javascript's .querySelectorAll. 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 text decorations like underlines. */
}

a:hover {                       /* Select all <a> elements which are currently being hovered over with the :hover pseudo-class*/
    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 or more of four 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
  4. The element's properties or their values

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 the selector precedence. The !important annotation can be used to override selector precedence, by elevating a normal declaration to an important declaration. Whenever possible, however, higher specificity within a normal declaration should be used in preference to the creation of an important declaration via the !important annotation, in order to prevent overrides on any other styles that might need to be added, particularly those that are subsequently added with a natural precedence intent.

For example:

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

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

/* the element with id anchor1 */
#anchor1 {
    color: green;
}
<!-- Creates an anchor with a class of class1 and an ID of anchor1 -->
<a class="class1" id="anchor1">Sample</a>

In the above example, the text color of the content of the <a> element, 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 by 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 annotation */
#sidebar p:first-of-type {
    color: orange !important;
}

Important Notice:

For questions related to CSS, try to demonstrate your code in a reproducible manner using either Stack Exchange's Stack Snippets or alternatively any online editor that allows running and sharing code such as JS Bin, JSFiddle or CodePen (though be sure to always include relevant code in the question).

References

Interactive Tutorial

  • CSS Diner - An interactive game to learn about CSS selectors.

Video Tutorial

CSS Pseudo Selector

Validation

Naming conventions & Methodologies :bulb:

Browser Support

CSS Pre-processors

CSS Post-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:

Related tags for specific features

719006 questions
1471
votes
46 answers

How can I vertically center a "div" element for all browsers using CSS?

I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
Div to be aligned vertically
How can I…
Burak Erdem
  • 17,724
  • 7
  • 32
  • 54
1460
votes
24 answers

How do I style a dropdown? I need to style a