Advanced DHTML & DOM: Review of Cascading Style Sheets

Copyright Copyright ©2005 ©2005 Department of Computer & Information Department of Computer & Information ScienceScience

Advanced DHTML & DOM:Advanced DHTML & DOM:Review of Cascading Style Review of Cascading Style SheetsSheets


GoalsGoals

By the end of this lecture you should By the end of this lecture you should ……

• Understand how to write CSS rules.Understand how to write CSS rules.• Understand how to apply a style to Understand how to apply a style to

multiple selectors.multiple selectors.• Understand how to use contextual Understand how to use contextual

selectors.selectors.continued …continued …


GoalsGoals

By the end of this lecture you should By the end of this lecture you should ……

• Understand how to create CSS Understand how to create CSS custom classes.custom classes.

• Understand how to use id selectors.Understand how to use id selectors.• Understand how to create layers Understand how to create layers

using CSS.using CSS.


Types of Cascading Style Types of Cascading Style SheetsSheets

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


Style RulesStyle Rules

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

• Selectors represent the element or Selectors represent the element or class to which the style should apply.class to which the style should apply.

• Declarations include the attribute to Declarations include the attribute to which the rule should apply and the which the rule should apply and the new attribute value.new attribute value.


Rule Architecture – General Rule Architecture – General FormForm

selectorselector

{{

attribute:value;attribute:value;

attribute2:value2;attribute2:value2;

}}

(varies for inline styles)(varies for inline styles)


Open the file called reviewingCSS_01.html


Order of PrecedenceOrder of Precedence

• The cascading order of The cascading order of precedence for styles, starting precedence for styles, starting with the least important to the with the least important to the most important, is as follows:most important, is as follows:1.1. Browser defaultBrowser default2.2. External style sheetsExternal style sheets3.3. Internal style sheetsInternal style sheets4.4. Inline stylesInline styles


Applying a Style Applying a Style to Multiple Selectorsto Multiple Selectors

• You can apply the same style to You can apply the same style to multiple selectors by listing the multiple selectors by listing the selectors in a comma-delimited list:selectors in a comma-delimited list:

p,li p,li {{font-size:14pt;font-size:14pt;font-color:red; font-color:red;

}}


Contextual SelectorsContextual Selectors

• Contextual selectors only apply styles Contextual selectors only apply styles under certain circumstances. For under certain circumstances. For example, the follow style would apply example, the follow style would apply only for only for <em><em> elements nested inside a elements nested inside a <li><li> element: element:

li emli em{{font-size:14pt;font-size:14pt;font-color:red; font-color:red;

}}


ClassesClasses

• We can create classes to apply We can create classes to apply certain styles not to all elements in a certain styles not to all elements in a group, but to specifically identified group, but to specifically identified elements (those elements that match elements (those elements that match with the class attribute). with the class attribute).

• We can create classes to apply only We can create classes to apply only to a given XHTML element (by also to a given XHTML element (by also identifying the tag name) or to apply identifying the tag name) or to apply to any element we choose (lacks a to any element we choose (lacks a specific tag name).specific tag name).


Class Example 1Class Example 1

p.alertp.alert

{{

color: #ffffff;color: #ffffff;

background-color: #ff0000;background-color: #ff0000;

font-weight: bold;font-weight: bold;

}}


Applying the Previous ClassApplying the Previous Class

<p class=“alert”><p class=“alert”>

This represents some text.This represents some text.

</p></p>


Class Example 2Class Example 2

.alert.alert

{{

color: #ffffff;color: #ffffff;

background-color: #ff0000;background-color: #ff0000;

font-weight: bold;font-weight: bold;

}}


Applying the Previous ClassApplying the Previous Class

<p class=“alert”><p class=“alert”>


</p></p>

……

<h1 class=“alert”><h1 class=“alert”>


</h1></h1>




Using Using <div><div> and and <span><span>

• The The <div><div> element formats a group of element formats a group of block-level and inline elements with block-level and inline elements with styles, whereas the styles, whereas the <span><span> element element formats a group of inline elementsformats a group of inline elements

• The only difference between these two The only difference between these two elements is that the elements is that the <div><div> element can element can contain block-level elements and also contain block-level elements and also adds a line break after its closing tag.adds a line break after its closing tag.


idid Selectors Selectors

• If we want to apply a style once, to a If we want to apply a style once, to a very specific element, we can create very specific element, we can create an id selector, using the syntax:an id selector, using the syntax:

#ApplyOnce#ApplyOnce{{color:#ff0000;color:#ff0000;background-color: #ffffff;background-color: #ffffff;

}}


Using Using idid Selectors Selectors

• To use id selector styles, we just To use id selector styles, we just need to create the element and need to create the element and name it using the id attribute:name it using the id attribute:

<p id=“ApplyOnce”><p id=“ApplyOnce”>

This text is red.This text is red.

</p></p>


Creating LayersCreating Layers

• We can use layers to create We can use layers to create elements which we can move, elements which we can move, make appear or make disappear.make appear or make disappear.

• Layers represent rectangular Layers represent rectangular areas that are positioned along areas that are positioned along the X, Y and Z axes.the X, Y and Z axes.




Introducing the Z-AxisIntroducing the Z-Axis

• x = Horizontal Axisx = Horizontal Axis• y = Vertical Axisy = Vertical Axis• z = “Depth” Axisz = “Depth” Axis

(Stacking Order)(Stacking Order)– Specified by the “z-Specified by the “z-

index” propertyindex” property– Think of the z axis Think of the z axis

pointing from the pointing from the monitor towards youmonitor towards you


Creating a LayerCreating a Layer

positionpositionleftlefttoptop

heightheightwidthwidthz-indexz-index

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

• Important Layer Attributes:Important Layer Attributes:




SummarySummary

• Style rules are comprised of selectors Style rules are comprised of selectors and declarations.and declarations.

• We can apply a rule to multiple We can apply a rule to multiple selectors by separating each selector selectors by separating each selector with a comma when creating a rule.with a comma when creating a rule.

• We can use contextual selectors to We can use contextual selectors to apply a style only under given apply a style only under given circumstances.circumstances.

continued …continued …


SummarySummary

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

• We can use CSS to create layers, We can use CSS to create layers, which can overlap one another by which can overlap one another by specifying a Z-index value.specifying a Z-index value.

• We can show/hide individual layers by We can show/hide individual layers by adjusting the visibility attribute of a adjusting the visibility attribute of a layer.layer.

Date post:	30-Dec-2015
Category:	Documents
Upload:	vincenzo-deegan
View:	27 times
Download:	4 times

Advanced DHTML & DOM: Review of Cascading Style Sheets

Documents