AN INTRODUCTION
TO CSS 2.1 & CSS 3
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

A Few Questions
It’s hand-raising time
• How many of you are designers?
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

A Few Questions
It’s hand-raising time
• How many of you are designers?
• How many of you are front-end developers?
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

A Few Questions
It’s hand-raising time
• How many of you are designers?
• How many of you are front-end developers?
• How many of you are back-end developers?
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

A Few Questions
It’s hand-raising time
• How many of you are designers?
• How many of you are front-end developers?
• How many of you are back-end developers?
• How many of you are all of the above?
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

A Few Questions
It’s hand-raising time
• How many of you are designers?
• How many of you are front-end developers?
• How many of you are back-end developers?
• How many of you are all of the above?
• How many of you are none of the above?
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

A Few Questions
It’s hand-raising time
• How many of you are designers?
• How many of you are front-end developers?
• How many of you are back-end developers?
• How many of you are all of the above?
• How many of you are none of the above?
• How many of you hate raising your hand?
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Disclaimer(s)
Setting expectations & protecting my butt
• This is an introduction to CSS 2.1 and CSS 3
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Disclaimer(s)
Setting expectations & protecting my butt
• This is an introduction to CSS 2.1 and CSS 3
• CSS 2.1 and CSS 3 are not fully supported
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Disclaimer(s)
Setting expectations & protecting my butt
• This is an introduction to CSS 2.1 and CSS 3
• CSS 2.1 and CSS 3 are not fully supported
• Nearly everything you’ll see will not work in
Internet Explorer 6
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Disclaimer(s)
Setting expectations & protecting my butt
• This is an introduction to CSS 2.1 and CSS 3
• CSS 2.1 and CSS 3 are not fully supported
• Nearly everything you’ll see will not work in
Internet Explorer 6
• We don’t like Internet Explorer 6
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Disclaimer(s)
Setting expectations & protecting my butt
• This is an introduction to CSS 2.1 and CSS 3
• CSS 2.1 and CSS 3 are not fully supported
• Nearly everything you’ll see will not work in
Internet Explorer 6
• We don’t like Internet Explorer 6
• Or 7
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Disclaimer(s)
Setting expectations & protecting my butt
• This is an introduction to CSS 2.1 and CSS 3
• CSS 2.1 and CSS 3 are not fully supported
• Nearly everything you’ll see will not work in
Internet Explorer 6
• We don’t like Internet Explorer 6
• Or 7
• 8 is OK
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

The History of CSS
The new stuff is old & it’s out of order
• CSS 1 became a W3C recommendation in
December of 1996 http://www.w3.org/TR/CSS1/
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

The History of CSS
The new stuff is old & it’s out of order
• CSS 1 became a W3C recommendation in
December of 1996 http://www.w3.org/TR/CSS1/
• CSS 2 became a W3C recommendation in
May of 1998 http://www.w3.org/TR/2008/REC-CSS2-20080411/
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

The History of CSS
The new stuff is old & it’s out of order
• CSS 1 became a W3C recommendation in
December of 1996 http://www.w3.org/TR/CSS1/
• CSS 2 became a W3C recommendation in
May of 1998 http://www.w3.org/TR/2008/REC-CSS2-20080411/
• CSS 3 became a W3C working draft in April
of 2000 http://www.w3.org/TR/2000/WD-css3-selectors-20000410
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

