Advanced DHTML & DOM: Review of Cascading Style Sheets

Advanced DHTML & DOM:Review of Cascading Style Sheets

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 …

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.

Types of Cascading Style Sheets • Current W3C recommendations support three types of styles: • External (Multi-page scope) • Embedded (Page-level scope) • Inline (Element-level scope)

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.

Rule Architecture – General Form selector { attribute:value; attribute2:value2; } (varies for inline styles)

Open the file called reviewingCSS_01.html

Order of Precedence • The cascading order of precedence for styles, starting with the least important to the most important, is as follows: • Browser default • External style sheets • Internal style sheets • Inline styles

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:14pt;font-color:red; }

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:14pt;font-color:red; }

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).

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

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

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

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

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.

id Selectors • If we want to apply a style once, to a very specific element, we can create an id selector, using the syntax: #ApplyOnce { color:#ff0000; background-color: #ffffff; }

Using id Selectors • To use id selector styles, we just need to create the element and name it using the id attribute: <p id=“ApplyOnce”> This text is red. </p>

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.

Introducing the Z-Axis • x = Horizontal Axis • y = Vertical Axis • z = “Depth” Axis (Stacking Order) • Specified by the “z-index” property • Think of the z axis pointing from the monitor towards you

position left top height width z-index Creating a Layer • We create layers using the <div> element and associated styles. • Important Layer Attributes:

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 …

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 Z-index value. • We can show/hide individual layers by adjusting the visibility attribute of a layer.

Advanced DHTML & DOM: Review of Cascading Style Sheets