Introduction to CSS 2.1 and CSS 3

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?


A Few Questions

• How many of you are front-end developers?


A Few Questions

• How many of you are back-end developers?


A Few Questions

• How many of you are all of the above?


A Few Questions

• How many of you are none of the above?


A Few Questions

• How many of you are none of the above?
• How many of you hate raising your hand?


Disclaimer(s)
Setting expectations & protecting my butt

• This is an introduction to CSS 2.1 and CSS 3


Disclaimer(s)

• CSS 2.1 and CSS 3 are not fully supported


Disclaimer(s)

• Nearly everything you’ll see will not work in
Internet Explorer 6


Disclaimer(s)

Internet Explorer 6
• We don’t like Internet Explorer 6


Disclaimer(s)

Internet Explorer 6
• Or 7


Disclaimer(s)

Internet Explorer 6
• Or 7
• 8 is OK


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/


The History of CSS

May of 1998 http://www.w3.org/TR/2008/REC-CSS2-20080411/


The History of CSS

• CSS 3 became a W3C working draft in April
of 2000 http://www.w3.org/TR/2000/WD-css3-selectors-20000410


The History of CSS

• 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/


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?)



images, eh?)
3. Replace some actions and behaviors
currently found in JavaScript


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.

<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>
2 3 3.5
</div>
3 3.1 4
9


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.
}

<p>This content is NOT targeted.</p>
<blockquote>
<p>This content is inside of a blockquote.</p>
</blockquote>

7 8
2 3 3.5
3 3.1 4
9


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.
}

<blockquote>
<p>This content is inside of a blockquote.</p> This content is targeted.
</blockquote>
<div>
<p>This content is NOT targeted.</p> 7 8
</div>
2 3 3.5
3 3.1 4
9


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


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

<ul>
<li>This content is targeted</li>
<li>This content is NOT targeted</li>
</ul>
7 8
2 3 3.5
3 3.1 4
9


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 targeted

<ul>
<li>This content is targeted</li>
</ul>
7 8
2 3 3.5
3 3.1 4
9


First Letter Pseudo-element :first-letter
Select the first letter in any element

p:first-letter {
color: red; The ﬁrst 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


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


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


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…



✓ Improve element and content targeting
images, eh?)


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
-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
This is just some filler content to make the
2 3 3.5
3 3.1 4
9


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;
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
make the paragraph larger.

<p>This is just some filler content to make
the paragraph larger. This is just some filler
larger. This is just some filler content to 7 8
2 3 3.5
3 3.1 4
9


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


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
url(/images/automator.gif);
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
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>


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
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
paragraph larger. This is just some filler 7 8
larger. This is just some filler content to 2 3 3.5
make the paragraph larger.</p>
3 3.1 4
9

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
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.
paragraph larger. This is just some filler 7 8
larger. This is just some filler content to 2 3 3.5
3 3.1 4
9


✓ Replace outdated techniques for achieving
images, eh?)


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
7 8 larger. This is just some filler content to
<p id="maxWidth">This is just some filler
2 3 3.5 content to make the paragraph larger. This is
3 3.1 4 make the paragraph larger.</p>

9
Browser demo time!


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
paragraph larger. This is just some filler
content to make the paragraph larger.</p>
2 3 3.5
the paragraph larger. This is just some 3 3.1 4
This is just some filler content to make the 7 8 9
</div>


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’s not.</p>

7 8
2 3 3.5
3 3.1 4
9


Text Overﬂow Property text-overflow
Characters that approach the edge of an element become an ellipsis

p {
border: 1px solid white; This is just some ﬁller content to make the paragra...
overflow: hidden;
padding: 1em;
text-overflow: ellipsis;
white-space: nowrap;
} Browser demo time!

the paragraph larger. This is just some filler
7 8
just some filler content to make the paragraph 2 3 3.5
filler content to make the paragraph larger. 3 3.1 4
paragraph larger.</p> 9 (requires -o-text-overflow)


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);
}



✓ Replace outdated techniques for achieving
</ﬁn>
images, eh?)
✓ Replace some actions and behaviors


Conclusion
Allow myself to conclude myself

• Browser support varies, drastically in some
cases. Choose wisely based on your
audience and the browsers they use.


Conclusion

• 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.


Conclusion

• 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.


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


</awesomePresentation>


Introduction to CSS 2.1 and CSS 3

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Introduction to CSS 2.1 and CSS 3