Cascading Style Sheets By: Valerie Kuna

What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation of an HTML document without using HTML tags. Its goal is to separate document content and structure from document presentation. Cascading Style Sheets (CSS) are a standard for specifying the presentation of an HTML document without using HTML tags. Its goal is to separate document content and structure from document presentation.

What are Cascading Style Sheets? CSS's define attributes for specifying colors, fonts, margins borders, absolute positioning of elements, and other basic styles. CSS's define attributes for specifying colors, fonts, margins borders, absolute positioning of elements, and other basic styles. With JavaScript, CSS enables a variety of visual effects referred to a Dynamic HTML (DHTML) With JavaScript, CSS enables a variety of visual effects referred to a Dynamic HTML (DHTML)

The ‘Cascade’ in Cascading Style Sheets The style rules that apply to any given element in a document can come from a cascade of different sources. The style rules that apply to any given element in a document can come from a cascade of different sources. Which style rules are used are determined by which rule has the higher precedence. Which style rules are used are determined by which rule has the higher precedence. The rule precedence is generally: author style sheets override the browser default style sheet, and inline styles override everything. The rule precedence is generally: author style sheets override the browser default style sheet, and inline styles override everything.

Using CSS The CSS standard allows certain style attributes that are commonly used together to be combined using certain shortcut features. The CSS standard allows certain style attributes that are commonly used together to be combined using certain shortcut features. font: bold italic 24pt helvetica font: bold italic 24pt helvetica Sets all the attributes (size, style, weight) at once with a single font attribute. Sets all the attributes (size, style, weight) at once with a single font attribute.

