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

Embedded Style  Entire HTML document selector {attribute:value; attribute:value;}

Embedded Example h1, h2, h3 {color: red; font-family: sans-serif;} h4 {color:#0000FF; font-family: sans-serif;} A:LINK {font-family: Verdana; font-size:11pt; font- weight: bold; color: #336633; TEXT-decoration: none;}

External Style  Any number of HTML documents  Separate file

External Example <!-- 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;} -->

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 In HTML document Here you go.

Class Example In stylesheet h3.special {color:#FFFF00; font-style: italic;} In HTML This is yellow italic. or... This is yellow italic.

DIV and SPAN tags  Block level text elements  Inline elements

Why use DIV or SPAN?  IE versus Netscape ( )  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 –