CSS:
Design Tools to
Style Your Web Content

estelle.github.com/cssintro/

Me

Estelle Weyl

www.standardista.com

@estellevw

@standardista

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

Why Use External Stylesheets:

Allows reusability
Eases maintainability
Changes are sitewide
Changes are instantaneous
Interchangeable presentation layer

Open in separate window

Linking to CSS

<link rel="stylesheet" media="screen" href="/219/219.css">

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

@at-rule {
    property: value;
 }

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

selectorA {
   property1: value1;
   property2: value2;
}

selectorB {
   property1: value3;
   property2: value4;
}

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

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

Lots 'o Selectors

*
E
.class
#id
E F
E > F
E + F
E[attribute]
E[attribute=value]
E[attribute~=value]
E[attribute|=value]
:first-child
:lang()
:before
::before
::selection
:after
::after
:first-letter
::first-letter
:first-line
::first-line
E[attribute^=value]
E[attribute$=value]
E[attribute*=value]
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enabled
:disabled
:checked
:indeterminate
:default
:valid
:invalid
:in-range
:out-of-range
:required
:optional
:read-only
:read-write

Structural Selectors

li:first-child,
li:last-child {
  font-weight: bold;
}
li:nth-child(even) {
  background-color: #CCC;
}
li:nth-child(3) {
  color: #CCC;
}
li:first-of-type,
li:last-of-type{
  text-decoration:line-through;
}
li:nth-of-type(odd) {
  background-color: #FFF;
}
li:nth-of-type(4n) {
  color: #E2007A;
}
li:nth-of-type(3n-1) {
  text-align: right;
}

Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10

A simple Linear Gradient

background-image:
    linear-gradient(
    #3A67AB,
    #E8F6FF);

background-image:
    linear-gradient(
    to bottom,
    #3A67AB 0%,
    #E8F6FF 100%);

background-image:
    linear-gradient(180deg,
    #3A67AB 0%,
    #E8F6FF 100%);

prefix with -webkit- for old mobile webkits.

More Complex Linear Gradient

background-image:
  linear-gradient(180deg,
     rgba(255,255,255,0) 40%,
     #ffffff 40%,
     #ffffff 60%,
     rgba(255,255,255,0) 60%),
  linear-gradient(90deg,
     rgba(255,255,255,0) 40%,
     #ffffff 40%,
     #ffffff 60%,
     rgba(255,255,255,0) 60%),
  linear-gradient(45deg,
     rgba(255,255,255,0) 43%,
     #ffffff 43%,
     #ffffff 57%,
     rgba(255,255,255,0) 57%),
  linear-gradient(135deg,
     rgba(255,255,255,0) 43%,
     #ffffff 43%,
     #ffffff 57%,
     rgba(255,255,255,0) 57%);

Gradients

background: linear-gradient(
  90deg, 
  #E468E8 0%,
  #E169FF 33%,
  #4FBFF7 66%,
  #2C4299 100%);

             
 Angle
             
 First stop
 Second stop

background: radial-gradient(circle at 4% 12%,
 #4697AB, 
 #F7F9FA,
 #C344C7 40%);

   Circle 
   Ellipse

 Left/Right
 Top/Bottom
 colorstop

Gradient Foo

Opacity

opacity: 1;

opacity: 0.75;

opacity: 0.5;

opacity: 0.25;

opacity: 0;

AlphaTransparency

color: rgba(0, 0, 0, 1);
background-color: rgba(58, 103, 171, 1);

color: rgba(0, 0, 0, 0.75);
background-color: rgba(58, 103, 171, 0.75);

color: rgba(0, 0, 0, 0.5;
background-color: rgba(58, 103, 171, 0.5);

color: rgba(0, 0, 0, 0.25);
background-color: rgba(58, 103, 171, 0.25);

color: rgba(0, 0, 0, 0)
background-color: rgba(58, 103, 171, 0);

HSLA

color:hsla(
   328, 	 H blah
   100%, 	 S 
   44%, 	 L 
   1.00 	 A 
);

HSLA Colors

border-radius

Border on slides, code & showflakes

border-radius: 0;

border-radius: 20px;

border-radius: 50%;

border-radius

.circle {border-radius: 50%;}

.oval { border-radius: 50%;}

.different { border-radius: 10px 30px;}

.elliptical { border-radius: 10px / 30px;}

transforms

translate
```
transform: translate(-80px, 200px);
```
rotate
```
transform: rotate(15deg);
```
scale
```
transform: scale(1.5, 2);
```
skew
```
transform: skewX(-8deg);
```

multiple transforms

transform: translate(-80px, 200px)
  rotate(-15deg) scale(2, 1.5) skewX(8deg);

transitions

Enables the transition of properties from one state to the next over a defined length of time

transition-property: properties (or 'all') that transition
transition-duration: s or ms it takes to transition
transition-timing-function: bezier curve of transition
transition-delay: s or ms before transition starts
transition: shorthand for 4 transition properties

transitions

code {
   color: #000000;
   font-size: 100%;
   background-color: rgba(255,255,255,0.4);
   transition: all 0.5s ease-in 50ms;
}
code:hover {
   color: #E2007A;
   font-size: 120%;
   background-color: rgba(255,255,255,0.8);
}

code {
   transition: color, font-size, background-color 0.5s ease-in 50ms;
}

Animation Essentials

@keyframes
animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state
animation-delay
animation-fill-mode
animation (shorthand)

Keyframes

@keyframes falling {

    0% {
      top: -40px;
    }

    100% {
      top: 1000px;
    }

}

Granular animation control

@keyframes falling {

    0% {
      top: -40px;
    }

    10% {
      top: 400px;
    }

    90% {
      top: 560px;
    }

    100% {
      top: 1000px;
    }

}

Hardware Acceleration

@keyframes falling {

    0%{
      transform: translate3d(0, 0, 0)
            rotate(0deg)
            scale(0.9, 0.9);
    }

    100% {
       transform: translate3d(0, 1000px, 0)
             rotate(360deg)
             scale(1.1, 1.1);
    }

}

‘animation-name’

.snowflake {
   ...
   -webkit-transform-origin: left -20px;
   -webkit-animation-name: falling; 

   transform-origin: left -20px;
   animation-name: falling; 
}

‘animation-duration’

.snowflake { 
  ...
  -webkit-transform-origin: left -20px;
  -webkit-animation-name: falling;
  -webkit-animation-duration: 3s;

  transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
}

‘animation-timing-function’

.snowflake { 
   …
  transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
}

ease
linear
ease-in
ease-out
ease-in-out
step-start /* same as steps(1, start) */
step-end /* same as steps(1, end) */
steps( X, start|end) /* X = # of steps + when change of value occurs */
cubic-bezier(x1, y1, x2, y2)

-webkit-

Open in separate window

Tools for generating CSS?

Text Editors

WYSIWYG

Dreamweaver
Aloha Editor
Maqetta
BlueGriffon

Don't use word processing applications!!

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>

Preprocessors

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

Sass
Stylus
LESS

Debuggers

Firefox ➫ Firebug
Opera ➫ DragonFly
Internet Explorer ➫ F-12
Safari ➫ Web Inspector
Chrome ➫ Developer Tools
Mobile ➫ Weinre
Blackberry ➫ Remote debugging by IP
Mobile Chrome ➫ Tethered debugging

CSS Writing Tool

Open in separate window

CSS Writing Tools

Open in separate window