Articles
Podcasts
  • ...when you're making something accessible, you would use ems instead of pixels...

    You know, I hear that advice used a lot and it doesn't really translate well from my standpoint, as a low-vision user, because you've still got all your images there. ...so I end up having the text get larger, but now it's much harder to read because now there's an image breaking up the flow on the site... I sometimes think this is actually kind of a useless technique... Just leave everything in pixels and let people zoom the whole page.
CSS Libraries
  • A collection of code that's built using the OOCSS approach and is meant to help you get started
  • · -prefix-free [leaverou.github.io]
    Lets you use unprefixed CSS properties, by working behind the scenes to automatically add the current browser's prefix, only when it's needed
  • · Effeckt.css [github.com]
    CSS Transitions and Animations
  • Resets
  • · normalize.css [nicolasgallagher.com]
    Normalize.css is an alternative to CSS resets. It strives to bring browsers to a level starting point with regards to how an element is rendered. When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.
  • Polyfills
  • A collection of all the shims, fallbacks and polyfills needed in order to inject html5 functionality into browsers that don't natively support them. This enables you to develop using the HTML5 APIs, since the scripts will create the missing methods and objects.
CSS Tricks (Chris Coyier)
  • One method is to use a background-image and CSS media queries to give retina users the high-res @2x versions while the rest of us get the slimmer version.
  • Given an image of a button, use CSS alone to recreate it; Fix this sidebar; Make this fixed width design fluid, What are the various techniques for clearing floats?
  • Shapes you can make with a single HTML element and CSS (e.g., Triangles, Curved Tail Arrow, Stars, Heart, Infinity, Badge Ribbon, etc).
  • ☆ ☆ ☆ ☆ ☆
  • You can embed an image directly into a document with data URIs. With CSS, it looks like this:
    1. background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO...  
    The biggest reason to do this is that it saves HTTP Requests.
CSS Summary

Overview

A CSS rule set (AKA rule) consists of two main parts:
  • selector - A query used to target one or more DOM elements (e.g., '#myId').
  • declaration-block - A list of zero or more declarations within a pair a curly-braces. A declaration is a property and value, separated by a colon (e.g., 'color: red' or 'color: #f00'). The value is specific to each property and may be a keyword (e.g., red, italic, inherit), color (e.g., '#f00'), function (e.g., rgba(255, 0, 0, 0.5)), etc.

Details

Tags

The at-rule (@)
The at-rule represents a directive to the CSS parser. It begins with the '@' character followed by an identifier and then a series a parameters specific to the identifer used.

@import

The "@import" directive tells the CSS parser to include the specified style sheet.
  1. @import "base.css";  
  2. @import url("http://fonts.googleapis.com/css?family=Gudea|Happy+Monkey");  
  3. @media print {  
  4.   @import "print-main.css";  
  5.   body { font-size: 10pt }  
  6. }  
  7. h1 {color: blue }  
Selectors
A simple selector is a query used to target one or more DOM elements. Complex selectors can be created using multiple simple selectors, separated by combinators (white-space, greater-than (>) or plus-sign (+)). The elements of the DOM that match a selector are called subjects.

The specificity of a selector determines which selector is used when multiple selectors target the same subject (for details, refer to: The CSS 2 Specification, MDN Specificity and Specifics on CSS Specificity). Specificity is determined in the following order and weight:
  1. An element's inline style attribute (highest precendence)
  2. The number of ID attributes
  3. The number of other attributes and pseudo-classes
  4. The number of element names and pseudo-elements

The Universal Selector ( * )

Selects any element. The following example selects all elements and sets their color to green.
  1. * {  
  2.   color: green;  
  3. }  

Be aware that using this as a CSS reset will eliminate parent-child inheritance on all selected elements. Here are some good examples of Things It Might Be Fun/Useful to Try the Universal Selector On.

The Element Selector

Selects all elements of the specified type. The following example selects all paragraphs.
  1. p {  
  2.   color: orchid;  
  3. }  

