CSS Tutorial

Parts of a CSS rule

h2 {
color: #000000;
}

Parts of a CSS rule

h2 {
color: #000000;
}
SELECTOR

Parts of a CSS rule

h2 {
color: #000000;
}
CURLY BRACKETS

Parts of a CSS rule

h2 {
color: #000000;
}
PROPERTY

Parts of a CSS rule

h2 {
color: #000000;
}
VALUE

Parts of a CSS rule

h2 {
color: #000000;
}
START WITH SELECTOR

Three Kinds of Selectors
TYPE SELECTORS CLASS SELECTORS ID SELECTORS

div .headlines #container
p .paragraphs #first-‐article
h2 .bylines #footer
strong .summary #sidebar

Type Selectors
<body>
h2 { <div id=“container”>

<h2 class=“headline”>Hello World</h2>
font-style: bold;
<p class=“byline”>By Jeremy Rue.</p>
}
<p>In todayʼs news, a class at UC Berkeley
learned the importance of CSS in designing
and building webpages.</p>

p{ <div id=“sidebar”>
<h2>Side Bar Story</h2>
<p class=“byline”>By John Doe.</p>
font-family: Helvetica; <p>This is a related story.</p>
</div>
}
</div>
</body>

Class Selectors
<body>
.headline { <div id=“container”>

text-decoration: underline;
}

.byline { <div id=“sidebar”>
font-size: 8px; <p>This is a related story.</p>
</div>
}
</div>
</body>

ID Selectors
<body>
#container { <div id=“container”>

font-size: 30px;
}

#sidebar { <div id=“sidebar”>
font-size: 8px; <p>This is a related story.</p>
</div>
}
</div>
</body>

More Selector Options
<body>
.headline{ <div id=“container”>

font-size: 30px;
}

<div id=“sidebar”>
<h3 class=“headline”>Side Bar Story</h3>
<p>This is a related story.</p>
</div>

</div>
</body>

<body>
h2.headline { <div id=“container”>

font-size: 30px;
}

</div>

</div>
</body>

<body>
#sidebar p { <div id=“container”>

font-size: 30px;
}

A space means <div id=“sidebar”>
descendant. <h3 class=“headline”>Side Bar Story</h3>
</div>

</div>
</body>

<body>
#container #sidebar h3 { <div id=“container”>

font-size: 30px;
}

</div>

</div>
</body>

HTML vs CSS
HTML CSS

<div class=“headline lead-story article”> .headline p {

}

These spaces give multiple classes This space means a <p> tag inside
another tag with class .headline

Example from Richmond Site

<div id="post-38661" class="hentry p1 post publish author-lexi-
pandell category-education category-featured category-front
tag-big-brother-big-sister tag-mentoring tag-nonproﬁt tag-
youth y2012 m02 d07 h13">

A few others
<div id=“container”>
h3, p { color:orange; }
<h3>Here is one headline</h3>

<div>
<h3>Another</h3>
<p>Some text here</p>
</div>

<p>Another paragraph.</p>
<h3>Last graph.</h3>

</div>

A few others
#container > h3 { color:orange; }

<div>
<h3>Another</h3>
</div>


</div>

A few others
h3 + p { color:orange; }

<div>
<h3>Another</h3>
</div>


</div>

A few others
h3:ﬁrst-child { color:orange; }

<div>
<h3>Another</h3>
</div>


</div>

What happens if there is a conﬂict?
External Style Sheet Embedded Style Sheet Inline Styles

<head>
<style>

.headlines {
<div style= “color:black;”>
color:black;
}

</style>
</head>

The more speciﬁc rules take precedence.

Which rule wins out?
#container { <div id="container">

font-size: 30px; <div id="headline">
} <p>My headline</p>
#headline {
</div>
font-size: 10px;
</div>
}

Which rule wins out?
#container { <div id="container">

font-size: 30px; <div id="headline">
} <p>My headline</p>
#container {
</div>
font-size: 10px;
</div>
} Because it comes last

Cascade Recap
Stylesheet Order Last Rule Inheritance

1. External Rules that come last Speciﬁcity
2. Embedded (<head>)

3. Inline

Text Color
color:
#ee3e80;

COLOR NAMES RGB VALUES Hexadecimal

147 predeﬁned Values for red, Six or three digit
names green and blue alpha-numeral.

DarkCyan rgb(100,100,90); #FFFFFF;
Purple rgb(255,255,255); #000000;
Black rgb(0,0,0); #000;
Red rgb(30,44,200); #AF0;

Backgrounds
background-‐color:
#ee3e80;

background-‐image:url(‘image.jpg’);
background-‐position:0px
50%;
background-‐repeat:repeat;

Short code
background:
url(‘path_to_image.jpg’)
no-‐repeat
0px
0px;

Font Family
font-‐family:
Helvetica,
Arial,
san-‐serif;

FALL BACK QUOTES END WITH
GENERIC
A comma Use quotes when
separated list of a font is multiple End with a
fonts to use if the words, like generic font, like
system doesnʼt “Times New serif or san-serif.
have the font Roman.” This way the
installed. browser will pick
for you.

Font Size
font-‐size:
12px;

PIXELS PERCENTAGES EM

Pixels are Percentages are EM is another
considered a relative from the way of doing
ﬁxed font size. default size of the relative
Fonts will appear text. 100% measurement.
at this size means the default Varies only
relative to the size. slightly from %.
screen size.

Others
font-‐weight:
normal; line-‐height:
1em;
font-‐weight:
bold; line-‐height:
1.4em;
font-‐style:
normal; letter-‐spacing:
1em;
font-‐style:
italic; word-‐spacing:
1em;
font-‐style:
oblique; text-‐decoration:none;

text-‐transform:
uppercase; text-‐align:
left;
text-‐transform:
lowercase; text-‐align:
right;
text-‐transform:
capitalize; text-‐aling:
center

Links
a:link a:link a:visited
a:visited
Before a user After a user clicks
a:hover clicks on a link. on a link.
a:active

a:hover a:active

When a user When the user
hovers over a clicks down on a
link. link.

Border, Margin and Padding
margin-‐top:10px;
margin-‐right:10px;
margin-‐bottom:10px;
margin-‐left:10px;
hello
Margin Border Padding

margin:5px
10px
6px
5px; Width

borders
border-‐color
border-‐width Single sides

border-‐top-‐color:#ffffff;
border-‐style border-‐left-‐width:
20px;

solid
dotted Combined
dashed border:1px
solid
#000000;
groove
...

Inline vs Block
Inline block

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.

Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
<img> List of the best pies <p>
minim veniam, quis nostrud exercitation ullamco laboris <span> • Apple <div>
nisi ut aliquip ex ea commodo consequat. Duis aute • Cherry
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
<strong> • Pumpkin <li>
sint occaecat cupidatat non proident, sunt in culpa qui
ofﬁcia deserunt mollit anim id est laborum.
<em> <h1>

Inline vs Block
display:inline;
display:block;
display:none;

display:block; display:inline;

• Apple
• Cherry • Apple • Cherry • Pumpkin
• Pumpkin

Visibility
visibility:visible; visibility:hidden;

Hi Mom!

CSS Reset
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,

p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,

dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,

tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,

label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,

article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,

header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,

audio,
video
{

margin:
0;

padding:
0;

border:
0;

font-‐size:
100%;

font:
inherit;

vertical-‐align:
baseline;
}

CSS Tutorial

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to CSS Tutorial

Similar to CSS Tutorial (6)

More from UC Berkeley Graduate School of Journalism

More from UC Berkeley Graduate School of Journalism (6)

Recently uploaded

Recently uploaded (20)

CSS Tutorial