Estelle Weyl · Standardista.com · @estellevw ·Press key to advance. estelle.github.io/cssmastery/

CSS in Depth V2

estelle.github.com/cssmastery/

Me

Estelle Weyl

www.standardista.com

@estellevw

@standardista

HTML5 and CSS3 for the Real WorldCSS: The Definitive GuideMObile HTML5Web Performance Daybook

CSS3 Features Displaying now?

  • CSS3 Selectors
  • linear gradients
  • opacity
  • RGBA colors
  • border-radius
  • transforms
  • transitions
  • animations
  • text-shadow
  • fonts

Opacity is from CSS2

Cascading Style Sheets (CSS)

Stylesheet language used to describe the presentation of a document written in HTML

HTML

<div id="flakes">
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<div class="snowman"></div>

Separation of Concerns

Content

HTML

Presentation

CSS

Behavior

JavaScript

CSS tells the browser how HTML content is to be presented to the user

Including CSS

External Style Sheet

<link href=“stylesheet” href=“path/file.css” />

Embedded Styles

<style>
   body {}
</style>

Inline Styles

<p style=“color: black”>Lorem ipsum</p>

Why Use External Stylesheets:

  • Allows reusability
  • Eases maintainability
  • Changes are sitewide
  • Changes are instantaneous
  • Interchangeable presentation layer
Open in separate window
Open in separate window

Linking to CSS

<link rel="stylesheet" 
    media="screen" 
    href="/205/205.css"
    type="text/css" />
Open in separate window
Open in separate window
Open in separate window

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

p {
   margin: 40px;
   color: magenta;
}

input[type="search"] {
   border-radius: 5px;
   background-image: url(image/search.jpg);
}

@at-rule {
    property: value;
 }

@at-rule {
    selector {
      property: value;
    }
    selector2 {
      property: value;
    }
 }

Tools for generating CSS?

Text Editors

WYSIWYG

  • Dreamweaver
  • Aloha Editor
  • Maqetta
  • BlueGriffon

Don't use word processing applications!!

Preprocessors

CSS preprocessors add functionality additions like variables, nesting, and mixins (during development).

  • Sass
  • Stylus
  • LESS

Postprocessors?

Debuggers

  • Firefox ➫ Firebug ➫ Firefox Developer Tools
  • Opera ➫ DragonFly
  • IE and EDGE ➫ F-12
  • Safari ➫ Web Inspector
  • Chrome ➫ Developer Tools
  • Mobile ➫ Weinre
  • Mobile ➫ Remote debugging by IP
  • Mobile ➫ Tethered debugging

CSS Writing Tool

Open in separate window

Codepen

Open in separate window

Table of Content

  1. Introduction
  2. Selectors
  3. Specificity
  4. Generated Content
  5. Media Queries
  6. Best Practices
  7. Debugging
  8. Colors & Transparency
  9. Flexbox
  10. Tables
  11. Grids
  12. Backgrounds & Borders
  13. Gradients
  14. Transforms
  15. Transitions & Animation
  16. Other Features