The ID Selector ( # )

Selects the single element that has the specified ID. The following example selects the element with the "bar" ID.
  1. #bar {    
  2.   color: brown;    
  3. }  

The Class Selector ( . )

Selects all elements with the specified class name. The example below selects all elements that have the "foo" class.

  1. .foo {  
  2.   color: maroon;  
  3. }  

The primary reason that class and ID selectors exist is to give the page content semantic meaning. When used in this way, it also makes it easier to style. Jeffrey Zeldman coined the term classitis to describe the CSS bloat that occurs when classes are used on every element that requires styling. For details, see Chronic Divitis And Classitis, by Adam Kahtava.

Multiple classes may be combined to select elements that include all of the specified classes. To achieve this, separate each class with a period. The example below selects all elements that include both a "ribbon" and a "right" class.

CSS
  1. /* position ribbon -50px to right and rotate-right by 45-deg */  
  2. .ribbon.right {  
  3.   right: -50px;  
  4.   transform: rotate(45deg);  
  5. }  
HTML
  1. <div class="ribbon right green">  
  2.   <i>Happy Birthday!</i>  
  3. </div>  

The Descendent Selector ( space )

Selects elements that are descendants of a specified parent element. The descendants can appear at any level. The example below selects every element, with a 'bar' class, nested anywhere inside any element with a 'foo' class.
CSS
  1. /* select every 'bar' nested anywhere inside any 'foo'. */  
  2. .foo .bar {  
  3.   color: #f90;  
  4. }  
HTML
  1. <div class="foo">  
  2.   Some text. <b class="bar">Descendent bold text</b>.  
  3.   <div>Some <b>more</b> text.</div>  
  4.   <div>  
  5.     <cite class="bar">Descendent cite.</cite>  
  6.   </div>  
  7.   <cite>Another cite.</cite>  
  8. </div>  
Rendered Result
The following example uses the universal selector to require at least one element be present between the .foo and .bar elements:
CSS
  1. .foo * .bar {  
  2.   color: #f90;  
  3. }  
HTML
  1. <div class="foo">  
  2.   Some text. <b class="bar">Too shallow to be selected</b>.  
  3.   <div>Some <b>more</b> text.</div>  
  4.   <div>  
  5.     <cite class="bar">Descendent cite.</cite>  
  6.   </div>  
  7.   <cite>Another cite.</cite>  
  8. </div>  
Rendered Result

The Child Selector ( > )

Selects elements that are direct descendants of a specified element (first-level children). This is similar to the descendent selector, except it applies only to first-level descendents. The example below selects every <cite> element, nested at the first-level, inside any <div> element that has the "foo" class. Note: The "This inherits from cite" text, inside the <b> tag, is also affected, but only because of inheritance. If a color reset was used (e.g., "* {color:black;}"), then the text would remain black.
CSS
  1. /* select every first-level <cite> nested under any <div class="foo"> */  
  2. div.foo > cite {  
  3.   color: #f90;  
  4. }  
HTML
  1. <div class="foo">  
  2.   Some text <b>before</b> the first cite.  
  3.   <cite>A first-level child cite. <b>This inherits from cite.</b></cite>  
  4.   <section>  
  5.     <cite>Not a first-level child cite.</cite>  
  6.   </section>  
  7.   <cite>Another first-level child cite.</cite>  
  8. </div>  
Rendered Result

The Adjacent Selector ( + )

Selects the specified element immediately following the specified sibling element. The example below selects the first <cite> element after any <div> element that has the "foo" class.
CSS
  1. /* select the <cite> immediately following any <div class="foo"> */  
  2. div.foo + cite {  
  3.   color: #f90;  
  4. }  
HTML
  1. <div class="foo">  
  2.   <cite>Not an adjacent cite.</cite>  
  3. </div>  
  4. Some text *before* the first cite (no elements allowed).  
  5. <cite>An adjacent cite. <b>This inherits from cite.</b></cite>  
  6. <cite>Not an adjacent cite.</cite>  
Rendered Result

The Attribute Selector ( [] )

