CSS Overview

Selectors, Integration, Inheritance, Cascading

R. Scott Granneman r Jans Carton

© 2009 R. Scott Granneman

Last updated 2016-09-16
You are free to use this work, with certain restrictions.
1.12 For full licensing information, please see the last slide/page.
 Notes & URLs for this presentation can be found…

» underneath the link to this slide show on

granneman.com
» at files.granneman.com/presentations/webdev/CSS-
Overview.txt
History
CSS 1: December 1996

CSS 2: May 1998

CSS 2.1: July 2007

CSS 3: June 1999–Now

CSS 4: 2012–Now
CSS 3 (& 4) is not one large single spec

Instead, it’s divided into many separate documents

called modules
Currently 50+ modules!

Different modules have different statuses

www.w3.org/Style/CSS/current-work
Recommendation

Candidate
Recommendation

Last Call

Working Draft
Why CSS?
Separation of Concerns

Divide computer program into separate concerns, each

focusing on a specific resource

Structure & Meaning: HTML

Presentation: CSS

Behavior: JavaScript
Separate content (HTML) from presentation (CSS)
Site-wide consistency: control how all content looks
using only a few CSS files
 Apply different styles to same content in different
media:

» web browser
» cell phone
» projector
» auditory
» print
» & more!
Adherence to standards
It’s fun!
The DOM
To understand CSS, you have to understand the DOM
(Document Object Model)
Before a webpage appears in a viewport, the rendering
engine downloads the HTML & parses it to display the
webpage on screen

During this process, the rendering engine creates the

DOM
“A Web page is a document. This document can be
either displayed in the browser window, or as the
HTML source. But it is the same document in both
cases. The Document Object Model (DOM) provides
another way to represent, store and manipulate that
same document. The DOM is a fully object-oriented
representation of the web page, and it can be
modified with a scripting language such as
JavaScript.” —Mozilla Developer Network
When is the DOM different than your HTML?

If you have mistakes in your HTML & the rendering

engine fixes them for you

If have a <table> but you leave out <tbody>, the

rendering engine inserts <tbody> for you in the DOM

You will still be able to address it with JavaScript &

style it with CSS, even though it’s not in your HTML
A box that is not in the source HTML, but is created in
the DOM, is an anonymous object
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Baz</td>
<td>Qux</td>
</tr>
</table>

HTML source code

 <table>
<table> <tbody>
<tr> <tr>
<td>Foo</td> <td>Foo</td>
<td>Bar</td> <td>Bar</td>
</tr> </tr>
<tr> <tr>
<td>Baz</td> <td>Baz</td>
<td>Qux</td> <td>Qux</td>
</tr> </tr>
</table> </tbody>
</table>
HTML source code
DOM tree
DOM tree
as org chart
DOM tree as nested boxes
 Tools > Web Developer >
⌘+⌥+I
Toggle Tools

Web Developer > Inspect Ctrl + Shift + I

Tools > Web Developer >

Ctrl + Shift + I
Toggle Tools

Opening Firefox Web Developer tools

Now it should be obvious: all DOM objects are boxes

When you’re working with CSS, you are manipulating

boxes generated from the HTML
 Basic
Selectors
 A CSS selector declares which DOM objects should
have particular styles applied to them

The browser’s rendering engine…

» looks through the CSS & HTML
» matches selectors to the appropriate DOM objects
» applies the CSS style to the rendered DOM objects
 HTML CSS
<h1 align="center"> h1 {text-align: center;}
Entire thing is a tag Entire thing is a rule set
h1 is an element h1 is a selector
align is an attribute text-align is a property
center is a value center is a value
align="center" is an text-align: center is a
attribute-value pair declaration
Everything inside { & } is a
declaration block
CSS 1: 10 different selectors (including selectors,
combinators, pseudo-classes, & pseudo-elements)

CSS 2: 13

CSS 3: 21

CSS 4: 26 (so far!)

70 in total
 Basic selectors

» Universal
» Type
» Class
» ID
» Selector grouping
» Descendant combinator
» Child combinator
Universal Selectors
*

Selects every HTML element

(Though later CSS rules can override these

declarations)
Type Selectors
element

Selects every matching HTML element (e.g., <p>, <ul>,

or <h3>)

AKA Element Selectors

Used when you want to affect every instance of an

element
Advantages

Changes every instance of

the selected HTML
element
Advantages Disadvantages

Changes every instance of Changes every instance of

the selected HTML the selected HTML
element element
Class Selectors
.class

