The presentation from the Feb 9, 2009 class which covered basics for using CSS (cascading style sheets) with XHTML pages.

1. ! quot; #%
$ &'
quot; (
) *
+ ,' - .
quot;
'
/ -' quot; & ' / & * quot; * quot; / +
- ( " ( quot;( '/
' + (
quot;( '/ / "
( ** ' 0
quot;
'('
quot; quot;quot; '
quot;*
( 0 ' '/
quot;( ' quot;'
-' quot;
quot;(
2
1

2. 3
CSS Advantages
% (/ (' '
'quot; &*
' quot; *
'
quot; &* / , (
1 quot;' * '
' ' *
2 quot; quot; *quot;
4
2

3. '
quot; '
"
( quot;/ &/ +
(
3/'quot; &
(
#' ' / quot;'
&*
quot;
5
2* '
&
quot;
( quot;// quot; &
+ ($
3/ 4' '
5*
#' / quot;+ ( *
3

4. 20 ''
&
quot;
( quot; 0& , /
quot; quot;$
'
&0 quot;
quot;
'
/ 4quot; 6 '
' 5 * quot;/
/ quot; &+ ( quot;quot;
, // $ &
quot; quot;'
* '
quot;quot;
*' 20 ''
8
4

5. 9
0 *'
&
quot;
( + ( quot;' ' 0
',
' ( $
body { color: blue;
background-color: yellow; }
/quot; '' ,quot; quot; /0
( quot;''
*
-' /, ' $
,
body { color: #0000FF;
background-color: #FFFF00; }
10
5

6. 11
12
6

7. 13
14
7

8. 8

9. "
quot; ( ' ,/
( quot;
'
quot;
/ '# quot;
7' . * ' 'quot; -' quot;
2 *'
0 .&
quot;
( ' 0quot; 4 5'
/ * .
<h1 style=quot;color:#ff0000quot;>Heading text is red</h1>
2 *' . &
0 quot;(/ 0quot; / / quot; ( &quot;
( (
( quot;// quot; (
' ' ' quot; ,/ quot;8
<h1 style=quot;color:#FF0000;background-color:#ccccccquot;>This is
displayed as a red heading with gray background</h1>
17
<style type =quot;text/cssquot;>
body { background-
color: #000000;
color: #FFFFFF;
}
</style>
18
9

10. 2* '
•/ ' /
( ' ' '& /
' quot;
($
• / ( ''
'
- quot; &45/ 45
/
'* // /'
'$
<style type=quot;text/cssquot;>
body { background-color: #E6E6FA;
color: #191970;}
h1 { background-color: #191970;
color: #E6E6FA;}
h2 { background-color: #AEAED4;
color: #191970;}
</style>
9- ,
quot;
'/
quot; + (:
$
$
+/ quot;quot;
(( (/ ' ///
&' ' & 0 ( , quot;quot; (
/
&
quot;
( ' '& /0 '
( ':
;$ quot; -( quot;*
(
'quot; &'
quot;quot; ':
10

11. & quot; 0, /
quot;(
( quot;
quot;& & quot; 0.
quot;(
(
& <, quot;
(/
&
quot;
( / ' &0
&< '
&
quot;
( 0 quot;'
quot; '
& <quot;
=
&
quot;
( / quot; &/
= 0
& <& quot;
*'
&
quot;
( /& & &/ 0
11

12. p {font-family: Arial,Verdana, sans-serif;}
2* '
2 *'
0
<style type=quot;text/cssquot;>
body { background-color: #E6E6FA;
color: #191970;
font-family: Arial, Verdana, sans-serif; }
h1 { background-color: #191970;
color: #E6E6FA;
line-height: 200%;
font-family: Georgia, quot;Times New Romanquot;, serif; }
h2 { background-color: #AEAED4;
color: #191970;
font-family: Georgia, quot;Times New Romanquot;, serif; }
p {font-size: .90em; }
ul {font-weight: bold; }
</style>
12

13. <style type=quot;text/cssquot;>
.new { color: #FF0000;
font-style: italic;
}
</style>
<p class=“new”>This is text is red and in italics</p>
26
13

14. <style type=quot;text/cssquot;>
#new { color: #FF0000;
font-size:2em;
font-style: italic;
}
</style>
<p id=“new”>This is text is red, large, and in italics</p>
27
28
14

15. 4quot; 2 *
-'
5 2 *'
0
&
quot;
( (&
2* .
<style type=quot;text/cssquot;>
.footer { font-size: small;
text-align: center; }
</style>
XHTML:
<div class=“footerquot;>Copyright &copy; 2009</div>
29
30
15

16. 4 52 *
' 2 *'
0
2* .
<style type=quot;text/cssquot;>
.companyname { font-weight: bold;
font-family: Georgia, quot;Times New Romanquot;, serif;
font-size: 1.25em;
}
</style>
.
<p>Your needs are important to us at <span
class=“companynamequot;>Acme Web Design</span>.
We will work with you to build your Web site.</p>
31
20 ' '/
Multiple web pages can associate with
the same external style sheet file.
site.css
index.htm
body {background-color:#E6E6FA;
color:#000000;
font-family:Arial, sans-serif;
clients.htm
font-size:90%; }
h2 { color: #003366; }
.nav { font-size: 16px; about.htm
font-weight: bold; }
etc…
32
16

17. <link rel=quot;stylesheetquot; href=quot;color.cssquot; type=quot;text/cssquot; />
33
3quot; 2
(0 ' '/
body { background-color: #0000FF;
color: #FFFFFF;
}
To link to the external style sheet called color.css, the
XHTML code placed in the header section is:
<link rel=quot;stylesheetquot; href=quot;color.cssquot; type=quot;text/cssquot; />
17

18. 9- ,
quot;
1. Can you provide a reason to use embedded
styles? Where are embedded styles placed on a
web page?
2. Can you describe a reason to use external
styles? Where are external styles laced and how
do web pages indicate they are using external
styles?
3. Can you write the code to configure a web page
to use an external style sheet called
“mystyles.css”?
35
quot; 1(
( ,/
quot;
#container { margin-left: auto;
margin-right: auto;
width:80%; }
18

19. +; 7' quot;
quot;
/ .quot; ,, $ ( <-'
6( $; 6
6
> quot; 6
%quot;'
quot; (quot;( ,/
quot;
9- , /
quot; quot; &/
( (
&
quot;
( ('
'& ' quot;& / '
quot; quot; ''
& * ? / 4 54 ;
/ /5 @ '
' '& / quot;& $
quot;(
& /' ( -quot;&
quot;
( A
&
quot;
( quot;' quot;& /$
(/ quot;* &/
'* ' $
9-
quot; $
) quot;quot;
( A*- ' 0 '&
$quot;
'
1quot;
'( quot;( quot;
* quot;quot; ,
-quot; / quot;quot;
((
+ quot;
19

20. '/ quot; quot;
(
7quot;
& quot; /.
( 8 * 'quot; / quot;
(/ /
&$
/ / quot; Bquot; quot;
(( &,
. /
quot; -' $
7 quot; / /C
& D* ' ''
/ / 0& ' /quot; quot;
-' & ($
& & , E.
9- ,
quot;
!* quot; /&
quot; '/ quot; '$
quot;
)& / quot;quot; / ' - / ' / quot; '$
quot;
7'
quot; / .quot; ,, $ ( <-'
6( $; 6
6
> quot;
**
quot; quot; quot;( ' / 9'
quot; ,/ '
quot; 0, (
- quot;quot;
' '* '
0 ' '$
- ' ' quot;
' $
quot; 7' quot; -
quot; quot;
/ .quot; ,, $ ( <-'
6( $; 6
6
> quot;
40
20

21. 21