1. Specificity / INheritance

In the simplest case, the last declaration that matches a given element is the one that gets applied. What colour will this be? •

<p id="id" class="class"><span>Hello World</span></p>

p { color: red; }
p { color: green; }

<p id="id" class="class"><span>Hello World</span></p>

.class { color: red; }
p { color: black; }

.class { color: red; }
#id { color: blue; }
p { color: black; }

Some selector patterns are more specific than others.

– #id (worth 100 points each)

– .class (worth 10 points each)

– element (worth 1 point each)

#id { color: green; }
p#id { color: yellow; }

But be careful whenever inheritance is involved! When calculating specificity, don't compare apples and oranges. Remember to read your selectors right-to-left. What colour will this be? •

#id { color: red; }
p span { color: black; }

Some links:

– CSS: Specificity Wars

– CSS Specificity

– Specificity Calculator

2. USEFUL SELECTORS

Selectors can match an element based on more than 1 class at a time. •

<ul>
    <li class="heading">Heading</li>
    <li class="menu-item">One</li>
    <li class="menu-item">Two</li>
    <li class="menu-item active">Three</li>
    <li class="menu-item">Four</li>
</ul>

li.menu-item { color: lightgrey; }
li.menu-item.active { color: red; }

Selectors can match against any [attribute] or [attribute value], not just id or class. •

<p data-attr="true">One</p>
<p data-attr="false">Two</p>
<p data-attr="john-doe">Three</p>
<p data-attr="johnny-appleseed">Four</p>
<p data-attr="john-carter">Five</p>
<p data-attr="hello goodbye farewell">Six</p>

p[data-attr] { color: yellow; }
p[data-attr="false"] { color: red; }
p[data-attr*="john"] { color: lightgrey; }
p[data-attr^="johnny"] { color: blue; }
p[data-attr$="carter"] { color: gold; }
p[data-attr~="hello"] { color: violet; }

Selectors can match any descendant (obviously!) or just direct children, using >. What colour will ABC be? •

<ul id="nav">
    <li>One</li>
    <li>Two
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>Three</li>
</ul>

ul { color: red; }
ul#nav > li { color: green; }

Selectors can match based on previous siblings, using + or ~. What colour will each paragraph be? •

<h1>Heading</h1>
<p>Just a paragraph.</p>
<p>Just a paragraph.</p>

h1 + p { color: red; }

<p>Just a paragraph.</p>
<h1>Heading</h1>
<p>Just a paragraph.</p>
<p>Just a paragraph.</p>

h1 ~ p { color: red; }

Selectors can match just the first (:first-child) or last (:last-child – except in IE 7/8) element in a collection. An typical example... •

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    border: 1px black solid;
}

li { padding: 10px; border-top: 1px black solid; }
li:first-child { border-top-width: 0; }

CSS can also create pseudoelements (but not in IE7!) in front of or behind an element, using :before and :after. An example... •

<p>World</p>

p:before {
    content: "Hello";
    color: red;
}

3. Selector Performance

The #1 thing to keep in mind is that CSS selectors are essentially queries that get evaluated from right to left!

Some suggestions:

– Avoid the universal selector (*)

– Don't overqualify #id or .class selectors •

– Avoid the descendant selector •

– Element selectors shouldn't contain a child selector •

– Use the most specific selector possible (tags are bad!)

– Use child selectors "sparingly"

Why might you not follow these suggestions?

– Divitis

– Namespacing

– Hollow victory

4. Media Queries

You can use media queries to apply CSS based on screen width/height, pixel density, etc. •

body { background-color: red; }

@media screen and (max-width: 500px) {
    body { background-color: green; }
}

@media screen and (max-width: 250px) {
    body { background-color: blue; }
}

For more info: CSS Media Queries

5. Floats

Do you clear your floats? Do you even know what "clearing floats" means? •

Method #1: you can apply a height or a float to the container itself. •

– Highly dependent on design/content/layout

– DO NOT just float all the way up the DOM!

Method #2: you can use the ol' trailing <div> with clear applied to it (do I even need to discuss why this is a bad idea?!?)... •

The winner is Method #3: use the :after pseudoelement on the container element, and apply clear to that. •

6. CSS3 Tricks

Rounded corners using border-radius •

Text shadows using, uh, text-shadow • •

Box shadows and rgba() colours • •

Images as borders •

Background image sizes • •

Multiple background images •

Background gradients • • •

Transforms (2D and 3D) •

Transitions •

Animations •

7. VENDOR Prefixes

Some properties need vendor prefixes, some don't. Make sure you use them where needed!

– Opera: -o

– Webkit: -webkit

– Firefox: -moz

– IE: -ms

8. Sprites

Pros:

– reduced HTTP requests

– much improved image caching

Cons:

– difficult to maintain

– multiple developers

– one sprite to rule them all is very hard

9. Web Fonts

No more Arial or Verdana!

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	 url('webfont.woff') format('woff'), /* Modern Browsers */
	 url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	 url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
     font-family: 'MyWebFont', sans-serif;
}

Problems:

– Bandwidth and HTTP requests

– Bold and italic

– Font formats

– Rights

– Flash of unstyled text

Perfect for icons! Flat design! Jony Ive!

– Icon Fonts Are Awesome

– Symbolset

– Fontello

10. MORE Links

– CodePen

– Can I Use...

– CSS-Tricks

– Codrops Playground