C

C and S are actually just normal text with text-shadow on.

S

If you know how to use it

Or google when you don't

Resources

Mozilla Developer Network
Prefix google queries with "mdn":
- "mdn -webkit-transition"
- "mdn css float"
Web Platform Docs
CSS Tricks
CSS Weekly

Can I Use?

Topics

Language
Layout
CSS3
Pre-processors
Best Practices

Language

Selectors

<style>
  #unique-id {
    color: darkred;
  }
  .class-name {
    color: darkslateblue;
  }
</style> 

<span id="unique-id">
  There's this text.
</span>

<span class="class-name">
  And then there's this.
</span>

Don't use # (id) selectors,
Always use . (class) selectors.

<style>
  .blue {
    color: darkslateblue;
  }
  .big {
    font-size: 2em;
  }
  .blue.big {
    text-align: center;
  }
</style>

<div class="big"> Big text </div>
<div class="blue"> Blue text </div>

<div class="blue big">
  Big, Blue text.<br>And centered too!
</div>

Multiple classes on one element.

<style>
  .item { color: darkslateblue; }
  .container > .item { color: darkred; }
</style>

<div class="item"> Item outside. </div>

<div class="container">
  <div class="item">
    Item one level inside.
  </div>

  <div>
    <div class="item">
      Item two levels inside.
    </div>
  </div>
</div>

Child selector: .a > .b

<style>
  .item { color: darkslateblue; }
  .container .item { color: darkred; }
</style>

<div class="item"> Item outside. </div>

<div class="container">
  <div class="item">
    Item one level inside.
  </div>

  <div>
    <div class="item">
      Item two levels inside.
    </div>
  </div>
</div>

Descendant selector: .a .b

<style>
  div { color: darkslateblue; }
  div[data-attr] { color: darkred; }
  div[data-attr=specific] { font-size: 1.5em; }
  div[data-attr~=contains] { text-align: center; }
</style>

<div>Normal div element</div>

<div data-attr="someValue">
  With some attribute value
</div>

<div data-attr="specific">
  With the specific attribute
</div>

<div data-attr="contains a specific part">
  Contains attribute value<br>
  in space-separated form
</div>

Attribute Selector: .a[attribute=value]

<style>
  li:first-child {
    color: darkred;
  }
  li:nth-child(3) {
    color: darkslateblue;
  }
  li:nth-child(even) {
    background: peachpuff;
  }
  li:last-child {
    font-size: 1.4em;
  }
</style>

<ul>
  <li class="item">First and Red</li>
  <li class="item">Even</li>
  <li class="item">Blue and Third</li>
  <li class="item">Big and Even</li>
</ul>

Pseudo Selectors:
:nth-child, :nth-of-type, :hover, etc.

<style>
  li:first-child { color: darkred; }

  li:first-child + li + li {
    color: darkslateblue;
  }
  li:first-child + li,
  li:first-child + li + li + li {
    background: peachpuff;
  }
  li:first-child + li + li + li {
    font-size: 1.4em;
  }
</style>

<ul>
  <li class="item">First</li>
  <li class="item">Second</li>
  <li class="item">Third</li>
  <li class="item">Fourth (and last)</li>
</ul>

Sibling selector: .a + .b

When you're fighting Internet Explorer (< 9)

Colors

<style>
  .bar {
    color: white;
    text-align: center;
    border-bottom: 1px solid white;
  }
  .name { background: steelblue; }
  .hex { background: #4682B4 }
  .rgb { background: rgb(70, 130, 180); }
  .percent {
    background: rgb(27%, 51%, 71%);
  }
</style>

<div class="name bar"> steelblue </div>
<div class="hex bar"> # 46 82 B4 </div>
<div class="rgb bar"> rgb(70, 130, 180) </div>
<div class="percent bar"> rgb(27%, 51%, 71%) </div>

#8CF translates to #88CCFF

<style>
  .bar { color: black; }

  .name { background: steelblue; }
  .rgb { background: rgb(70, 130, 180); }

  .light-div { opacity: 0.5; }
  .light-color {
    background: rgba(70, 130, 180, 0.5);
  }
</style>

<div class="name light-div bar"> steelblue
</div>
<div class="rgb light-div bar"> rgb(70, 130, 180)
</div>
<div class="light-color bar"> rgba(70, 130, 180, 0.5)
</div>

Opacity of an element ≠
Translucence of its background

Specificity

<style>
  #red {
    color: darkred;
  }
  .blue {
    color: darkslateblue;
  }
  span.blue {
    color: darkgreen;
  }
