Advanced DHTML DOM Review of Cascading Style Sheets

Goals By the end of this lecture you should … • Understand how to

Types of Cascading Style Sheets • Current W 3 C recommendations support three types

Style Rules • All styles depend on rules. Programmers construct rules using selectors and

Rule Architecture – General Form selector { attribute: value; attribute 2: value 2; }

Open the file called reviewing. CSS_01. html Copyright © 2005 Department of Computer &

Order of Precedence • The cascading order of precedence for styles, starting with the

Applying a Style to Multiple Selectors • You can apply the same style to

Contextual Selectors • Contextual selectors only apply styles under certain circumstances. For example, the

Classes • We can create classes to apply certain styles not to all elements

Class Example 1 p. alert { color: #ffffff; background-color: #ff 0000; font-weight: bold; }

Applying the Previous Class <p class=“alert”> This represents some text. </p> Copyright © 2005

Class Example 2. alert { color: #ffffff; background-color: #ff 0000; font-weight: bold; } Copyright

Applying the Previous Class <p class=“alert”> This represents some text. </p> … <h 1

Open the file called reviewing. CSS_02. html Copyright © 2005 Department of Computer &

Using <div> and <span> • The <div> element formats a group of block-level and

id Selectors • If we want to apply a style once, to a very

Using id Selectors • To use id selector styles, we just need to create

Creating Layers • We can use layers to create elements which we can move,

Open the file called reviewing. CSS_03. html Copyright © 2005 Department of Computer &

Introducing the Z-Axis • • • x = Horizontal Axis y = Vertical Axis

Creating a Layer • We create layers using the <div> element and associated styles.

Open the file called reviewing. CSS_04. html Copyright © 2005 Department of Computer &

Summary • Style rules are comprised of selectors and declarations. • We can apply

Summary • We can create custom classes to apply styles to multiple difference elements.

Slides: 26

Download presentation

Goals By the end of this lecture you should … • Understand how to write CSS rules. • Understand how to apply a style to multiple selectors. • Understand how to use contextual selectors. continued … Copyright © 2005 Department of Computer & Information Science

Goals By the end of this lecture you should … • Understand how to create CSS custom classes. • Understand how to use id selectors. • Understand how to create layers using CSS. Copyright © 2005 Department of Computer & Information Science

Types of Cascading Style Sheets • Current W 3 C recommendations support three types of styles: – External (Multi-page scope) – Embedded (Page-level scope) – Inline (Element-level scope) Copyright © 2005 Department of Computer & Information Science

Style Rules • All styles depend on rules. Programmers construct rules using selectors and declarations. • Selectors represent the element or class to which the style should apply. • Declarations include the attribute to which the rule should apply and the new attribute value. Copyright © 2005 Department of Computer & Information Science

Order of Precedence • The cascading order of precedence for styles, starting with the least important to the most important, is as follows: 1. Browser default 2. External style sheets 3. Internal style sheets 4. Inline styles Copyright © 2005 Department of Computer & Information Science

Applying a Style to Multiple Selectors • You can apply the same style to multiple selectors by listing the selectors in a comma-delimited list: p, li { font-size: 14 pt; font-color: red; } Copyright © 2005 Department of Computer & Information Science

Contextual Selectors • Contextual selectors only apply styles under certain circumstances. For example, the follow style would apply only for <em> elements nested inside a <li> element: li em { font-size: 14 pt; font-color: red; } Copyright © 2005 Department of Computer & Information Science

Classes • We can create classes to apply certain styles not to all elements in a group, but to specifically identified elements (those elements that match with the class attribute). • We can create classes to apply only to a given XHTML element (by also identifying the tag name) or to apply to any element we choose (lacks a specific tag name). Copyright © 2005 Department of Computer & Information Science

Using <div> and <span> • The <div> element formats a group of block-level and inline elements with styles, whereas the <span> element formats a group of inline elements • The only difference between these two elements is that the <div> element can contain block-level elements and also adds a line break after its closing tag. Copyright © 2005 Department of Computer & Information Science

id Selectors • If we want to apply a style once, to a very specific element, we can create an id selector, using the syntax: #Apply. Once { color: #ff 0000; background-color: #ffffff; } Copyright © 2005 Department of Computer & Information Science

Using id Selectors • To use id selector styles, we just need to create the element and name it using the id attribute: <p id=“Apply. Once”> This text is red. </p> Copyright © 2005 Department of Computer & Information Science

Creating Layers • We can use layers to create elements which we can move, make appear or make disappear. • Layers represent rectangular areas that are positioned along the X, Y and Z axes. Copyright © 2005 Department of Computer & Information Science

Introducing the Z-Axis • • • x = Horizontal Axis y = Vertical Axis z = “Depth” Axis (Stacking Order) – Specified by the “zindex” property – Think of the z axis pointing from the monitor towards you Copyright © 2005 Department of Computer & Information Science

Creating a Layer • We create layers using the <div> element and associated styles. • Important Layer Attributes: üposition üleft ütop ü height ü width ü z-index Copyright © 2005 Department of Computer & Information Science

Summary • Style rules are comprised of selectors and declarations. • We can apply a rule to multiple selectors by separating each selector with a comma when creating a rule. • We can use contextual selectors to apply a style only under given circumstances. continued … Copyright © 2005 Department of Computer & Information Science

Summary • We can create custom classes to apply styles to multiple difference elements. • We can use CSS to create layers, which can overlap one another by specifying a Zindex value. • We can show/hide individual layers by adjusting the visibility attribute of a layer. Copyright © 2005 Department of Computer & Information Science