Selects all elements that have the specified attribute or matches the atrribute query, as shown below.
  • [attribute-name] Matches all elements that have the exact attribute name:
    CSS
    1. /* select every element that has a 'data-foo' attribute. */  
    2. [data-foo] {  
    3.   color: #f90;  
    4. }  
    HTML
    1. <div data-foo>Matches (data-foo)</div>  
    2. <div data-foo="bar">Matches (data-foo="bar")</div>  
    3. <div data-foo-bar>Does not match (data-foo-bar)</div>  
    Rendered Result
  • [attribute-name="attribute-value"] Matches all elements that have the exact attribute name and value.
    CSS
    1. /* select every element with attribute 'data-foo' and value "bar". */  
    2. [data-foo="bar"] {  
    3.   color: #f90;  
    4. }  
    HTML
    1. <div data-foo="bart">Does not match (data-foo="bart")</div>  
    2. <div data-foo="bar">Matches (data-foo="bar")</div>  
    3. <div data-foo="foo bar">Does not match (data-foo="foo bar")</div>  
    4. <div data-foo="foobar">Does not match (data-foo="foobar")</div>  
    Rendered Result
  • [attribute-name~="attribute-value"] Matches all elements that have the exact attribute name plus the exact value as a whitespace separated substring.
    CSS
    1. /* select every element with attribute 'data-foo' and value "\s+bar\s+". */  
    2. [data-foo~="bar"] {  
    3.   color: #f90;  
    4. }  
    HTML
    1. <div data-foo="bart">Does not match (data-foo="bart")</div>  
    2. <div data-foo="bar">Matches (data-foo="bar")</div>  
    3. <div data-foo="foo   bar">Matches (data-foo="foo   bar")</div>  
    4. <div data-foo="foobar">Does not match (data-foo="foobar")</div>  
    Rendered Result
  • [attribute-name|="attribute-value"] Matches all elements that have the exact attribute name plus the exact value or the exact value followed by a dash (-) with optional trailing characters.
    CSS
    1. /* select every element with attribute 'data-foo' and value "bar-*". */  
    2. [data-foo|="bar"] {  
    3.   color: #f90;  
    4. }  
    HTML
    1. <div data-foo="bart">Does not match (data-foo="bart")</div>  
    2. <div data-foo="bar">Matches (data-foo="bar")</div>  
    3. <div data-foo="bar-">Matches (data-foo="bar-")</div>  
    4. <div data-foo="bar-car">Matches (data-foo="bar-car")</div>  
    Rendered Result
  • [attribute-name^="attribute-value"] Matches all elements that have the exact attribute name and start with the specified value.
    CSS
    1. /* select every element with attribute 'data-foo' and value starting with 'bar'. */  
    2. [data-foo^="bar"] {  
    3.   color: #f90;  
    4. }  
    HTML
    1. <div data-foo="bart">Matches (data-foo="bart")</div>  
    2. <div data-foo="bar">Matches (data-foo="bar")</div>  
    3. <div data-foo="foobar">Does not match (data-foo="foobar")</div>  
    4. <div data-foo="bar-car">Matches (data-foo="bar-car")</div>  
    Rendered Result
  • [attribute-name$="attribute-value"] Matches all elements that have the exact attribute name and end with the specified value.
    CSS
    1. /* select every element with attribute 'data-foo' and value ending with 'bar'. */  
    2. [data-foo$="bar"] {  
    3.   color: #f90;  
    4. }  
    HTML
    1. <div data-foo="bart">Does not match (data-foo="bart")</div>  
    2. <div data-foo="bar">Matches (data-foo="bar")</div>  
    3. <div data-foo="foobar">Matches (data-foo="foobar")</div>  
    4. <div data-foo="bar-car">Does not match (data-foo="bar-car")</div>  
    Rendered Result
  • [attribute-name*="attribute-value"] Matches all elements that have the exact attribute name and contains the specified value.
    CSS
    1. /* select every element with attribute 'data-foo' and value containing 'bar'. */  
    2. [data-foo*="bar"] {  
    3.   color: #f90;  
    4. }  
    HTML
    1. <div data-foo="bart">Matches (data-foo="bart")</div>  
    2. <div data-foo="bar">Matches (data-foo="bar")</div>  
    3. <div data-foo="foobar">Matches (data-foo="foobar")</div>  
    4. <div data-foo="bar-car">Matches (data-foo="bar-car")</div>  
    Rendered Result