Selects any element to which the class has been

applied, as many times per page as you desire
Dot in front of the class name
in CSS, but no dot in HTML

Dot labels the class in CSS

The class attribute labels the

class in HTML
The paragraph with class
applied to it is different from
the paragraph that does not
have that class
Applying class to the <hr>
does nothing, as the declarations
don’t apply to an <hr>
A class can be applied as many
times per page as you wish
You can use multiple (2, 3, 4, whatever) classes on an
element when needed
In your CSS, how do you match an element that has two
classes on it?

HTML
<p class="center note">

CSS
.center.note {
display: none;
}
There is no default list of class names

You come up with the class names your project uses (or
you use those provided by a framework like Bootstrap)
Don’t use spaces

Rules for class values in HTML 4.01

Don’t use spaces

Rules for class values in HTML5

The big rule for class names: describe function, not
appearance

Not “what does it look like?” but instead “what is it

doing?”
Bad class names Good class names

.author name .author-name

.big-red .caption
.small .alert
.footnote
.center
Multiple words in a class name?

.main-content-nav ← What Google uses internally

.main_content_nav
.maincontentnav
.mainContentNav
.MainContentNav

Just be consistent!
ID Selectors
#id

Selects any element to which the ID has been applied,

only once per page
Octothorp in front of the ID
name in CSS, but no octothorp
in HTML

Octothorp labels the ID in CSS

The id attribute labels the ID in

HTML
The element with the ID
applied to it is different from
the elements that do not
have that ID
A specific ID can be applied
one time per page
There is no default list of ID names

You come up with the ID names your project uses

 Class ID

CSS .foo #bar

HTML class="foo" id="bar"

Use per page ∞ Once

Specificity General Very specific

Multiples with
Yes No
an element
 Allowed:

» A –Z a –z
» 0 –9
» -_:.

Not allowed:

» spaces
» starting with anything other than A–Z or a–z

Rules for ID values in HTML 4.01

Don’t use spaces

Should be an opaque string that doesn’t convey any

semantic information

Fine if your build process auto-generates IDs & values

If not, I’d rather work with <h2 id="the-tomb"> than

<h2 id="3rdu8p">

Rules for ID values in HTML5

Bad ID names Good ID names

#top nav #sidebar (use <aside>)

#tiny-little-fonts #utility-nav (use <nav>)
#site-footer (use
<footer>)
#logo
#legalese
Multiple words in a ID name?

#main-content-nav ← What Google uses internally

#main_content_nav
#maincontentnav
#mainContentNav
#MainContentNav

Just be consistent!
Use classes instead of IDs (in fact, try to avoid IDs as
much as possible when it comes to CSS)

Classes can be reused, while IDs cannot

IDs can make the cascade (more about that soon!) very
complicated

Many (most?) frameworks (like Bootstrap) stick to

classes entirely
Selector Grouping
selectorA, selectorB, selectorC

Group selectors together that have similar declarations

for simpler & cleaner CSS & HTML
Don’t do this:

p {
font-family: Verdana, sans-serif;
font-size: 1em;
}

blockquote {
font-family: Verdana, sans-serif;
font-size: 1em;
}

Do this:

p, blockquote {
font-family: Verdana, sans-serif;
font-size: 1em;
}
Any selectors can be grouped

.emphasis, .title {font-style: italic;}

em, .title {font-style: italic;}

#nav, #footer {text-decoration: none;}

p, #nav, .pullquote {font-family: Verdana,

sans-serif;}
Group similar selectors, but be specific where needed

CSS is cumulative unless overridden

blockquote, p {
font-family: Verdana, sans-serif;
}

p {
line-height: 1.5;
}
h1 { h1, h2 {
font-weight: normal; font-weight: normal;
font-size: 2.5em; font-family: serif;
font-family: serif; }
}
h1 {
h2 { font-size: 2.5em;
}
font-weight: normal;
border-bottom: 1px
h2 {
dotted black; border-bottom: 1px
font-family: serif; dotted black;
font-size: 1.8em; font-size: 1.8em;
} }
Good practice Elements, then IDs, then classes
blockquote,
Alphabetical order within
option,
p,
each grouping of selectors
td,
#sidebar,
.legalese {
font-family: Verdana, sans-serif;
font-size: 1em;
}
Descendant
Combinator
selectorA selectorB

Selects any selectorB who has selectorA as an

ancestor

selectorB can be a child, grandchild, or later

descendant of selectorA

Any other selectorB is unaffected

A combinator combines 2 selectors together into 1

