Cascading Style Sheets
Scripting with Style
CSS versus HTML
 Ways to format in HTML
– HTML Tag extensions
– Converting Text to images
– Page Layout with Tables
Content versus Design
 HTML was originally written for content
– H1 different in different browsers, but not a big
deal at first
Why Use CSS Then?
 CSS allows you to separate design from
content
CSS History
 CSS1 (1996)
 CSS2 (1998)
 IE 3-6 versus Netscape 4.7x, 6.x, and 7.x
– IE3 = some, IE4 = CSS1, IE5.x = almost there for CSS1
– IE6 – works well, but still has proprietary items
 Netscape
– Not there yet, but some support.
– 7.x is close
 Opera
– CSS compliant
Style Types
 Inline style
 Embedded style
 External style
Inline Style
 Individual tag on an HTML document
<tag style="style declarations">
<h1 style="color: red; font-family: sans-serif;">My
Title</h1>
Embedded Style
 Entire HTML document
<style type="text/css">
selector {attribute:value; attribute:value;}
</style>
Embedded Example
<style type="text/css">
h1, h2, h3 {color: red; font-family: sans-serif;}
h4 {color:#0000FF; font-family: sans-serif;}
A:LINK {font-family: Verdana; font-size:11pt; fontweight: bold; color: #336633; TEXT-decoration: none;}
</style>
External Style
 Any number of HTML documents
 Separate file
External Example
<style type-"text/css">
<!-body {font-family: verdana; color: #000000; text-align: left;
background:#ffffff;}
a:link {font-family: verdana; font-size:11pt; font-weight: bold; color:
#336633; text-decoration: none;}
a:visited {font-family: verdana; font-size:11pt; font-weight: bold; color:
#660066; text-decoration: none;}
-->
</style>
Why Cascading?
 Style Precedence
– Internal over embedded and external
– Embedded over external
– External
– Unless specifically set by user, style will
overcome most browser default settings.
Inheritance (still cascading)
 Figure 7-10 (7.14)
 Figure 7-13 (7.16)
 Parents and Descendants
 Contextual Selectors
– li b{color:#00FF00}
Various Font and Text
elements
 Font Families (7.18)
 Font Size (7.20)
 Spacing (7.22)
 Aligning text (7.25)
 Much more in this section. . .
Backgrounds
 Various color settings (7.30)
 Background images (7.32)
 Once again check browser displays
Hyperlinks
 a: {text-decoration: none}
 a: visited {}
 a: link {}
 a: active {}
 a: hover {}
IDs (7.43)
 pseudo-class
 pseudo-elements
 Hyperlinks are an example
 Also have items like
– p: first-letter{font-size:200%}
– p: first-letter {text-transform: uppercase}
 Cross-browser issues
Classes (7.43)
 Way to create, define, and use elements
<tag class="class_name">
In HTML document
<h1 class="name">Here you go.</h1>
Class Example
In stylesheet
h3.special {color:#FFFF00; font-style: italic;}
In HTML
<h3 class="special">This is yellow italic.</h3>
or. . .
<p class="special">This is yellow italic.</p>
DIV and SPAN tags
 <div class="special">Block level text
elements</div>
 <span class="special">Inline
elements</span>
Why use DIV or SPAN?
 IE versus Netscape (7.47-7.49)
 See HTML in Figure 7-55
CSS and DHTML
 A large portion of programming that is
taking hold, but browser specifications are
making it difficult.
Let's Play
 Let's work on a short CSS exercise
– http://homepages.wmich.edu/~rea/380/exercises/css/ex2.htm