and to change slides. 2 for comments. www.standardista.com/webstock

CSS: from Knowledgable to Ninja

Estelle Weyl
@estellevw
www.standardista.com

selectorA {
   property1: value1;
   property2: value2;
}

selectorB {
   property1: value3;
   property2: value4;
}
selector:pseudo-class::pseudo-element {
    -vendor-property: value;
}

selector[attribute],
selector ~ relation {
    property: -vendor-value;
    -vendor-property: -vendor-value;
    -vendor-property: weirdsyntax;
}
@at-rule {
    property: value;
 }
 
@at-rule {
    selector {
    	property: value;
    }
    selector2 {
    	property: value;
    }
 }

Exercise Files

Exercise files all open in the same seperate window

Selectors

  • Basic Selectors
  • Relational selectors
  • Selector list
  • selector support grid
  • Intro to Attribute selectors
  • Older attribute selectors
  • CSS3 Attribute Selectors
  • Attribute Selectors Examples
  • Using attribute selectors
  • UI pseudo-classes
  • Form related UI pseudo-classes
  • UI selectors
  • List of Structural selectors
  • :root
  • First, last, & only
  • nth pseudo-classes
  • Structural Selectors
  • :empty pseudo-class
  • :not - Negation pseudo-class
  • lang, target, anchor links
  • Pseudo elements
  • selectors tips

Specificity

  • Understanding Specificity
  • Specificity PDF
  • Specificity Notes

Generated Content

  • before and ::after
  • Understanding Generated Content
  • Faux Elements
  • Syntax
  • Special Character
  • Simple Use Cases
  • Informative Links
  • Quote & Thought bubbles
  • shapes
  • Other ideas
  • Exercise

Media Queries

  • Syntax
  • Old Media Queries
  • New Media Queries
  • More Media Query Tidbits
  • In action
  • mediaqueri.es

Debugging

  • Debuggers
  • Pseudo Elements / Shadow DOM

Colors

  • Color formats
  • Color Keywords
  • RGB / RGBA
  • HSL / HSLA
  • HSLA / RGBA / HEX conversion
  • Opacity
  • AlphaTransparency
  • AlphaTransparency Tips
  • Color Tips
  • Depracated UI Keyterm Colors
  • -moz-appearance / -webkit-appearance

Fonts

  • @font-face
  • Font Services
  • Text Shadow
  • box-shadow

multi-column text

CSS3 gradients

linear gradients

radial gradients

CSS3 Box Model

border-radius

border images

box shadows

CSS3 backgrounds

background size

multiple background images

background-origin

Clipping

Transforms

transform origins

CSS3 transitions

Animating