Combinators include:

(space)
+ (plus)
> (greater than)
~ (tilde)
You can often use a descendant combinator instead of a
class (& you must if you cannot change the HTML)
� �
HTML Cleaner HTML
<aside> <aside>
<img <img src="…">
class="headshot" </aside>
src="…">
</aside> Better CSS using the
descendant combinator
CSS aside img {}
.headshot {}
 SIDE NOTE

Used to be called Contextual Selector before W3C

renamed it to Descendant Combinator
Child Combinator
selectorA > selectorB

Selects any selectorB who is a direct child of selectorA,

not a grandchild or any other descendants

All siblings who are direct children of selectorA are

selected

Siblings: 2 or more elements that share a parent

Contrasts with the descendant combinator, which selects

both direct children & any descendants, no matter how deep
Formatting
Don’t do this:

h1 {color: dimgray;}
h1 {font-size: 1.4em;}
h1 {font-weight: bold;}
h1 {font-family: Verdana, sans-serif;}
Instead, combine related declarations

h1 {
color: dimgray;
font-size: 1.4em;
font-weight: bold;
font-family: Verdana, sans-serif;
}
Formatting CSS

selector {
property: value;
property: value;
property: value;
…
}

The order of declarations in the declaration block

doesn’t matter
<span>
&
<div>
HTML elements “work” without attributes & values

(with a tiny few exceptions, like <img> & <a>)

<span> & <div> are HTML elements designed solely to
work with CSS

<span> & <div> by themselves do nothing on a Web

page (except draw boxes on the webpage)

They must use CSS (class="foo" or id="bar") to do

anything productive
<span>
<span> is an element that creates an inline box & does
nothing else without CSS

Use <span> to hold attribute-value pairs relevant to CSS

<span class="foo">…</span>

<span class="bar">…</span>
You want to style Miller’s Crossing so it’s purple & big

<p>
Let’s go see Miller’s Crossing!
</p>

How do you select it?

CSS
.movie-title {
color: purple;
font-size: 110%;
}

HTML
<p>
Let’s go see <span class="movie-title">
Miller’s Crossing</span>!
</p>
<div>
<div> is an element that creates a block box & does
nothing else without CSS

Use <div> to hold attribute-value pairs relevant to CSS

I want the table of contents to stand
out with a background color,
borders, & rounded corners
Well that looks stupid…
Much better—& that is why we have
<div>
This is a useless <div>

<div class="call-out">
<p>
When a traveller in north central Massachusetts takes
the wrong fork at the junction of the Aylesbury pike just
beyond Dean’s Corners he comes upon a lonely and
curious country.
<p>
</div>

Only use <div> around 2 or more elements that create block

*
boxes
* It’s OK to wrap a <div> around 1 element in a few cases
Integrating
CSS
4 ways to connect your HTML with your CSS

1. Inline styles
2. Embedded styles
3. Linking to external styles

4. @import
Inline
Uses the style global attribute
Quick & easy to create, but difficult & time-consuming
to manage

Must repeat over and over

Can’t change the style according to the media, so styles

apply to all media

Doesn’t separate content & presentation

So why use it?

Testing

Use inline styles for unique instances

Very specific: overrides conflicting declaration

JavaScript often uses inline styles to apply styles

dynamically

HTML email
Embedded
Styles inserted inside <style> … </style>

Most often in the <head>, but can be found anywhere in

the <body>
<style>
p {
font-family: Verdana, sans-serif;
font-size: 1em;
}

.emphasis {
font-weight: bold;
}
</style>
Embedded styles are great for one page …

… but they rapidly become difficult to manage on

multiple pages
So why use it?

Resource inlining: embedding reduces outbound

requests (so does inline CSS)

You have a widget that may get embedded into another

webpage

To style the widget, you include embedded styles with it

inside <style> … </style>
Linking
Step 1

Create an external style sheet: a text file ending in .css

Step 2

Link to external style sheet in the <head> of all pages on

site
HTML 4.01

<head>
<link rel="stylesheet" type="text/css"
href="stylesheet.css">
</head>

HTML 5

<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
What should you name your CSS file?

main.css
typography.css
client.css
search.css
navigation.css
Where should you place your CSS file?

In your website’s root directory, always create these

directories:

css (or styles)

fonts
images (or media)
js (or scripts)
Sample style sheet: colostomo.css

/* CSS for Colostomo Inc.

Created 2002-09-27
Last modified 2006-11-04 by RSG */

