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


Interactive Tutorial

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

Video Tutorial

CSS Pseudo Selector


Naming conventions & Methodologies

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

797792 questions
45 answers

How to disable text selection highlighting

For anchors that act like buttons (for example, the buttons on the sidebar of this Stack Overflow page titled Questions, Tags, and Users) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the…
131 answers

How can I horizontally center an element?

How can I horizontally center a
within another
using CSS?
Foo foo
  • 9,476
  • 4
  • 20
  • 14
42 answers

Change an HTML input's placeholder color with CSS

Chrome v4 supports the placeholder attribute on input[type=text] elements (others probably do too). However, the following CSS doesn't do anything to the placeholder's value: input[placeholder], [placeholder], *[placeholder] { color: red…
David Murdoch
  • 87,823
  • 39
  • 148
  • 191
33 answers

Is there a CSS parent selector?

How do I select the
  • element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < { property: value; } Obviously there are ways of doing this with JavaScript, but I'm hoping that…
  • jcuenod
    • 55,835
    • 14
    • 65
    • 102
    19 answers

    Set cellpadding and cellspacing in CSS?

    In an HTML table, the cellpadding and cellspacing can be set like this: How can the same be accomplished using CSS?
    • 43,096
    • 5
    • 36
    • 32
    22 answers

    How do I disable the resizable property of a textarea?

    I want to disable the resizable property of a textarea. Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?
    • 32,962
    • 4
    • 19
    • 20
    20 answers

    Is it possible to apply CSS to half of a character?

    What I am looking for: A way to style one HALF of a character. (In this case, half the letter being transparent) What I have currently searched for and tried (With no luck): Methods for styling half of a character/letter Styling part of a character…
    • 25,214
    • 3
    • 23
    • 39
    16 answers

    I need an unordered list without any bullets

    I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them. Is it possible to have a list without bullets?
    • 37,683
    • 30
    • 72
    • 72
    44 answers

    How can I transition height: 0; to height: auto; using CSS?

    I am trying to make a
      slide down using CSS transitions. The
        starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition, If I do it from height: 40px; to height:…
    • 89,623
    • 107
    • 270
    • 423
    37 answers

    How do I vertically center text with CSS?

    I have a
    element which contains text and I want to align the contents of this
    vertically center. Here is my
    style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #FFF; text-align:…
    Irakli Lekishvili
    • 33,492
    • 33
    • 111
    • 169
    42 answers

    Make a div fill the height of the remaining screen space

    I am working on a web application where I want the content to fill the height of the entire screen. The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of…
    Vincent McNabb
    • 33,327
    • 7
    • 31
    • 53
    42 answers

    How to make a div 100% height of the browser window

    I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now, the background-color ends at the last piece…
    • 26,535
    • 3
    • 16
    • 4
    16 answers

    What is the difference between `margin` and `padding` in CSS?

    What is the difference between margin and padding in CSS? In what kind of situations: both work. only margin is appropriate. only padding is appropriate.
    Alex Angas
    • 59,219
    • 41
    • 137
    • 210
    29 answers

    How do I reduce the opacity of an element's background using CSS?

    Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque? I'd like to accomplish this without having the text and the background as two separate elements. When…
    Stijn Sanders
    • 35,982
    • 11
    • 45
    • 67
    43 answers
    I would like for the div to only expand to as wide as my table becomes.
    George Snider
    2 3
    99 100