5. <a></a> - Anchor
• Link to an external Web site:
‣ <a href="http://www.dvc.edu">DVC</a>
• Link to a Web page on your own site:
‣ <a href="bread.html">My Page About Bread</a>
‣ <a href="about/history.html">History of Bread</a>
• Hooks (invisible):
‣ <a name="croissants"></a>
• Link to the hook:
‣ <a href="index.html#croissants">Croissants</a>
6. <img /> - Image
• <img src="images/file.jpg"
border="0" height="10" width="10" />
• Border, Width and Height are
optional.
9. <table> – Table tags
• <table></table> – Table. Encloses your table.
You can set the width (Pixels or Percentage
%), border, and cellpadding and cellspacing
as attributes.
• <tr></tr> – Row. Encloses a row in your table.
• <td></td> – Cell. Encloses what's in each cell
of the table. These also create your columns.
Make sure you have the same number of cells
in each row.
12. Fonts
• For fonts, colors, and sizes, use CSS.
• Placed between the <head></head> tags
• <style type="text/css></style> - Style
tags. Enclose your CSS code in these.
• Page Elements
‣CSS uses page elements to specify
fonts. You can set a font on any page
element, body, h1, p, a,...
13. What about the <font> tag?
• <font> tag is dead!
• No longer the standard in todayʼs
World Wide Web
• <font> tags embed presentation in
the structure
• With CSS, our goal will be to
separate presentation from structure
17. 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
21. Tags
• h1 {
font-family: Georgia, Times New
Roman, Times, serif;
font-size: 16px;
color: #003366;
}
• <h1>My Website About Eating
Food</h1>
22. IDs – placed as 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 New Roman, Times,
serif;
font-size: 16px;
color: #003366;
}
• <div id="footer">(cc) 2009. Some rights
reserved.</div>
23. 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>
24. Pseudo-classes
• Be aware of ordering when using pseudo for rollover
states
• a:link {
color: #FF0000;
}
• a:visited {
color: #00FF00;
}
• a:hover {
color: #0000FF;
}
• <a href="index.html">back to home</a>
28. Selectors on specific
elements
• This will affect only paragraphs that
have an attribute class="highlight"
p.highlight {
background-color: #FFFFFF;
}
29. Descendents
• This will affect linked images only
a img {
border: 0;
}
• This will affect links within paragraphs that have an attribute
class=“hightlight”
p.highlight a {
font-weight: bold;
}
• This will affect links while hovering within a list in the navigation
container
#navigation ul li a:hover {
background-color: #FFFFFF;
}
32. Absolute Font Size: px
• Example:
font-size: 12px;
• Not proportional to the viewing area.
Always the same.
33. Relative Font Size: em or %
• Example:
font-size: 1.2em;
font-size: 120%;
• Proportional to the viewing area.
34. Relative Font Sizing
Relative font sizing can be difficult to use. Hereʼs 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;
}
35. 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.
37. Embedded
• Embedded Style Sheet: are placed within the header,
within a Web page
<html>
<head>
<style type="text/css">
h1 {
font-family: Georgia, Times New Roman, serif;
}
</style>
</head>
<body>
</body>
</html>
38. Linked
• Linked Style Sheet: All CSS rules are saved
in a .css file
<html>
<head>
<link rel="stylesheet" href="css/global.css"
type="text/css" />
</head>
<body>
</body>
</html>
39. Inline
• Inline Styles: declarations can be placed
within a single tag as a style attribute
<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>