/* Common */
p, blockquote, td {font-family: Verdana, sans-serif;
font-size: 1em;}
#footer {font-size: .9em;}
.emphasis {font-weight: bold;}

/* Navigation */
.on {font-size: 1.2em; font-weight: bold;}
.off {font-size: 1.2em;}

It’s just a text file!

 Use comments in CSS for the same reasons as in
HTML

» Notes to yourself & others

» Debugging: comment out troublesome CSS for testing
(use your browser’s Inspector)

HTML comments
<!-- blah blah html blah blah html -->

CSS comments
/* blah blah css css blah blah css css */
Correctly formatted & ordered

/* Common */
p, blockquote, td {
font-family: Verdana, sans-serif;
font-size: 1em;
}

#footer {
font-size: .9em;
}

.emphasis {
font-weight: bold;
}
You can link to more than one style sheet, but you
should try to keep those links to a minimum
If you have more than one webpage, you really ought to
use an external style sheet

You can now change the look & behavior of an entire

site by changing only one document!
@import
@import allows you to include external stylesheets in
your CSS
@import can be used with embedded or linked CSS

@import must always come 1st, ahead of any other CSS

Don’t use it unless you absolutely need to use it, as it

can slow down your page loads
@import with embedded CSS

<style>
@import url("http://hpl.com/cthulhu.css");

p {font-family: Verdana, sans-serif;}

</style>
@import with a linked CSS document

/* colostomo.css */
@import url("http://hpl.com/cthulhu.css");
@import url("http://hpl.com/nodens.css");

h1 {font-size: 1.3em;}
p {font-family: Verdana, sans-serif;}
Inheritance
Some properties, like font-size & color, are
inherited: elements with those properties pass those
properties down through the DOM to their descendant
elements (unless overridden)

Inheritance is for elements that do not have properties

set

Other properties, like background-image & border, are

not inherited: elements with those properties do not
pass those properties down to their descendent
elements
border- font-style line-height
collapse font-variant orphans
border-spacing font quotes
caption-side letter-spacing text-align
color list-style- text-indent
cursor type text-transform
direction list-style- visibility
empty-cells position white-space
font-family list-style- widows
font-size image word-spacing
font-weight list-style
Default inherited properties
The inherit value forces an element to inherit styles
from its parent
Cascading
 How does the rendering engine know which CSS to
apply to an element?

» Inheritance (if the element does not have properties

set)
» The Cascade (if the element’s CSS rules conflict with
other rules)

Conflicting rules follow a cascade, & the rule with the

most weight wins
 3 parts to the Cascade

1. Importance

2. Specificity

3. Order
Importance
CSS can come from 3 places:

Browser

User

Author
All Web browsers have built-in CSS rules

In Firefox, for example, why does <p> have a certain

amount of space before & after it?

Because of Firefox’s built-in default CSS

“The CSS rules given in these subsections are, except
where otherwise specified, expected to be used as part
of the user-agent level style sheet defaults for all
documents that contain HTML elements.”
Users can specify CSS rules too

If you have bad eyesight, perhaps you want all fonts to

be at least a certain size
Internet Explorer
/Users/[username]/Library/Application Support/
Firefox/Profiles/[random].[Name]/userContent.css

Firefox
Safari
My safari.css file

html {
font-family: "Source Sans Pro", sans-serif;
}

h1, h2, h3, h4, h5, h6 {

font-family: "Georgia Pro", serif;
}

code, kbd, pre, samp, tt, var {

font-family: "Source Code Pro", monospace;
}
If a user’s CSS contradicts a site’s CSS, the user can
make sure hers “wins”

Use !important after a property-value pair

p {
font-size: 36px !important;
}

However, CSS authors can do the same thing!

My safari.css file Notice: no !important

html {
font-family: "Source Sans Pro", sans-serif;
}

h1, h2, h3, h4, h5, h6 {

font-family: "Georgia Pro", serif;
}

code, kbd, pre, samp, tt, var {

font-family: "Source Code Pro", monospace;
}
The order of importance

AKA

The order in which stylesheets are weighted

 Browser

User

Author

Author !important

User !important
Author & Author !important?

Why are you contradicting yourself?

You’re not contradicting yourself (hopefully!)

What if you’re using Bootstrap & its default CSS?

<link rel="stylesheet" href="bootstrap.css">

Is that CSS coming from the browser, user, or author?

You will want to override some of Bootstrap’s selectors

<link rel="stylesheet" href="bootstrap.css">

<link rel="stylesheet" href="me.css">

Author vs. author

