HTML5 Mobile Mastery:
CSS & CSS3

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
    • Syntax
    • Support
    • Gotchas
  • Font Resources
  • Text Shadow
  • Box-shadow
  • Text-stroke
  • W3C Text Module

Backgrounds and Borders

  • Background properties
    • background-color
    • background-image'
    • background-repeat
    • background-attachment
    • background-position
    • background-clip
    • background-origin
    • background-size
    • background shorthand
  • Border properties
    • border-color
    • border-style
    • border-width
    • border shorthand
    • border-radius
  • Border Images
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repea
    • border-image shorthand

Gradients

  • Types of Gradients
  • Angles & Keyterm directions
  • Color Stops
  • Linear Gradients
  • Angled patterns
  • with Background-size
  • Radial Gradients

Tranforms

  • 2D Transform Functions
  • 3D Transform Functions
  • Transform Related Properties
  • Multiple Transforms

Transitions & Animations

  • Transtion Propertes
  • What can be transitioned?
  • Animation Keyframes
  • Animation Properties

Other Features

  • Columns
  • Box Sizing
  • FlexBox & Grids
  • Cursors
  • Text Overflow
  • Word Wrap
  • calc()
  • rem
  • Pointer Events
  • -webkit-user-modify