Questions tagged [css]

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

• Wikipedia Reference
• 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
• W3Schools CSS Tutorials
• Learn CSS Layouts
• Demonstration of all combination of CSS selectors by w3schools
• CSS-Tricks Almanac - A list of all CSS selectors with example and explanation
• Mozilla Development Network - CSS - Includes a CSS Reference, Tutorials, CSS3 Demos, and links to development tools

Interactive Tutorial

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

Video Tutorial

• CodeSchool CSS Screencast - Learn the fundamentals & foundational elements of CSS with CSS Cross-Country

CSS Pseudo Selector

• CSS Pseudo Class Selector pseudo-class
• Pseudo Element pseudo-element

Validation

• W3C CSS Validation Service
• CSS Lint
• CSS Portal

Naming conventions & Methodologies :bulb:

• Atomic OOBEMITSCSS
• BEM
• SMACSS
• Point North
• ITCSS
• OOCSS
• Title CSS
• idiomatic-css
• Atomic Design
• SUIT CSS
• Kickoff CSS
• MaintainableCSS
• NCSS

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

• Less less
• Sass sass
• Stylus stylus
• Stylis stylish
• Examples

CSS Post-processors

• PostCSS postcss
• Pleeease pleeease
• cssnext cssnext
• Autoprefixer autoprefixer
• -prefix-free prefixfree
• stylelint stylelint

Reset Stylesheets

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

CSS Frameworks css-frameworks

• 960 Grid 960.gs
• Blueprint blueprint-css
• Bulma bulma
• Cascade Framework cascade-framework
• Columnal columnal-css-framework
• eFrolic
• Gridless boilerplate gridless-boilerplate
• Gumby gumby-framework
• HTML5 ★ BOILERPLATE html5boilerplate
• Inuit inuit.css
• Jeet Grid System jeet-grid
• jQuery UI CSS Framework jquery-ui-css-framework
• Kube kube-css
• Marmertkit maxmertkit
• Materialize materialize
• Metro UI CSS metro-ui-css
• Pure yui-pure-css
• Semantic.gs semantic.gs
• Skeleton skeleton-css-boilerplate
• Tacit
• Tailwind CSS tailwind-css
• Twitter Bootstrap twitter-bootstrap
• Unsemantic unsemantic-css
• YAML yaml
• YUI CSS Grids yui
• Zurb's Foundation zurb-foundation

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

Related tags for specific features

css-animations css-calc css-content css-filters css-float css-grid css-modules css-multicolumn-layout css-position css-preprocessor css-selectors css-shapes css-specificity css-sprites css-tables css-transforms css-transitions css-variables