Using CSS The simplest kind of CSS rule defines styles for one or more specific tag names. Each rule begins with a selector that specifies the document element(s) to which it applies, followed by a set of style attributes and their values in curly braces. The simplest kind of CSS rule defines styles for one or more specific tag names. Each rule begins with a selector that specifies the document element(s) to which it applies, followed by a set of style attributes and their values in curly braces. body { margin-left: 30px; margin- right: 15px; background-color: #ffffff }body { margin-left: 30px; margin- right: 15px; background-color: #ffffff } sets the margins and the background color for the tag sets the margins and the background color for the tag

Using CSS Another rule is class selectors which is used to specify a class of elements to which it should be applied. This is defined by the class attribute of the HTML tag. Another rule is class selectors which is used to specify a class of elements to which it should be applied. This is defined by the class attribute of the HTML tag..nerp {font-weight: bold; }.nerp {font-weight: bold; } will display anything with this attribute bold. will display anything with this attribute bold. This can be combined with other tag name selectors. This can be combined with other tag name selectors. times.nerp {color: red; }times.nerp {color: red; } will be displayed in red with a bold font will be displayed in red with a bold font

My Style Sheets.uabody { font-family: Arial, Helvetica, sans- serif; font-size: 24px; font-weight: bold; text- transform: uppercase; color: #009999; background-color: #000000; background-image: none; cursor: hand; letter-spacing: normal; text- align: center; word-spacing: normal; white- space: normal}.uabody { font-family: Arial, Helvetica, sans- serif; font-size: 24px; font-weight: bold; text- transform: uppercase; color: #009999; background-color: #000000; background-image: none; cursor: hand; letter-spacing: normal; text- align: center; word-spacing: normal; white- space: normal}.uaprices { font-family: Arial, Helvetica, sans- serif; font-size: 14px; font-style: normal; line- height: normal; background-color: #000000; letter-spacing: normal; word-spacing: normal; list-style-type: disc; color: #9933CC; text-align: center}.uaprices { font-family: Arial, Helvetica, sans- serif; font-size: 14px; font-style: normal; line- height: normal; background-color: #000000; letter-spacing: normal; word-spacing: normal; list-style-type: disc; color: #9933CC; text-align: center}

Associating Style Sheets with Documents Can be done in two ways: Can be done in two ways: placing it between and tags in the of the document.placing it between and tags in the of the document. Store the style sheet in a file of its own and referencing it using a tagStore the style sheet in a file of its own and referencing it using a tag

Resources JavaScript The Definitive Guide, 4th edition. by David Flanagan, O'Reilly Publishing, Pg JavaScript The Definitive Guide, 4th edition. by David Flanagan, O'Reilly Publishing, Pg

Differences Between Netscape and Internet Explorer Netscape 4 does not support a full object model, and does not allow JavaScript elements to refer to arbitrary HTML elements. Netscape 4 does not support a full object model, and does not allow JavaScript elements to refer to arbitrary HTML elements. This is then done by specifying a layer object. This is then done by specifying a layer object. document.layers[l2]document.layers[l2] This is used mostly in DHTML. This is used mostly in DHTML.

beidler.css body { color: black; font-family: Arial; font-size: 10pt;} body { color: black; font-family: Arial; font-size: 10pt;} pre { color: blue; font-family: Courier; font-size: 8pt;} pre { color: blue; font-family: Courier; font-size: 8pt;} tt { color: blue; font-family: Courier; font-size: 8pt;} tt { color: blue; font-family: Courier; font-size: 8pt;} h1 { color: #FFFFFF; font-family: Arial; font-size: 17pt; font-weight: bold; } h1 { color: #FFFFFF; font-family: Arial; font-size: 17pt; font-weight: bold; } h2 { color: #800040; font-family: Arial; font-size: 16pt; font-weight: bold; } h2 { color: #800040; font-family: Arial; font-size: 16pt; font-weight: bold; } h3 { color: #800080; font-family: Arial; font-size: 15pt; font-weight: bold; } h3 { color: #800080; font-family: Arial; font-size: 15pt; font-weight: bold; } h4 { color: #0000FF; font-family: Arial; font-size: 14pt; font-weight: bold; } h4 { color: #0000FF; font-family: Arial; font-size: 14pt; font-weight: bold; } h5 { color: #0080C0; font-family: Arial; font-size: 13pt; font-weight: bold; } h5 { color: #0080C0; font-family: Arial; font-size: 13pt; font-weight: bold; } h6 { color: #8080FF; font-family: Arial; font-size: 12pt; font-weight: bold; } h6 { color: #8080FF; font-family: Arial; font-size: 12pt; font-weight: bold; } td {font-family: Arial; font-size: 10pt} td {font-family: Arial; font-size: 10pt} div {font-family: Arial; font-size: 10pt} div {font-family: Arial; font-size: 10pt} dt {font-family: Arial; font-size: 11pt; color: black; font-weight: bold; } dt {font-family: Arial; font-size: 11pt; color: black; font-weight: bold; } a { text-decoration: none; font-size: 10pt; font-style: italic; font-weight: bold;} a { text-decoration: none; font-size: 10pt; font-style: italic; font-weight: bold;} a:hover { text-decoration: underline; font-weight: none; font-size: 10pt;, color #FF8080} a:hover { text-decoration: underline; font-weight: none; font-size: 10pt;, color #FF8080} a:link { color: red} a:link { color: red} a:visited {color: red} a:visited {color: red} div.margin { font-size: 10pt; text-decoration: none; color: yellow; font-weight: bold;} div.margin a:visited { font-size: 9pt; text-decoration: none; color: white } div.margin a:link { font-size: 9pt; text-decoration: none; color: white } div.margin a:hover { font-size: 9pt; text-decoration: none; color: yellow } div.top a:visited { font-size: 7pt; text-decoration: none; color: white; font-weight: bold; } div.top a:link { font-size: 7pt; text-decoration: none; color: white; font-weight: bold; } div.top a:hover { font-size: 7pt; text-decoration: none; color: yellow; font-weight: bold; } div.header { font-size: 14pt; text-decoration: none; color: white; } div.header a{ font-size: 16pt; text-decoration: none; color: white; } div.header a:visited { font-size: 12pt; font-weight: bold; text-decoration: none; color: white } div.header a:link { font-size: 12pt; font-weight: bold; text-decoration: none; color: white } div.header a:hover { text-decoration: none; color: yellow } div.directory { color: white; font-size: 12; font-weight: bold; }

beidler.css div.banner { margin: 0; margin: 0; font-size: 75% /*smaller*/; font-size: 75% /*smaller*/; font-weight: bold; font-weight: bold; line-height: 1.1; line-height: 1.1; text-align: center; text-align: center; position: fixed; position: fixed; top: 0.5em; top: 0.5em; left: 0.5em; left: 0.5em; width: 10em; width: 10em; right: auto; right: auto;} div.banner p { margin: 0; margin: 0; padding: 0.3em 0.4em; padding: 0.3em 0.4em; font-family: Arial, sans-serif; font-family: Arial, sans-serif; //background: #004; //background: #004; //border: thin outset #900; //border: thin outset #900; color: white; color: white;} div.banner a, div.banner em { display: block; margin: 0 0.5em } //div.banner a, div.banner em { border-top: 2px groove #999 } //div.banner a:first-child { border-top: none } div.banner em { color: #CFC } div.banner a:link { text-decoration: none; color: white } div.banner a:visited { text-decoration: none; color: white } div.banner a:hover { background: red; color: white }

beidler.css div.copyright { margin: 0; margin: 0; font-size: 90% /*smaller*/; font-size: 90% /*smaller*/; //font-weight: bold; //font-weight: bold; line-height: 1.1; line-height: 1.1; text-align: center; text-align: center; position: fixed; position: fixed; bottom: 0.5em; bottom: 0.5em; left: 0em; left: 0em; width: 10em; width: 10em; right: auto; right: auto;} div.copyright p { margin: 0; margin: 0; padding: 0.3em 0.4em; padding: 0.3em 0.4em; font-family: Arial, sans-serif; font-family: Arial, sans-serif; //background: yellow; //background: yellow; //border: thin outset #900; //border: thin outset #900; color: yellow; color: yellow;} div.copyright a, div.copyright em { display: block; margin: 0 0.5em } div.copyright a, div.copyright em { border-top: 2px groove #999 } //div.copyright a:first-child { border-top: none } div.copyright em { color: #CFC } div.copyright a:link { text-decoration: none; color: white } div.copyright a:visited { text-decoration: none; color: white } div.copyright a:hover { background: #88F; color: yellow } </style>