Sometimes, you will have to use !important to beat the

other author
Specificity
How specific is the CSS?

A simple formula is used

The higher the number, the more specific the selector,

& the greater the weight
Universal selectors = 0

A = style attribute × 1000

B = number of ID selectors × 100

C = number of class selectors, attribute selectors, & pseudo-

classes × 10

D = number of type selectors & pseudo-elements × 1

A + B + C + D = specificity
* 0+0+0+0 0
li 0+0+0+1 1
ul li 0+0+0+2 2
ul ol li.steps 0 + 0 + 1 + 3 13
li.steps.mech 0 + 0 + 2 + 1 21
#chapter1 0 + 1 + 0 + 0 100
style="foo" 1 + 0 + 0 + 0 1000
Order
Later CSS in the stylesheet wins over earlier CSS
.blue {color: blue}
.red {color: red}

<p class="red blue">

What color am I?
</p>
.blue {color: blue}
.red {color: red}

<p class="red blue">

What color am I?
</p>
.red {color: red}
.blue {color: blue}

<p class="blue red">

What color am I?
</p>
.red {color: red}
.blue {color: blue}

<p class="blue red">

What color am I?
</p>
The Cascade
Here’s some code I have on a website:

<div class="callOut">
<p>
For the next 2 weeks…
</p>
</div>

.callOut {
background-color: #E6E8F2;
margin: 1em 1em 2em 1em;
padding: 1em;
border: 1px #ccc solid;
border-radius: 1em;
}
The result!
However…
 That extra space at the
bottom really bothers me
 That extra space at the
bottom really bothers me
To fix it, I put this in my CSS at lines 194–196:

.callOut > p:last-child {

margin-bottom: 0;
}

Let me explain what that means…

> is a combinator that selects the p:last-child is a
direct children of (not descendants pseudo-class that
of) the .callOut class means the <p> that
is the last child of
(not descendant of)
.callOut > p:last-child { the .callOut class
margin-bottom: 0;
}

So this selects the <p> that is the last direct child of

the .callOut class
.callOut > p:last-child {
EX
margin-bottom: 0; AM
} PL
<div class="callOut">
E
<p>foo</p>
<p>bar</p>
<p>baz</p>
<p>quz</p> Selected!
<blockquote>
<p>quux</p> Not selected, as this <p> is
</blockquote> not the last direct child
</div>
Why use this?

.callOut > p:last-child {

margin-bottom: 0;
}

Why not just use this?

.callOut > p {
margin-bottom: 0;
}

Because sometimes there are 2 or more paragraphs

inside .callOut
So back to where I was… I put this in my CSS at line
194:

.callOut > p:last-child {

margin-bottom: 0;
}

Let’s check the webpage…

Nothing changed!
Why didn’t it work?

Let’s open the Inspector & find out why

Hmmm… mine is being beaten by earlier code
Lines 146–148:
#content p {
margin-bottom: 12px;
}

Lines 194–196:
.callOut > p:last-child {
margin-bottom: 0;
}

Why isn’t mine winning since it’s later in order?

Line :
#content p {
margin-bottom: 12px;
}

Line :
.callOut > p:last-child {
margin-bottom: 0;
}

Is importance causing the 1st declaration block to win?

Nope
Line :
#content p {
margin-bottom: 12px;
}

Line :
.callOut > p:last-child {
margin-bottom: 0;
}

Is specificity causing the 1st declaration block to win?

Let’s look
#content p { .callOut > p:last-
margin-bottom: 12px; child {
} margin-bottom: 0;
}

Specificity Specificity

(#content = 100) + (.callout = 10) +

(p = 1) = (p = 1) +
101 (:last-child = 10) =
21
Line :
#content p {
margin-bottom: 12px;
}

Line :
.callOut > p:last-child {
margin-bottom: 0;
}

Because specificity meant the 1st declaration block had

the most weight, order never entered into the picture
 Nope—tied

ficity beat me Never got to it

Line :
#content p {
margin-bottom: 12px;
}

Line :
.callOut > p:last-child {
margin-bottom: 0 !important;
}

Adding !important makes the 2nd declaration block win

due to importance, so specificity & order never come into
play
Much better!
Much better!
Bonus question: how do we get rid of those extra pixels at
the top?

Much better!
 I won before
we could get to
anything else

ever got to it
Then I realized that <div class="callOut"> doesn’t
always end with <p>

.callOut > *:last-child {

margin-bottom: 0 !important;
}

Now it’s weighted to win and selecting the correct DOM