</style>

<div class="blue"> This is fine. </div>

<span id="red" class="blue">
  But what color would this be?
</span>

<span class="blue"> And this? </span>

#unique-id greater than
div.class-name greater than
.class-name

Cascade

<style>
  .red { background: darkred; }
  .red-imp {
    background: darkred !important;
  }
  .blue { background: steelblue; }
</style>

<div class="bar red blue">
  Red or Blue?
</div>

<div class="bar blue red">
  Blue or Red?
</div>

<div class="bar blue red-imp">
  Definitely Red
</div>

Order of assignment is important,
not usage.
Avoid !important at all costs.

Pseudo Elements

<style>
  .woman { background: steelblue; color: #f2f2f2; }
  .man { background: teal; color: #f2f2f2; }

  .man:before { content: "Man: "; color: white; }
  .woman:before { content: "Woman: "; color: white; }

  .woman.talk:after {
    content: "Please, do it for me!" !important;
  }
</style>

<div class="woman talk bar">
  I want to play for No. 21.
</div>
<div class="man talk bar">
  We don't have enough cash for that.
</div>
<div class="woman talk bar">
  Then I want another drink.
</div>

Only text content allowed.

Units

<style>
  body { font-size: 1em; }
  .bar { background: steelblue; }

  .rem { font-size: 2rem; }
  .px  { font-size: 32px; }
  .percent { font-size: 200%; }
  .em  { font-size: 2em; }
</style>

<div class="rem bar">
  <div class="rem">2rem -&gt; 2rem = 2rem</div>
</div>
<div class="px bar">2em (1em ~ 16px)</div>
<div class="percent bar">200% (1em = 100%)</div>
<div class="em bar">
  <div class="em">2em -&gt; 2em = 4em</div>
</div>

Prefer rem ("root em"), relative to root.

Available everywhere except I E 8..

Layout

Display Type

<style>
  .block { display: block }
  .inline { display: inline }
</style>

<span>Some text on one line,</span>
<span>and some more right after.</span>
<hr>
<div>Text in div,</div>
<div>doesn't keep on the same line.</div>
<hr>
<div class="inline">Hey! This div</div>
<div class="inline">is weird!</div> 
<hr>
<span class="block">And look at this span,</span>
<span class="block">it broke!</span>

block makes a box,
inline runs like text.

Hide things

<style>
  .bar { background: darkred; }
  .remove { display: none; }
  .hidden { visibility: hidden; }
  .transparent { opacity: 0; }
</style>

<div class="bar remove">
  This won't show.
</div>
<div class="bar hidden">
  This only takes space.
</div>
<div class="bar transparent">
  This hides right under your nose.
</div>

display: none removes from layout,

visibility: hidden
renders only dimensions,

opacity: 0 just makes it transparent.

z-index

<style>
  .cape { top: 30px; }
  .superman { top: 60px; }
  .tights { top: 220px; }
</style>

<div class="wrap">
  <div class="cape center-it">
    cape
  </div>
  <div class="superman center-it">
    superman
  </div>
  <div class="tights center-it">
    tights
  </div>
</div>

Default stacking order is
order of appearance in HTML.

<style>
  .cape { z-index: 10; }
  .superman { z-index: 100; }
  .tights { z-index: 10000; }

  .wrap { z-index: 2; position: relative; }
  .tight-wrap { z-index: 1; position: relative; }
</style>

<div class="wrap">
  <div class="cape center-it"> cape
  </div>
  <div class="superman center-it"> superman
  </div>
</div>

<div class="tight-wrap">
  <div class="tights center-it"> tights
  </div>
</div>

Each z-index creates
a new stacking context

Default Box Model

<style>
  div {
    width: 100%;
    padding: 20px;
    border: 30px solid steelblue;
  }
</style>

<div>
  Box with 100% width takes more than 100%
</div>

width means width of content,
padding, margin, border excluded.

It was never right.

The Right Box Model

<style>
  * { box-sizing: border-box; }

  div {
    width: 100%;
    padding: 20px;
    border: 30px solid steelblue;
  }
</style>

<div>
  Now, width calculation includes padding &amp; border
</div>

Available in all browsers today.

Vertical Margins

<style>
  .box { margin: 40px; color: white; }

  .first { background: #ccc; }
  .second { background: #bbb; }
  .third { background: #aaa; }
  .fourth { background: #999; }
  .fifth { background: #555; }
</style>

<div class="first box">
  <div class="second box">
    <div class="third box">
      <div class="fourth box">
        <div class="fifth box">
          Banana<br><br><br>
        </div>
      </div>
    </div>
  </div>
</div>

Adjacent vertical margins collapse
and leave only the larger one.

<style>
  .box { margin: 25px; color: white; padding: 1px; }

  .first { background: #ccc; }
  .second { background: #bbb; }
  .third { background: #aaa; }
  .fourth { background: #999; }
  .fifth { background: #555; }
</style>

<div class="first box">
  <div class="second box">
    <div class="third box">
      <div class="fourth box">
        <div class="fifth box">
          Banana<br><br><br>
        </div>
      </div>
    </div>
  </div>
</div>

Unless you set padding or border

position: relative

<style>
  .einstein { position: relative; }

  .box { border: 2px solid darkred; }
  .big { width: 180px; height: 150px; }

  .down-right { top: 20px;  left: 200px; }
  .bottom-right { right: 0; bottom: 0; }
</style>

<div class="einstein box big down-right">
Einstein a bit down and left out.</div>

<div class="einstein box">
Einstein right<br> where he belongs.</div>

<div class="einstein box big bottom-right">
Einstein can't fall.</div>

Setting position: relative moves
element relative to its normal position.

position: absolute

<style>
  .newton { position: absolute; }

  .box { border: 2px solid darkred; }
  .big { width: 180px; height: 150px; }

  .down-right { top: 20px;  left: 200px; }
  .bottom-right { right: 0; bottom: 0; }
</style>

<div class="newton box big down-right">
Newton matches Einstein.</div>

<div class="newton box">
Newton back to start.</div>

<div class="newton box big bottom-right">
Newton goes all the way down.</div>

absolute moves element relative to
the closest ancestor with position.

Float

<style>
  .blue-box {
    width: 100px;
    height: 100px;
    background: steelblue;
    border: 2px solid white;
    color: white;
  }
  .left { float: left; }
  .right { float: right; }
  .clear-left { clear: left; }
  .clear-both { clear: both; }
</style>
<div class="blue-box">normal</div>
<div class="blue-box left">left</div>
<div class="blue-box right">right</div>
<div class="blue-box left">stacked</div>
<div class="blue-box left">another</div>
<div class="blue-box clear-both">normal</div>

Better use a library for clearing floats.

CSS3

Translate

<style>
  body { font-size: 1em; }
  .blue-box { position: absolute; border: 0; }

  .second { top: 100px; left: 100px; }
  .third  {
    -webkit-transform: translateX(200px);
  }
  .fourth {
    -webkit-transform: translate(300px, 100px);
  }
  .fifth  {
    -webkit-transform: translate3d(400px, 0, 0);
  }
</style>

<div class="first  blue-box"> default     </div>
<div class="second blue-box"> left        </div>
<div class="third  blue-box"> translateX  </div>
<div class="fourth blue-box"> translate   </div>
<div class="fifth  blue-box"> translate3d </div>

translate3d() ensures hardware acceleration.

Rotate

<style>
  .blue-box { position: absolute; border: 0; }
  .first {
    -webkit-transform:  translate(50px, 100px)
                        rotate(45deg);
  }
  .second  {
    -webkit-transform:  translate(150px, 200px)
                        rotate(45deg);
  }
  .third {
    -webkit-transform:  translate(250px, 100px)
                        rotate(45deg);
  }
</style>

<div class="center-area">
  <div class="first  blue-box"></div>
  <div class="second blue-box"></div>
  <div class="third  blue-box"></div>
</div>

rotateZ() is the same as rotate()

Skew

<style>
.roof { width: 40px; height: 130px; }
.roof.left {
  -webkit-transform: translate(120px, 65px) skewX(-40deg);
}
.roof.right {
  -webkit-transform: translate(250px, 65px) skewX(40deg);
}
.base {
  -webkit-transform: translate(130px, 175px);
  width: 150px; height: 170px;
}
</style>

<div class="hut center-area">
  <div class="left roof empty-box"></div>
  <div class="right roof empty-box"></div>
  <div class="base empty-box"></div>
</div>

Whatever is not specified in transform,
takes the default value 0.

Perspective

<style>
  body { -webkit-perspective: 400; }
  .hut {
    -webkit-transform: rotateY(-30deg);
  }
</style>

<div class="hut center-area">
  <div class="left roof empty-box"></div>
  <div class="right roof empty-box"></div>
  <div class="base empty-box"></div>
</div>

-webkit-perspective needs to
be set on an outer element

Transitions

<style>
  body { -webkit-perspective: 400; }
  .hut {
    -webkit-transform: rotateY(-30deg);
    -webkit-transition: -webkit-transform 30s ease;
    -webkit-transform-style: preserve-3d;
  }
</style>

<div class="hut center-area">
  <div class="left roof empty-box"></div>
  <div class="right roof empty-box"></div>
  <div class="base empty-box"></div>
</div>

<script>
  setTimeout(window.rotateHut, 500);
</script>

Try setting rotateY() on the hut directly.

You can put the transition on all as well.

It's a bird, it's a plane...

<style>
  body { -webkit-perspective: 800px; }
  .bird-plane {
    position: absolute; width: 666px; height: 300px;
    -webkit-transform: translate3d(-100px, 40px, 550px) scale(0.33);
  }
</style>

<div class="hut center-area">
  <div class="bird-plane"></div>
  <div class="left roof empty-box"></div>
  <div class="right roof empty-box"></div>
  <div class="base empty-box"></div>
</div>

<script> setTimeout(window.rotateHut, 500); </script>

preserve-3d becomes important
when actually dealing with 3d.

Animations

<style>
  body { -webkit-perspective: 800px; }
  @-webkit-keyframes buzz {
    from { opacity: 1;   background: steelblue; }
    50%  { opacity: 0.5; background: orange; }
    to   { opacity: 1;   background: steelblue; }
  }

  .base, .roof {
    -webkit-animation: buzz 1s infinite;
  }
</style>

<div class="hut center-area">
  <div class="bird-plane"></div>
  <div class="left roof empty-box"></div>
  <div class="right roof empty-box"></div>
  <div class="base empty-box"></div>
</div>

<script> setTimeout(window.rotateHut, 500); </script>

Any number of animations can be run
simultaneously on an element.

C

S

Now you know why.

Pre-processors

LESS CSS

Only adds features on top of regular CSS.

Best Practices

Never use ID selectors. Classes all the way.
Avoid attaching classes to element type selectors.
Avoid !important.
Always use vendor prefixes.
Put plain property last.
Provide for a fallback experience.
Use CSS Lint

Style Sheets

Revisited

Anup Bishnoi