The Pseudo Selector ( : / :: )

The pseudo selector (pseudo-classes and pseudo-elements) matches useful facets in a DOM, based on information that's not directly represented (e.g., the first character in the content of a <div>). Below are a few sample pseudo selectors (see Meet the Pseudo Class Selectors for more examples):

Pseudo-Class Selectors (:)
  • :link pseudo-class - applies to links that have not been visited.
  • :visited pseudo-class - applies to links that have been visited.
  • :hover pseudo-class - applies to the element under the pointing device.
  • :active pseudo-class - applies to the element under the pointing device as it's being selected (e.g., while the mouse-button is down).
  • :focus pseudo-class - applies to the element that accepts keyboard events.
Pseudo-Element Selectors (::)
  • ::first-letter pseudo-element - applies to the first letter of a block.
    HTML
    1. <article>  
    2.   <p>The first paragraph.</p>  
    3.   <p>Followed by another paragraph.</p>  
    4. </article>  
    CSS - first-letter of <article>
    1. article::first-letter {  
    2.   font-size: 18px;  
    3.   color: #f90;  
    4. }  
    Rendered Result
    An example using multiple blocks.
    CSS - first-letter of <p> within an <article>
    1. article p::first-letter {  
    2.   font-size: 18px;  
    3.   color: #f90;  
    4. }  
    Rendered Result
  • ::before and ::after pseudo-elements - inserts and formats additional content, within a targeted element, before or after the existing content of the element.
    CSS
    1. header i::after {  
    2.   content: "\2666";  
    3.   color: #f90;  
    4.   font-style: normal;  
    5. }  
    HTML
    1. <header><i>After</i> - pseudo-element Example</header>  
    Rendered Result

Selector Grouping ( , )

At times, the same CSS will need to be applied to a variety of elements using different selectors. For example, if you wanted to set the color of every <header> and <footer> to peru, you might be tempted to write the CSS as follows:
CSS - Without Selector Grouping
  1. header {  
  2.   color: peru;  
  3.   border-bottom: thin solid #ddd;  
  4. }  
  5.   
  6. footer {  
  7.   color: peru;  
  8. }  
Selector grouping can often provide a solution that's simple and easier to maintain:
CSS - With Selector Grouping
  1. header {  
  2.   border-bottom: thin solid #ddd;  
  3. }  
  4.   
  5. header, footer {  
  6.   color: peru;  
  7. }  
Box Model

The CSS box model represents the space occupied by an element. It consists of four areas: margin, border, padding, and content (width and height), as shown below:

  1. <div style="margin:10px; border:20px solid red; padding:30px; width:100px; height:100px; opacity:0.5;" >  
  2.   <!-- Content goes here -->  
  3. </div>  

Note: For inline elements, the amount of vertical space occupied is determined by the line-height property.

Shorthand Properties

Shorthand properties let you set multiple properties at the same time. For example, instead of setting the top, right, bottom and left margins using four separate properties, you can use the margin shorthand that lets you set all four at once.

Leaving a value off the property list will implicitly cause the default value to be used instead (overriding any previously set value in the rule).

When shorthand property values are of different types, the order of the values doesn't matter (e.g., "border:thin solid red" is the same as "border:solid thin red". However, when the values are of the same type (e.g., the values for margin), then order matters.

Order of Box Edges (e.g., border-width)

  • The 4-value syntax: Top Right Bottom Left
  • The 3-value syntax: Top Right-Left Bottom
  • The 2-value syntax: Top-Bottom Right-Left

