1. CSS & XHTML
Week 12 – March 29, 2012

2. Agenda
 IT News
– Google Summer of Code 2012!
– Fastest Computer
– DIGITECH!
 Course Updates/Due Dates
 XHTML/CSS
 Group Presentations:
– 2pm section – 2 group presentations (Prezi &
BarEye.com)
– 3pm section – Oust.me

3. Course Updates
Date Topic Due
Monday 4/2/12 CSS/XHTML cont'; introduction to -
A9
Tuesday 4/3/12 "best of" GA 2, in class workshop on A8 Part B due
CSS/XHTML
Thursday 4/5/12 Academic Technologies A8 Part C due
(LAST QUIZ)
Monday 4/9/12 TBA A9 due
Tuesday 4/10/12 Make-up Lab – for A5a, A5b, or A8
(part A)
Thursday 4/12/12 No class – prepare for final exam GA#3 due at 10AM
Monday 4/16/12 Future options for graduates & -
emerging technology –
FINAL EXAM REVIEW
Tuesday 4/17/12 Course Review -
Thursday 4/19/12 EXAM #2
Friday 4/20/12 @ 12PM NOON ANY OUTSTANDING ITEMS NEED TO After it is posted, you have 24 hours
BE TURNED IN TO ME. GRADES to resolve any final issues, or forever
WILL BE POSTED TO YOUR GRADE hold your peace. This is specifically
CENTER BY 4/25 @ 12PM NOON for SIGNIFICANT grade
discrepancies ONLY.

4. CSS
 Earlier versions of HTML combined
elements of style (fonts, backgrounds, etc.)
within the page itself
 CSS allowed for rules of formatting and
presentation to be executed differently.
 Definition: A set of style rules that tell the
web browser how to present a web page
or document

5. CSS
 Definition
– Cascading Style Sheet
 Rules of specificity and order

6. CSS - Benefits
The W3C created CSS to replace HTML tables, font
tags, frames, and other presentational hacks of
HTML elements
• Reduction of file size is about 50% less than a Web
page built with traditional Web design methods,
making it faster!
• Easily tweak the design of a thousand-page site with
just a few edits to one CSS file
• Allows for greater control over the typography and
the placement of elements in Web pages

7. CSS - Benefits
 CSS – edited same way as HTML
 By keeping the design in separate files
linked to the HTML pages, you reduce the
likelihood of your page designs falling
apart over time as different contributors
add to the Web page
 You can set a “look” and “feel” for the
site and have the content molded to fit that
“scheme”!

8. Before CSS
CONTENT STYLE
WEBPAGE

9. With CSS
CONTENT STYLE
WEBPAGE

10. With CSS
WEBPAGE
WEBPAGE
WEBPAGE WEBPAGE
STYLE
WEBPAGE WEBPAGE
One CSS file can be used to set the style and format for
many different Web pages, saving time in editing sites that
have a large number of pages.

11. With CSS (reverse is true)
Body Style
Font Style
Header Text Style
Style
WEBPAGE
Paragraph Link Style
Style
Likewise, a single webpage can be formatted by several
different CSS files (either external or embedded). WHY?

12. With CSS
CONTENT STYLE
STYLE
STYLE
mobile browser print

13. Why CSS?
• Separate design/style/layout from content
• Separate designers from writers
• Quickly change the visual appearance of a
Web document (fonts, headings, tables)
• Allows for multiple looks for the same
HTML code (i.e., a Web browser style sheet
vs. a printer style sheet vs. a Smartphone
style sheet)

14. Rules
• Consists of a selector and a declaration
• Selector – HTML tag the style sheet will
change (h1, p, etc.)
• Declaration – what the style actually is,
and what to do with it
• Example:
h1 {text-align: center;}
p {color: red; font-family: sans-serif;}

15. Rules
• Specificity
• Order

16. Rules
 Internal/Embedded
– Style characteristics are embedded in the HEAD section of the
web page; used when a single page requires a unique style sheet
 External/Linked
– Connection made via the link tag; uses optional TYPE attribute to
specify a media type (type/css); most common
 Imported
– Allows for using style sheets from other sources; must be
included at beginning of the page using the @import statement
 Inline
– Least flexible; requires each element to be tagged within the
HTML coding of the page.

17. CSS – Internal/Embedded
 Style information is embedded into the HEAD element of
page
 All formatting in one location, vs. each individual
element/tag on the page needing its own stylistic
information attached
 Good for small sites/pages
<head>
<style type="text/css">
hr {color: red;}
body {margin-left: 20px;}
</style>
</head>

18. CSS – External
 Style information is external to the webpage
 Code shows syntax for linking the webpage to
an external CSS
 This page below will draw CSS/formatting
information frm the yourstyle.css document.
<head>
<link rel="stylesheet" type="text/css" href="yourstyle.css" />
</head>

19. CSS – Import
 This statement may be used in a CSS file or inside the STYLE element.
 You can combine importing with other methods
 All @import statements must occur at the start of the style sheet
 Any rules specified in the style sheets themselves override conflicting rules in the
imported style sheets
 You can use as many style sheet files as you wish and override them with
embedded styles
<style type="text/css">
<!—
@import url(pagestyle.css);
->
</style>

20. CSS – Inline
 Least flexible
 requires each element to be tagged
within the HTML coding of the page.
<p style="color:sienna;margin-left:20px">This
is a paragraph.
</p>

21. Example

22. Example
h1 {
font-family:
haettenschweiler;
color: maroon;
font-size: xx-large;
}
table, tr, td {
border-color:
olive;
font-family: arial;
}
p{
background-color
: yellow;
text-align: center;
}

23. Example
CSS

24. Assignment 9 – last one!