CSS Crash Course

Lucid Software Development Teams, May 2014

Basic CSS

See the Pen Basic Selectors by Matt Swensen (@mjswensen) on CodePen.

Advanced Selectors

See the Pen Advanced Selectors by Matt Swensen (@mjswensen) on CodePen.

Pseudo-elements

See the Pen Pseudo-elements by Matt Swensen (@mjswensen) on CodePen.

Media Queries and Responsive Web Design

@media screen and (max-width: 1024px) {
  .my-class {
    ...
  }
}

Transitions and Transforms

See the Pen Transitions and Transforms by Matt Swensen (@mjswensen) on CodePen.

Animations

See the Pen Animations by Matt Swensen (@mjswensen) on CodePen.

Preprocessors

Preprocessors make writing CSS even more fun than it already is. The three main ones right now are SASS, Less, and Stylus. Some of the main advantages of a CSS preprocessor are nesting, variables, and mixins/functions.

SASS Less Stylus
More robust and has features familiar to developers like if statements and lists More designer-oriented; has color blending functions like multiply Transparent mixins for seamless CSS3 prefixing

Resources