The History of CSS
The new stuff is old & it’s out of order
• CSS 1 became a W3C recommendation in
December of 1996 http://www.w3.org/TR/CSS1/
• CSS 2 became a W3C recommendation in
May of 1998 http://www.w3.org/TR/2008/REC-CSS2-20080411/
• CSS 3 became a W3C working draft in April
of 2000 http://www.w3.org/TR/2000/WD-css3-selectors-20000410
• CSS 2.1 became a W3C working draft in
August of 2002 http://www.w3.org/TR/2002/WD-
CSS21-20020802/
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Lets See Some Examples
We’ll see examples of CSS that will...
1. Improve element and content targeting
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Lets See Some Examples
We’ll see examples of CSS that will...
1. Improve element and content targeting
2. Replace outdated techniques for achieving
certain design trends (lets stop making
rounded corners and drop-shadows with
images, eh?)
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Lets See Some Examples
We’ll see examples of CSS that will...
1. Improve element and content targeting
2. Replace outdated techniques for achieving
certain design trends (lets stop making
rounded corners and drop-shadows with
images, eh?)
3. Replace some actions and behaviors
currently found in JavaScript
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Lets See Some Examples
We’ll see examples of CSS that will...
1. Improve element and content targeting
2. Replace outdated techniques for achieving
certain design trends (lets stop making
rounded corners and drop-shadows with
images, eh?)
3. Replace some actions and behaviors
currently found in JavaScript
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Child Selector >
Select any element that’s a child of another element
#childSelector > p { This content is targeted.
color: red;
• This content is NOT targeted
}
• This content is NOT targeted
This content is NOT targeted.
<div id="childSelector"> This content is targeted.
<p>This content is targeted.</p>
This content is targeted.
<ul>
<li>This content is NOT targeted.</li>
<li>This content is NOT targeted.</li>
</ul>
<blockquote>
<p>This content is NOT targeted.</p> 7 8
</blockquote>
<p>This content is targeted.</p>
<p>This content is targeted.</p>
2 3 3.5
</div>
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Adjacent Sibling Selector +
Select an element that’s a direct sibling of another element
blockquote + p { This content is NOT targeted.
color: red;
This content is inside of a blockquote.
}
This content is targeted.
This content is NOT targeted.
<p>This content is NOT targeted.</p>
<blockquote>
<p>This content is inside of a blockquote.</p>
</blockquote>
<p>This content is targeted.</p>
<p>This content is NOT targeted.</p>
7 8
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

General Sibling Selector ~
Select an element that’s a sibling of another element
blockquote ~ p { This content is NOT targeted.
color: red;
This content is inside of a blockquote.
}
This content is targeted.
This content is targeted.
<p>This content is NOT targeted.</p>
This content is NOT targeted.
<blockquote>
<p>This content is inside of a blockquote.</p> This content is targeted.
</blockquote>
<p>This content is targeted.</p>
<p>This content is targeted.</p>
<div>
<p>This content is NOT targeted.</p> 7 8
</div>
<p>This content is targeted.</p>
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Attribute Selector [name=value]
Select an element that has a particular attribute & value
input[type=text] {
border-color: red;
}
<input type="password" name="one" />
<input type="text" name="two" />
7 8
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

First Child Pseudo-class :first-child
Select only the first child element among many of its siblings
ul li:first-child { • This content is targeted
color: red; • This content is NOT targeted
} • This content is NOT targeted
• This content is NOT targeted
• This content is NOT targeted
<ul>
<li>This content is targeted</li>
<li>This content is NOT targeted</li>
<li>This content is NOT targeted</li>
<li>This content is NOT targeted</li>
<li>This content is NOT targeted</li>
</ul>
7 8
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Last Child Pseudo-class :last-child
Select only the last child element among many of its siblings
ul li:last-child { • This content is NOT targeted
color: red; • This content is NOT targeted
} • This content is NOT targeted
• This content is NOT targeted
• This content is targeted
<ul>
<li>This content is NOT targeted</li>
<li>This content is NOT targeted</li>
<li>This content is NOT targeted</li>
<li>This content is NOT targeted</li>
<li>This content is targeted</li>
</ul>
7 8
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

First Letter Pseudo-element :first-letter
Select the first letter in any element
p:first-letter {
color: red; The first letter in this paragraph is targeted.
font-size: 2em;
}
<p>The first letter in this paragraph is
targeted.</p>
7 8
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

