ARTDM 171, Week 5: CSS

ARTDM 171, Week 5:
CSS
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-171/

Homework
• Please email me a link
• Example:
o http://xyz.xtreemhost.com/week4/

2

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

<img /> - Image

• <img src="images/ﬁle.jpg"
border="0" height="10" width="10" />
• Border, Width and Height are
optional.

<ul>, <ol> — Lists
Unordered Lists (Bulleted)
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Potatoes</li>
</ul>
Ordered Lists (Numbered)
<ol>
<li>Eggs</li>
<li>Milk</li>
<li>Potatoes</li>
</ol>

  — non breaking
space

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

Table Example
•<table width="540" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td>column 1</td>
<td>column 2</td> Let’s try this
<td>column 3</td> example.
</tr>
<tr>
<td>Eggs</td>
<td>Milk</td>
<td>Potatoes</td>
</tr>
</table>

Table Example
<table>

<tr> <td> Column 1 </td> <td> Column 2 </td> <td> Column 3 </td>
</tr>
<tr> <td> Eggs </td> <td> Milk </td> <td> Potatoes </td> </tr>

</table>

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

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

Cascading Style Sheets
(CSS)

Cascading Style Sheets

• Code that you add to your Web
pages
• Separate presentation from structure

CSS Zen Garden
http://www.csszengarden.com

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

Page Properties...
Dreamweaver fonts + CSS

Basic Stylesheet
<style type="text/css">

</style>

Tags

• h1 {
    font-family: Georgia, Times New
Roman, Times, serif;
font-size: 16px;
    color: #003366;
}
• <h1>My Website About Eating
Food</h1>

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>

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>

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>

Firebug for Firefox
https://addons.mozilla.org/en-
US/ﬁrefox/addon/1843

Grouped Selectors
body, td, th {
color: #000000;
}

h1, h2, h3 {
color: #FF0000;
}

Selectors on speciﬁc
elements
• This will affect only paragraphs that
have an attribute class="highlight"

p.highlight {
background-color: #FFFFFF;
}

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

Font Sizes
• Pixels (px)
• Ems (em)
• Percentage (%)
• Points (pt)
• Picas (pica)
• Inches (in)
• Centimeters (cm)
• Milimeters (mm)

Absolute Font Size: px

• Example:
font-size: 12px;
• Not proportional to the viewing area.
Always the same.

Relative Font Size: em or %

• Example:
font-size: 1.2em;
font-size: 120%;
• Proportional to the viewing area.

Relative Font Sizing
Relative font sizing can be difﬁcult 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;
}

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.

Embedded, Linked, and
Inline Stylesheets

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>

Linked
• Linked Style Sheet: All CSS rules are saved
in a .css ﬁle
<html>
<head>
<link rel="stylesheet" href="css/global.css"
type="text/css" />
</head>
<body>
</body>
</html>

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>

Group Projects are due
next week

Homework due Sept 22

• Read chapter “Graphics” in Web
Style Guide
• Complete Group Projects
• Next week: formatting images for the
Web

ARTDM 171, Week 5: CSS

More Related Content

What's hot

Viewers also liked

Similar to ARTDM 171, Week 5: CSS

More from Gilbert Guerrero

Recently uploaded

ARTDM 171, Week 5: CSS