and to change slides. 2 for comments. estelle.github.com/CSS-Workshop

CSS: from Knowledgable to Ninja

Estelle Weyl
@estellevw
www.standardista.com

estelle.github.com/CSS-Workshop

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;
    }
 }

Slide Notes/Exercise Files

Many exercise files open in a separate window. When they do, they will all open in the same seperate window

Other exercise files are incorporated in the deck. If the slide is grey or reads "try this", you can edit the CSS in the head to impact the rest of the slide.

If you are unable to move between slides, click anywhere OUTSIDE the slide, and try again

To take notes, click on #4.

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
  • CSS Regions
  • FlexBox & Grids
  • Cursors
  • Text Overflow
  • Word Wrap
  • calc()
  • rem
  • Pointer Events
  • -webkit-user-modify