First Line Pseudo-element :first-line
Dynamically select the first line of text in any element
p:first-line { The first line of this paragraph is targeted. Resize your
color: red; browser window and watch how, regardless of where
} words move, only those words found in the first line
remain targeted. This is just some filler content to make
the paragraph larger. This is just some filler content to
make the paragraph larger. This is just some filler
content to make the paragraph larger.
<p>The first line of this paragraph is
targeted. Resize your browser window and watch
how, regardless of where words move, only
those words found in the first line remain
targeted. This is just some filler content to
make the paragraph larger. This is just some
filler content to make the paragraph larger.
This is just some filler content to make the 7 8
paragraph larger.</p>
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Enabled, Disabled, & Checked Pseudo-classes
:enabled, :disabled, :checked
Change the appearance of form inputs based on their status
:enabled { This input is enabled
border-color: green;
}
This input is disabled
:disabled {
border-color: red;
This checkbox is initially checked
}
:checked {
margin-left: 50px;
}
7 8
<input type="text" value="This input is
enabled" /> 2 3 3.5
<input type="text" disabled="disabled"
value="This input is disabled" />
<label> 3 3.1 4
<input type="checkbox" checked="checked" />
This checkbox is initially checked
</label>
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

nth of Type Pseudo-class :nth-of-type()
Select multiple instances of sibling elements based on a formula
tbody tr:nth-of-type(2n+1) td { Monday Tuesday Wednesday
background-color: gray;
14 234 54
}
15 236 51
<table>
<thead> 18 230 53
<tr>
<th scope="col">Monday</th> 14 233 50
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th> 14 236 55
</tr>
</thead>
<tbody>
<tr> 7 8
<td>14</td>
<td>234</td>
<td>54</td>
2 3 3.5
</tr>
<tr> 3 3.1 4
<td>15</td>
<td>236</td>
<td>51</td> 9
</tr>
…and so on…
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Lets See Some Examples
We’ll see examples of CSS that will...
✓ Improve element and content targeting
2. Replace outdated techniques for achieving
certain design trends (lets stop making
rounded corners and drop-shadows with
images, eh?)
3. Replace some actions and behaviors
currently found in JavaScript
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Border Radius Property border-radius
Create rounded-corners on any block-level element
p {
border: 5px solid red; This is just some filler content to make the
padding: 1em; paragraph larger. This is just some filler content to
make the paragraph larger. This is just some filler
-moz-border-radius: 10px; content to make the paragraph larger. This is just
-webkit-border-radius: 10px; some filler content to make the paragraph larger.
} This is just some filler content to make the
paragraph larger. This is just some filler content to
make the paragraph larger.
<p>This is just some filler content to make the
paragraph larger. This is just some filler
content to make the paragraph larger. This is
just some filler content to make the paragraph
larger. This is just some filler content to 7 8
make the paragraph larger. This is just some
filler content to make the paragraph larger.
This is just some filler content to make the
2 3 3.5
paragraph larger.</p>
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Box Shadow Property box-shadow
Create a drop-shadow behind any block-level element
p {
This is just some filler content to make the
background-color: black;
paragraph larger. This is just some filler content to
padding: 1em; make the paragraph larger. This is just some filler
-moz-box-shadow: 3px 5px 15px white; content to make the paragraph larger. This is just
-webkit-box-shadow: 3px 5px 15px white; some filler content to make the paragraph larger.
} This is just some filler content to make the
paragraph larger. This is just some filler content to
make the paragraph larger.
<p>This is just some filler content to make
the paragraph larger. This is just some filler
content to make the paragraph larger. This is
just some filler content to make the paragraph
larger. This is just some filler content to 7 8
make the paragraph larger. This is just some
filler content to make the paragraph larger.
This is just some filler content to make the
2 3 3.5
paragraph larger.</p>
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Text Shadow Property text-shadow
Create a drop-shadow behind text
p {
background-color: white; This content has a
color: white;
font-size: 2.5em; text-shadow.
font-weight: bold;
text-shadow: 2px 2px 6px black;
}
<p>This content has a text-shadow.</p>
7 8
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Multiple Background Images
Use more than one background image in an element
#multipleBackgroundImages {
background-image: url(/images/gmail.png), This is just some filler content to make the
paragraph larger. This is just some filler content to
url(/images/automator.gif);
make the paragraph larger. This is just some filler
background-position: top left, content to make the paragraph larger.
bottom right;
background-repeat: no-repeat; This is just some filler content to make the
border: 1px solid white; paragraph larger. This is just some filler content to
make the paragraph larger. This is just some filler
padding: 0 1em;
content to make the paragraph larger.
}
<div id="multipleBackgroundImages">
<p>This is just some filler content to
make the paragraph larger. This is just 7 8
some filler content to make the paragraph
larger. This is just some filler content
to make the paragraph larger.</p>
2 3 3.5
<p>This is just some filler content to
make the paragraph larger. This is just 3 3.1 4
some filler content to make the paragraph
larger. This is just some filler content
to make the paragraph larger.</p>
9
</div>
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Opacity Property opacity
Adjust an element’s opacity on a scale of 0-1
p {
background-color: yellow;
opacity: .5; This is just some filler content to make the paragraph
padding: 1em; larger. This is just some filler content to make the
} paragraph larger. This is just some filler content to
make the paragraph larger. This is just some filler
content to make the paragraph larger. This is just
some filler content to make the paragraph larger. This
is just some filler content to make the paragraph
<p>This is just some filler content to make larger. This is just some filler content to make the
the paragraph larger. This is just some filler paragraph larger. This is just some filler content to
content to make the paragraph larger. This is make the paragraph larger. This is just some filler
just some filler content to make the paragraph content to make the paragraph larger.
larger. This is just some filler content to
make the paragraph larger. This is just some
filler content to make the paragraph larger.
This is just some filler content to make the
paragraph larger. This is just some filler 7 8
content to make the paragraph larger. This is
just some filler content to make the paragraph
larger. This is just some filler content to 2 3 3.5
make the paragraph larger.</p>
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