objects
What if I have nested last children inside other nested
last children?

.callOut > *:last-child,

.callOut > *:last-child > *:last-child,
.callOut > *:last-child > *:last-child >
*:last-child {
margin-bottom: 0;
}
Tools
Books
Eric Meyer
Detailed overview of CSS 1
 Quick ref guide,
with focus on CSS 2
Details 13 projects,
showing how & why
to use CSS
 Details 10 projects,
showing how & why
to use CSS
Great overview of HTML5
& CSS2 (& some CSS3)
 Gets great reviews
& looks informative
References
pinboard.in/u:rsgranne/t:css
developer.mozilla.org/en-US/docs/Web/CSS/Reference
www.quirksmode.org
meiert.com/en/indices/css-properties/
caniuse.com
apps.workflower.fi/vocabs/css/en
CSS Editors
TopStyle

$80
www.bradsoft.com
Espresso

HTML & CSS editor

$80
macrabbit.com
Brackets

HTML, CSS, & JavaScript editor

$0
brackets.io
Browser Tools
Built-in developer tools are excellent
Validation
jigsaw.w3.org/css-validator/
Color Pickers
Sip

Color picker
$0 (with $9.99 in-app purchase)
theolabrothers.com
ColorPro

$30
www.iconico.com/colorpro/
Thank you!

[email protected]
www.granneman.com
ChainsawOnATireSwing.com
@scottgranneman

[email protected]
websanity.com
 CSS Overview
Selectors, Integration, Inheritance, Cascading

R. Scott Granneman r Jans Carton

© 2009 R. Scott Granneman

Last updated 2016-09-16
You are free to use this work, with certain restrictions.
1.12 For full licensing information, please see the last slide/page.
Changelog

2016-09-16 1.12: Updated theme to Granneman 1.2;

small changes in wording to make things clearer;
cleaned up formatting in a few places; added slide re:
using classes instead of IDs; fixed slides in Selector
Grouping; changed Important example from
WordPress to Bootstrap; fixed wrong information re:
class & id values & clarified; added example for
Descendant Combinator;
Changelog

2016-01-20 1.11: Added slide re: CSS3 Taxonomy &

Status; better explanation why we need <div>; added note
re: specificity
2016-01-11 1.10: Minor improvements taken from CSS
- Selectors; added Child Combinator to Selectors; added
another example of Child Combinator; added screenshots
of browser CSS; explained author vs author in
Importance; explained how my Safari CSS works; added a
long example showing how the Cascade works in practice
Changelog

2015-12-13 1.9: Clarified source of DOM quote; changed

numbers of selectors; got rid of E & F in selectors & made them
clearer; changed .bigRed to .big-red; clarified source of class
& ID names; add tweet re: CSS to beginning
2015-05-10 1.8: Added info about CSS 4; clarified that
<span> & <div> draw boxes; added additional names of
directories that are always created; changed “What Google
prefers” to “… uses”; removed Hues & added Sip to Color
Pickers; fixed URL & screenshots for CSS Vocabulary; moved
Viewport Resizer to Bootstrap; for Separation of Concerns,
added “& Meaning” to HTML
Changelog

2015-03-06 1.7: Added another example of selector

grouping; added details about resource inlining
2015-01-12 1.6: Added my safari.css file; clarified
& added info on specificity
2015-01-11 1.5: Clarified Inheritance
2014-09-27 1.4: Changed “browser” to “rendering
engine” in a few places where it made sense
Changelog

2014-08-12 1.3: Improved Descendant Selector

examples; improved wording & added slides in DOM
section; improved Cascade diagram; fixed <div>
screenshot; added URLs for <div> & <span> screenshots;
fixed Viewport Resizer screenshots
2014-08-10 1.2: Added DOM spec info & screenshots of
DOM & Source Code; added details about Firefox Web
Dev Tools
2014-08-04 1.1.1: Added definition of anonymous
object
Licensing of this work
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.

To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.

You are free to:

» Share — copy and redistribute the material in any medium or format

» Adapt — remix, transform, and build upon the material for any purpose, even commercially

Under the following terms:

Attribution. You must give appropriate credit, provide a link to the license, and indicate if changes were
made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or
your use. Give credit to:

Scott Granneman • www.granneman.com • [email protected]

Share Alike. If you remix, transform, or build upon the material, you must distribute your contributions
under the same license as the original.

No additional restrictions. You may not apply legal terms or technological measures that legally restrict
others from doing anything the license permits.

Questions? Email [email protected]