3. Parts of a CSS rule
h2 {
color: #000000;
}
SELECTOR
4. Parts of a CSS rule
h2 {
color: #000000;
}
CURLY BRACKETS
5. Parts of a CSS rule
h2 {
color: #000000;
}
PROPERTY
6. Parts of a CSS rule
h2 {
color: #000000;
}
VALUE
7. Parts of a CSS rule
h2 {
color: #000000;
}
START WITH SELECTOR
8. Three Kinds of Selectors
TYPE SELECTORS CLASS SELECTORS ID SELECTORS
div .headlines #container
p .paragraphs #first-‐article
h2 .bylines #footer
strong .summary #sidebar
9. 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>
10. 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>
11. Class Selectors
<body>
.headline { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
text-decoration: underline;
<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>
.byline { <div id=“sidebar”>
<h2>Side Bar Story</h2>
<p class=“byline”>By John Doe.</p>
font-size: 8px; <p>This is a related story.</p>
</div>
}
</div>
</body>
12. Class Selectors
<body>
.headline { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
text-decoration: underline;
<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>
.byline { <div id=“sidebar”>
<h2>Side Bar Story</h2>
<p class=“byline”>By John Doe.</p>
font-size: 8px; <p>This is a related story.</p>
</div>
}
</div>
</body>
13. ID Selectors
<body>
#container { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
#sidebar { <div id=“sidebar”>
<h2>Side Bar Story</h2>
<p class=“byline”>By John Doe.</p>
font-size: 8px; <p>This is a related story.</p>
</div>
}
</div>
</body>
14. ID Selectors
<body>
#container { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
#sidebar { <div id=“sidebar”>
<h2>Side Bar Story</h2>
<p class=“byline”>By John Doe.</p>
font-size: 8px; <p>This is a related story.</p>
</div>
}
</div>
</body>
16. More Selector Options
<body>
.headline{ <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
<div id=“sidebar”>
<h3 class=“headline”>Side Bar Story</h3>
<p class=“byline”>By John Doe.</p>
<p>This is a related story.</p>
</div>
</div>
</body>
17. More Selector Options
<body>
h2.headline { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
<div id=“sidebar”>
<h3 class=“headline”>Side Bar Story</h3>
<p class=“byline”>By John Doe.</p>
<p>This is a related story.</p>
</div>
</div>
</body>
18. More Selector Options
<body>
#sidebar p { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
A space means <div id=“sidebar”>
descendant. <h3 class=“headline”>Side Bar Story</h3>
<p class=“byline”>By John Doe.</p>
<p>This is a related story.</p>
</div>
</div>
</body>
19. More Selector Options
<body>
#container #sidebar h3 { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
<div id=“sidebar”>
<h3 class=“headline”>Side Bar Story</h3>
<p class=“byline”>By John Doe.</p>
<p>This is a related story.</p>
</div>
</div>
</body>
20. More Selector Options
<body>
#container #sidebar h3 { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
<div id=“sidebar”>
<h3 class=“headline”>Side Bar Story</h3>
<p class=“byline”>By John Doe.</p>
<p>This is a related story.</p>
</div>
</div>
</body>
21. More Selector Options
<body>
#container #sidebar h3 { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
<div id=“sidebar”>
<h3 class=“headline”>Side Bar Story</h3>
<p class=“byline”>By John Doe.</p>
<p>This is a related story.</p>
</div>
</div>
</body>
22. More Selector Options
<body>
#container #sidebar h3 { <div id=“container”>
<h2 class=“headline”>Hello World</h2>
font-size: 30px;
<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>
<div id=“sidebar”>
<h3 class=“headline”>Side Bar Story</h3>
<p class=“byline”>By John Doe.</p>
<p>This is a related story.</p>
</div>
</div>
</body>
24. 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
25. 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-nonprofit tag-
youth y2012 m02 d07 h13">
26. 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>
27. A few others
<div id=“container”>
#container > h3 { 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>
28. 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>
29. A few others
<div id=“container”>
h3:first-child { 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>
31. What happens if there is a conflict?
External Style Sheet Embedded Style Sheet Inline Styles
<head>
<style>
.headlines {
<div style= “color:black;”>
color:black;
}
</style>
</head>
The more specific rules take precedence.
36. Text Color
color:
#ee3e80;
COLOR NAMES RGB VALUES Hexadecimal
147 predefined 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;
38. 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.
39. Font Size
font-‐size:
12px;
PIXELS PERCENTAGES EM
Pixels are Percentages are EM is another
considered a relative from the way of doing
fixed 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.
41. 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.
44. 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
officia deserunt mollit anim id est laborum.
<em> <h1>