RGBa Value rgba(x, x, x, x)
Adjust a color’s opacity on a scale of 0-1
p {
background-color: rgba(255, 255, 0, .5);
padding: 1em; This is just some filler content to make the paragraph
} larger. This is just some filler content to make the
paragraph larger. This is just some filler content to
make the paragraph larger. This is just some filler
content to make the paragraph larger. This is just
some filler content to make the paragraph larger. This
is just some filler content to make the paragraph
<p>This is just some filler content to make larger. This is just some filler content to make the
the paragraph larger. This is just some filler paragraph larger. This is just some filler content to
content to make the paragraph larger. This is make the paragraph larger. This is just some filler
just some filler content to make the paragraph content to make the paragraph larger.
larger. This is just some filler content to
make the paragraph larger. This is just some
filler content to make the paragraph larger.
This is just some filler content to make the
paragraph larger. This is just some filler 7 8
content to make the paragraph larger. This is
just some filler content to make the paragraph
larger. This is just some filler content to 2 3 3.5
make the paragraph larger.</p>
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Lets See Some Examples
We’ll see examples of CSS that will...
✓ Improve element and content targeting
✓ Replace outdated techniques for achieving
certain design trends (lets stop making
rounded corners and drop-shadows with
images, eh?)
3. Replace some actions and behaviors
currently found in JavaScript
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Min/Max Height/Width Properties
min-height, max-height, min-width, & max-width
Allow an element to grow or shrink until it reaches a certain size
#minHeight { #minWidth { <p id="minHeight">This is just some filler
min-height: 100px; min-width: 900px; content to make the paragraph larger.</p>
} } <p id="maxHeight">This is just some filler
#maxHeight { #maxWidth { content to make the paragraph larger. This is
max-height: 12px; max-width: 700px; just some filler content to make the paragraph
overflow: hidden; } larger. This is just some filler content to
} make the paragraph larger.</p>
<p id="minWidth">This is just some filler
content to make the paragraph larger. This is
just some filler content to make the paragraph
7 8 larger. This is just some filler content to
make the paragraph larger.</p>
<p id="maxWidth">This is just some filler
2 3 3.5 content to make the paragraph larger. This is
just some filler content to make the paragraph
larger. This is just some filler content to
3 3.1 4 make the paragraph larger.</p>
9
Browser demo time!
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Column Properties
column-width & column-gap
Automatically create columns
#columnProperty { These three make the paragraph larger.
-moz-column-gap: 2em; paragraphs are paragraph larger.
inside of a single This is just some This is just some
-moz-column-width: 10em;
div that has filler content to filler content to
-webkit-column-gap: 2em; column make the make the
-webkit-column-width: 10em; properties paragraph larger. paragraph larger.
} applied to it. This is just some This is just some
Look closely, filler content to filler content to
<div id="columnProperty"> there is no make the make the
<p>These three paragraphs are inside of a floating or paragraph larger. paragraph larger.
single div that has column properties applied positioning going This is just some This is just some
to it. Look closely, there is no floating or on here. filler content to filler content to
positioning going on here.</p> make the make the
<p>This is just some filler content to make This is just some paragraph larger.
the paragraph larger. This is just some filler content to
filler content to make the paragraph larger.
This is just some filler content to make the
paragraph larger. This is just some filler
content to make the paragraph larger.</p>
2 3 3.5
<p>This is just some filler content to make
the paragraph larger. This is just some 3 3.1 4
filler content to make the paragraph larger.
This is just some filler content to make the 7 8 9
paragraph larger.</p>
</div>
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Resize Property resize
Allow an element to be resized by the visitor
p {
overflow: auto; Browser demo time!
resize: both;
width: 325px;
}
<p>This paragraph can be resized both
horizontally and vertically. It looks like a
text input field, but it&rsquo;s not.</p>
7 8
2 3 3.5
3 3.1 4
9
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Text Overflow Property text-overflow
Characters that approach the edge of an element become an ellipsis
p {
border: 1px solid white; This is just some filler content to make the paragra...
overflow: hidden;
padding: 1em;
text-overflow: ellipsis;
white-space: nowrap;
} Browser demo time!
<p>This is just some filler content to make
the paragraph larger. This is just some filler
7 8
content to make the paragraph larger. This is
just some filler content to make the paragraph 2 3 3.5
larger. This is just some filler content to
make the paragraph larger. This is just some
filler content to make the paragraph larger. 3 3.1 4
This is just some filler content to make the
paragraph larger.</p> 9 (requires -o-text-overflow)
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Transition Property -webkit-transition
Basic animation, with CSS
p { <p class="scale">Example 1</p>
border: 1px solid black; <p class="slideLeft">Example 2</p>
float: left; <p class="slideRight">Example 3</p>
margin-right: 2em; <p class="rotate">Example 4</p>
padding: 1em;
text-align: center;
width: 100px;
}
-webkit-transition: all 1s ease-in-out;
Browser demo time!
.scale:hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
}
.slideLeft:hover { 7 8
-moz-transform: translate(-3em,1em);
-webkit-transform: translate(-3em,1em);
}
2 3 3.5 (sort of…)
.slideRight:hover {
-moz-transform: translate(3em,0); 3 3.1 4
-webkit-transform: translate(3em,0);
}
.rotate:hover {
9
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Lets See Some Examples
We’ll see examples of CSS that will...
✓ Improve element and content targeting
✓ Replace outdated techniques for achieving
certain design trends (lets stop making
</fin>
rounded corners and drop-shadows with
images, eh?)
✓ Replace some actions and behaviors
currently found in JavaScript
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Conclusion
Allow myself to conclude myself
• Browser support varies, drastically in some
cases. Choose wisely based on your
audience and the browsers they use.
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Conclusion
Allow myself to conclude myself
• Browser support varies, drastically in some
cases. Choose wisely based on your
audience and the browsers they use.
• That said, a handful of these selectors and
properties can be used as “added
awesome,” visible only to those who use
better browsers without ruining the
experience for those using older browsers.
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Conclusion
Allow myself to conclude myself
• Browser support varies, drastically in some
cases. Choose wisely based on your
audience and the browsers they use.
• That said, a handful of these selectors and
properties can be used as “added
awesome,” visible only to those who use
better browsers without ruining the
experience for those using older browsers.
• DEVELOPER DAY is incredible.
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

Questions?
(re)sources: links:
• CSS Current Work • The demonstration page
http://www.w3.org/Style/CSS/current- http://marcamos.com/presentation/
work intro-css2.1-css3/
• Quirksmode (Peter-Paul Koch) • My personal website
http://www.quirksmode.org/css/ http://www.marcamos.com
contents.html
• Boston Web Studio
• CSS3.info
http://www.bostonwebstudio.com
http://www.css3.info
• The Build Guild
• My Brain
http://www.buildguild.org
localhost
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

</awesomePresentation>
AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD