First: History

Bad because... why?

• No separation of concern
• No reusability
• Responsive what?
• No semantic meaning

CSS to the rescue!

Good because... why?

• Separation of concern
• Reusable
• Semantic

What is CSS?

"Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language." - Wikipedia

What is CSS?

"Lets you define a set of styles to a set of elements" - Me

Basic selectors

span {
    color: dark-gray;
}

A type of element

.big {
   font-size: 150%;
}

A class of elements

A specific element

#order-info {
    line-height: 120%;
    color: teal;
}

Combine selectors

.important, 
.blushing {
    color: red;
}

Make one block of styles apply to different selectors

h1, h2, h3, h4, h5 {
    border-bottom: 1px solid green;
}

As many as you want, actually!

More selectors

table .big {
    font-size: 130%;
}

Any descendants

table > .big {
    font-size: 120%;
}

Direct descendants

All elements

* {
    padding: 0;
    margin: 0;
}

Even more selectors

.nav-link + .spacer {
    height: 10px;
}

Next sibling

.nav-link ~ h3 {
    margin-bottom: 10px;
}

Previous sibling

<!-- html -->

<h3>Nav title</h3>
<a href="#" class="nav-link">Link</a>
<div class="spacer"></div>
<h3>Another nav title</h3>
<div class="spacer"></div>

Pseudo-selectors

Select based on the "state" of the selector

• focus
• hover
• active
• enabled
• checked
• visited

Pseudo-selectors

Pseudo-simple to use

a {
    color: blue;
}

a:hover, a:focus {
    text-decoration: underline;
}

a:visited {
    color: purple;
}

Lots more!

Attribute selectors

input[type=email] {
    background-color: #eee;
}

More pseudo-selectors

.order:first-of-type {
    font-size: 200%;
}

tbody tr:nth-of-type(odd) {
    background: #eee;
}

More: bit.ly/bring-selectors

Specificity

How CSS resolves conflicting selectors

Example

What is being shown?

<!-- html -->

<div class="hippie-colors" id="my-hippie-div">
    What color will I be?
</div>

/* CSS */

div.hippie-colors {
    background-color: cyan;
    color: pink;
}

div#my-hippie-div {
    background-color: yellow
    color: green;
}

Specificity

Count 'em up and add them
 

Inline: 1-0-0-0

ID: 0-1-0-0

Class / Attribute / Pseudo: 0-0-1-0 

Element: 0-0-0-1

Specificity

Examples:

a {
    /* Specificity: 1 */
}

a:hover {
    /* Specificity: 1 + 10 = 11 */
}

a.big {
    /* Specificity: 1 + 10 = 11 */
}

a.big:hover {
    /* Specificity: 1 + 10 + 10 = 21 */
}

#order-button {
    /* Specificity: 100 */
}

Specificity

A few tricks

• Use as few selectors as possible
• Remember the counting rule
• Never use important!
• When in doubt, use the
  specificity calculator

The box model

The box model

Why it means trouble

• Hard to calculate (maths...)
• Different in different browsers
• Hard to know width before runtime

The box model

Tips

Use box-sizing: border-box; (IE8+)

or

wrap in a container

display: ???;

Let me teach you how to layout

display:

Every element has a default!

<!-- block level elements -->

<div>...</div>
<h1>...</h1>
<p>...</p>

<!-- inline elements -->

<em>...</em>
<strong>...</strong>
<a>...</a>

display:

And every element can be overridden!

a.nav-link {
    display: block;
}

div.wannabe-span {
    display: inline;
}

display:

Available values:

display: block;         /* Block level element */
display: inline;        /* Inline element */
display: inline-block;  /* Inline element with width & height */
display: table;         /* Behave like a table */
display: none;          /* Pretend like i'm not here */

display: flex;          /* The future */

...and lots more @ bit.ly/bring-display

When to use what?

display: block;

When you want a block of content

When you want to float

When you want a width and height

When to use what?

display: inline;

When you want an element to behave like a chunk of text

When you don't care about the width

When to use what?

display: inline-block;

When you want display: inline; but want a width

When you don't want to float

When to use what?

display: table | table-cell;

When you want to center vertically

When to use what?

display: flex | inline-flex;

When you are in the future and they have decided on the behavior

More at bit.ly/bring-flexbox

When to use what?

display: none;

When you want to pretend an element isn't there

Tip:

visibility: hidden;

Floats

And when to use them

Floats

Originally meant to make text wrap around images, like this:

Floats

But is instead used for layouts, which leads to trouble

Floats

Syntax

float: left | right | none;

Floats

Clearing

clear: left | right | both | none;

Controls the behavior of floats

Rarely work as "expected"

Floats

Introducing Clearfix™

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom: 1;
}

Floats

Other ways of clearing floats:

/*  With a specific <div class="clearfix"> element
    after your floated elements
 */

.clearfix { 
    clear: both;
}

/* Or on the element containing the floats */

.container {
    overflow: auto;
}

Floats are tricky!

Hard to use

Typically not used as intended

Inconsistencies between browsers

display: inline-block;

Same behavior as floats, no clearing!

But requires a hack in IE 7

.float {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

Positioning

When a regular layout doesn't work

When you want to escape the rest of the page

Positioning

Available values

position: static; /* Default */
position: relative; /* Stay in flow */
position: absolute; /* Relative to nearest positioned container */
position: fixed; /* Relative to viewport */

position: sticky; /* Future */

Place with top, right, bottom, left

Cool stuff!

Media queries

Different styles for different viewports

Media queries

Example

.container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width : 320px) {
    .container {
        width: 100%;
        margin: 10px 0;
    }
}

More at bit.ly/bring-mediaqueries

Transitions

Amazing effects if used correctly

Used for user feedback

Downgrades well

Transitions

Example

.order {
    background-color: #fff;
    transition: all 0.5s ease-out;
}

.order.selected {
    background-color: #eee;
}

Tip: use ease-out!

Transforms & filters

Great with transitions

Create great effects that renders well

Use with caution!

Transforms & filters

Example

.order {
    transform: rotate(-3deg);
}

.order:nth-of-type(odd) {
    transform: rotate(3deg);
}

.instagram-order {
    filter: sepia(.5);
}

Cool properties

Make selected text stand out

Tutorial at bit.ly/bring-text-selection-color

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

Make text unselectable

Tutorial at bit.ly/bring-text-selection

.unselectable {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */

    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;  
}

Viewport units

Tutorial at bit.ly/bring-viewport-units

.fullscreen {
    width: 100vh;
    height: 500px; /* fallback for old people */
    height: 100vh;
}

Structure

Because CSS is code, too!

Structure

Basic rules to live by

Write reusable classes

Minimize use of #ids

Write small files and concatenate

Refactor when needed

Change HTML? Clean up CSS!