2. Please turn in homework
• Last weekʼs homework was to create
a Web page
• Put files in a folder with your lastname
and first initial
• Example:
smith-h
chapter7.html
7. Parts of a Style Sheet
• Style Sheets are made up of CSS Rules
selector [, selector2, ...]:pseudo-class {
property: value;
}
/* comment */
• Each rule is made up of a Selector and a
Declaration Block
• Each declaration in the declaration block is
made up of a Property and a Value
12. ID – attributes within tags
• Must be unique
• When used in the <div> tag, separates sections of
the page: header, nav, content, footer
• #footer {
font-family: Georgia, Times, serif;
font-size: 16px;
color: #003366;
}
• <div id="footer">(c) 2009, BigShot Productions. All
rights reserved.</div>
13. Class – attributes within tags
• Can be used several times on a Web
page... Be careful of overuse
• .highlight {
background-color: #FFCC00;
}
• <p class="highlight">Today I had
coffee and did laundry.</p>
14. Pseudo-classes
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #0000FF;
}
<a href="index.html">back to home</a>
• Be aware of ordering when using pseudo for rollover
states
18. Specific tags with id or class
attributes
• This will affect only paragraphs that
have an attribute class="highlight"
p.highlight {
background-color: #fff;
}
a.selected {
font-weight: bold;
}
19. Descendents
a img {
border: 0;
}
• This will affect linked images only
20. Descendents
p.highlight a {
font-weight: bold;
}
• This will affect links within paragraphs
that have an attribute
class=“hightlight”
21. Descendents
#navigation ul li a:hover {
background-color: #fff;
}
• This will affect links while hovering
within a list in the navigation
container
24. Absolute Font Size: px
• Example:
font-size: 12px;
• Not proportional to the viewing area.
Always the same.
25. Relative Font Size: em or %
• Example:
font-size: 1.2em;
font-size: 120%;
• Proportional to the viewing area.
26. Relative Font Sizing
• Relative font sizing can be difficult to use. One strategy:
• Browser default sizing for fonts is roughly 16pt.
• 62.5% resets the default size to roughly 10pt, which
makes it easier to do the math
1em translates 10pt
1.2em translates to 12pt
body {
font-size: 62.5%;
}
p{
font-size: 1.2em;
}
27. Relative Font Sizing
• Nested elements affect each other
• If an element has a font size of 80%
and is nested within an element that
also has a font size of 80%, then the
result is a font size of 64%
• That's 80% of 80%
• This could be a lot smaller than you
might have wanted.
29. Embedded
<html>
<head>
<style type="text/css">
h1 {
font-family: Georgia, Times, serif;
}
</style>
</head>
<body>
</body>
</html>
• Embedded Style Sheet: are placed within the header,
within a Web page
30. Linked
<html>
<head>
<link rel="stylesheet" href="css/
global.css" type="text/css" />
</head>
<body>
</body>
</html>
• Linked Style Sheet: All CSS rules are saved
in a .css file
31. Inline
<html>
<head>
</head>
<body>
<p>What color is a cucumber?</p>
<p style="color:#00FF00;font-
weight:bold;">A cucumber is green.</p>
</body>
</html>
• Inline Styles: declarations can be placed within a
single tag as a style attribute