Order of Box Corners (e.g., border-radius)

  • The 4-value syntax: Top-Left Top-Right Bottom-Right Bottom-Left
  • The 3-value syntax: Top-Left Top-Right-Bottom-Left Bottom-Right
  • The 2-value syntax: Top-Left-Bottom-Right Top-Right-Bottom-Left
Filters

grayscale( [ <number> | <percentage> ] )

Converts the input image to grayscale.
CSS
  1. .filter-gray {  
  2.   -webkit-filter: grayscale(100%);  
  3. }  
Rendered Result

sepia( [ <number> | <percentage> ] )

Converts the input image to sepia.
CSS
  1. .filter-sepia {  
  2.   -webkit-filter: sepia(100%);  
  3. }  
Rendered Result

brightness ( [ <number> | <percentage> ] )

Makes the image less or more bright.
CSS
  1. .filter-brightness {  
  2.   -webkit-filter: brightness(50%);  
  3. }  
Rendered Result

blur( <radius> )

Applies a Gaussian blur to the input image.
CSS
  1. .filter-blur {  
  2.   -webkit-filter: blur(3px);  
  3. }  
Rendered Result

drop-shadow( <right-offset> <bottom-offset> <blur> <color> )

Applies a blurred offset version of the image's alpha mask, drawn in a particular color, composited below the image.
CSS
  1. .filter-drop-shadow {  
  2.   -webkit-filter: drop-shadow(3px 3px 4px #000);  
  3. }  
Rendered Result

hue-rotate( <angle> )

Applies a hue rotation on the input image. The passed parameter defines the number of degrees around the color circle the input samples will be adjusted.
CSS
  1. .filter-hue-rotate {  
  2.   -webkit-filter: hue-rotate(300deg);  
  3. }  
Rendered Result
Transparency/Display

Useful for hiding (or obscuring) an element, while optionally collapsing or preserving the element's space, events and focus. The table bellow illustrates how an element behaves when it can't be seen.

Property: Value Collapsed Receives Events Receives Focus
opacity: 0 No Yes Yes
visibility: hidden No No No
display: none Yes No No

opacity: <number>

Specifies the transparency of a rendered element, without affecting the space it occupies, its handling of events or its ability to receive focus.
  • {opacity: 1} The element is fully opaque:
    HTML
    1. <div class="divOuter">  
    2.   <div style="opacity:1;" class="divInner">  
    3.     This DIV is fully opaque.  
    4.   </div>  
    5. </div>  
    Rendered Result - opacity:1
  • {opacity: 0.5} The element is 50% transparent:
    HTML
    1. <div class="divOuter">  
    2.   <div style="opacity:0.5;" class="divInner">  
    3.     This DIV is 50% transparent.  
    4.   </div>  
    5. </div>  
    Rendered Result - opacity:0.5
  • {opacity: 0} The element is invisible, but still occupies the space, remains a focus target and can accept events (e.g., mouse-over can cause the cursor to change):
    HTML
    1. <div class="divOuter">  
    2.   <div style="opacity:0;" class="divInner">  
    3.     Invisible, but occupies space and accepts events.  
    4.   </div>  
    5. </div>  
    Rendered Result - opacity:0
  • Beware of Irreversible opacity in nested elements (see rgba as a possible work-around). The opacity of a nested element is calculated by multiplying the opacity of all parent elements. For example, if the opacity of an outer element is set to 0.5, then setting the opacity of a nested element to 1.0 results in the nested element having an opacity of 0.5 * 1.0 = 0.5 (no change). The example below shows four nested divs.
    • The opacity of the first div is o(d1) = 1.0.
    • The opacity of the second div is o(d1) * o(d2) = 1.0 * 0.6 = 0.6.
    • The opacity of the third div is o(d1) * o(d2) * o(d3) = 1.0 * 0.6 * 0.5 = 0.3.
    • The opacity of the fourth div is o(d1) * o(d2) * o(d3) * o(d4) = 1.0 * 0.6 * 0.5 * 1.0 = 0.3.
    HTML
    1. <div style="opacity:1;" class="divOuter">  
    2.   Opacity is 1.0  
    3.   <div style="opacity:0.6;">  
    4.     Opacity is 1.0 * 0.6 = 0.6  
    5.     <div style="opacity:0.5;">  
    6.       Opacity is 1.0 * 0.6 * 0.5 = 0.3  
    7.       <div style="opacity:1;">  
    8.         Opacity is 1.0 * 0.6 * 0.5 * 1.0 = 0.3  
    9.       </div>  
    10.     </div>  
    11.   </div>  
    12. </div>  
    Rendered Result - Irreversible

visibility: [visible | hidden | collapse]

  • {visibility: visible} The element is displayed normally and accepts events and focus.
    HTML
    1. <div class="divOuter">  
    2.   Before the DIV. Before the DIV. Before the DIV.  
    3.   <div style="visibility:visible;" class="divInner">  
    4.     visibility:visible.  
    5.   </div>  
    6.   After the DIV. After the DIV. After the DIV.  
    7. </div>  
    Rendered Result - inner div is visible
  • {visibility: hidden} The element is visually transparent, but the space it occupies remains, and it doesn't receive events or focus.
    HTML
    1. <div class="divOuter">  
    2.   Before the DIV.  
    3.   <div style="visibility:hidden;" class="divInner">  
    4.     visibility:hidden.  
    5.   </div>  
    6.   After the DIV.  
    7. </div>  
    Rendered Result - inner div is hidden
      No events or focus for inner div.

display: [block | inline | inline-block | none | list-item | table* | flex | grid | ...]

  • {display: block} The element is displayed as a block element (e.g., <div>) and accepts events and focus:
    HTML
    1. <div class="divOuter">  
    2.   Before the DIV. Before the DIV. Before the DIV.  
    3.   <div style="display:block;" class="divInner">  
    4.     display:block.  
    5.   </div>  
    6.   After the DIV. After the DIV. After the DIV.  
    7. </div>  
    Rendered Result - display:block
    Rendered Result - display:block; margin:6px; padding:6px;
  • {display: inline} The element is displayed inline (e.g., <span>) and accepts events and focus:
    HTML
    1. <div class="divOuter">  
    2.   Before the DIV. Before the DIV. Before the DIV.  
    3.   <div style="display:inline;" class="divInner">  
    4.     display:inline.  
    5.   </div>  
    6.   After the DIV. After the DIV. After the DIV.  
    7. </div>  
    Rendered Result - display:inline
    Rendered Result - display:inline; margin:6px; padding:6px;
  • {display: inline-block} The element is rendered as a box, but flows as if it were an inline element:
    HTML
    1. <div class="divOuter">  
    2.   Before the DIV. Before the DIV. Before the DIV.  
    3.   <div style="display:inline-block;" class="divInner">  
    4.     display:inline-block.  
    5.   </div>  
    6.   After the DIV. After the DIV. After the DIV.  
    7. </div>  
    Rendered Result - display:inline-block
    Rendered Result - display:inline-block; margin:6px; padding:6px;
  • {display: none} The element is not displayed and does not accept events or focus:
    HTML
    1. <div class="divOuter">  
    2.   Before the DIV.  
    3.   <div style="display:none;" class="divInner">  
    4.     display:none.  
    5.   </div>  
    6.   After the DIV.  
    7. </div>  
    Rendered Result - display:none
      No events or focus for inner div.
  • {display: list-item} The element is displayed as a list item element (i.e., <li>):
    HTML
    1. <div class="divOuter">  
    2.   Before the DIV.  
    3.   <div style="display:list-item;" class="divInner">  
    4.     display:list-item.  
    5.   </div>  
    6.   After the DIV.  
    7. </div>  
    Rendered Result - display:list-item

rgba(red, green, blue, opacity)

Gradients

Radial Gradient

A circle's position is defined from the center and its radius determines its size. The circle can be positioned anywhere inside the box defined by the background-size attribute. In the examples below, the box is defined as 8px by 8px. If the circle is positioned at 0px, 0px and given a radius of 2px, then its center will be positioned at the upper-left corner, clipping most of the circle.