tutorial 4 creating special effects with css. selector patterns on a web page, elements are nested...

Tutorial 4Creating Special Effects with CSS

Selector PatternsOn a Web page, elements are nested

within other elements, forming a hierarchical tree structure

2

Nested within the <body> element.

Nested within <p> elements.

Nested within <span> element.

Selector PatternsCSS contextual selectors express the location of an

element

li b {color: blue} all <b> elements that are nested withn <li>

li b, h2 {color: blue} all <b> elements that are nested within <li> and also all <h2> elements

#note b {color: blue} all <b> elements that are nested within the element that has id=“note”

* {color: blue} all elements in the web page

p > b {color: blue} all <b> elements that are direct children of <p> elements.3 ( ** Not supported in IE7 )

Selector Patterns

.notes p {font-size: 8pt} all <p> elements that are nested within an element that has class=“notes”

.notes span {color: yellow} all <span> elements that are nested within an element that has class=“notes”

.notes a:hover {color: blue} all links that are nested within an element that has class=“notes” when the mouse hovers over the link

.notes {display: list-item} all elements that have class=“notes”

4 examples/052_pg-203-contextual-selector.htm

Selector Patterns

5

Working with Selector PatternsConditional comments allow you to apply

different HTML code for different versions of Internet Explorer

Different HTML code for different browsers that are NOT Internet Explorer

 HTML code<![endif]-->

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e6

Applying Styles to ListsTo specify the list

marker displayed by the browser, you can apply the stylelist-style-type: type

7 examples/053_pg-208-list-styles.htm

Applying Styles to Lists


Applying Styles to ListsMost browsers place the list marker to the

left of the block, lining up the markers with each list itemlist-style-position: position


Working with ClassesThe class attribute is used when you want to identify

elements that share a common characteristic<elem class="class"> ... </elem>

You can use the class attribute to assign the same style to multiple elements sharing the same class value.class {styles}

10

class =“notes” is assigned to the <div>

These styles are applied to <a> elements nested within an element of class “notes”.

examples/053a_pg-213-classes.htm

Pseudo-Classes and Pseudo-ElementsA pseudo-class is a classification of an element

based on its current status, position, or use in the documentselector:pseudo-class {styles}

11

These styles are applied to <a> elements nested within an element of class “notes” when the mouse hovers over the link.

Using Pseudo-Classes

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e12 examples/054_pg-217-pseudo-classes-hover.htm

Using Pseudo-Classes and Pseudo-ElementsPseudo-elements are abstracted from

what we know of an element’s content, or position in the documentselector:pseudo-element {styles}


examples/054a_pg-221-pseudo-elements.htm

New Perspectives on HTML, XHTML, and Dynamic

HTML, 4e14

•Go to my Web site and download the files for Tutorial 4

•http://www.kapple01.com/ccm/web2/home/web2_labdata.html

•Unzip the files into a work folder on your flash drive

•Go to pg 199 in text book and start the in-chapter exercise.

•Stop when you get to the end of the section on page 221

Positioning Objects with CSS


Positioning Objects with CSSCreate div containers for each element you want to positionEach element to be positioned should have a unique id

<div id=firstcol><p> Now that we have defined a div container and given it an ID, we are able to use styles to explicitly position it anywhere on the screen. </p>

<img src="images/pic1.gif" alt="temp">

<p> Anything contained within the div container, for instance these two paragraphs and image, can be positioned explicitly anywhere on the screen. We will see this in the upcoming slides </p>

</div>

#firstcol {position: absolute; left 100px; top 50px }New Perspectives on HTML, XHTML, and Dynamic HTML, 4e16

Positioning Objects with CSSCSS-P (CSS-Positioning) became part of the

specification for CSS2, and positioning styles were some of the first CSS2 styles to be adopted by browsersposition: type; top: value; right: value; bottom: value; left: value;

Absolute positioning enables you to place an element at specific coordinates either on a page or within a containing elementposition: absolute; left: 100px; top: 50px

Relative positioning is used to move an element relative to its default position on the pageposition: relative; left: 100px; top: 50px

17examples/054b-abs-rel-positioning.htm


18


“static” is the default position; it means the object is in it’s normal location in the flow of the document.

examples/055_pg-226-232-positioning-example1-original.htm

position: absolute

20

“absolute” means the object’s position is specified relative to the position of its containing element. The containing element for “outer” is the body of the web page.

( original ) ( new )

50

50

Top edge of “outer” is 50px from the top of the page; left edge of “outer is 50px from the left edge of the page.

(Coordinates should have: px after them)

examples/060_pg-226-232-positioning-example2-absolute-outer.htm

position: relative

21

( original ) ( new)

“relative” means the object’s position is specified relative to the position it would have occupied in the normal flow of the web page.

50

50

Top edge and left edge of “outer” are +50px from their places in the normal flow. ( same is true of “inner” )

50

50

(Coordinates should have: px after them)

examples/065_pg-226-232-positioning-example-3-relative-outer-and-inner.htm

Working with Overflow and Clipping

If you want to force an element into a specified height and width, you have to define how the browser should handle a situation where content overflows the space allotted to the objectoverflow: type


examples/070_pg-234-overflow.htm

Working with Overflow and ClippingThe clip style allows you to define a

rectangular region through which the element’s content can be viewedclip: rect(top, right, bottom, left)


examples/077_pg-236-clipping-images.htm

Stacking ElementsElements placed using CSS positioning are

stacked on top of elements that are notTo specify a different stacking order, use

the style:z-index: value

Higher z-index valuesdisplay in “front” of lower z-index values.

24

z-index is a style property:

examples/075_pg-238-z-index.htm


HTML, 4e25

•Go to pg 222 in text book and continue the in-chapter exercise.

•Stop when you get to the end of the section on page 239

Working with Different MediaBy default, a style sheet is applied to all devices,

and each device must determine how best to match the styles to its own requirements

CSS2 allows you to specify different styles for different Output devices with the media attribute in either the style element for embedded style sheets or the link element for external style sheets.

<style type="text/css" media="type">...</style>

or<link href="url" type="text/css" media="type" ... />

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

26

Working with Different Media


Example:

28

The html file links to 2 style sheets: one for screen and another for print.

The <h2> element contains a nested <span>

element.

The style sheet for screen (scraps.css) includes these declarations.

Screen display is

like this

Example:

29

The html file links to 2 style sheets: one for screen and another for print.

The style sheet for print(scraps_print.css) includes these declarations.

Print display is like this

(** The “after” pseudo-element is not currently supported by IE? )

Hiding ElementsThe visibility style and the display style can be used to

keep an element from being displayed in the browservisibility: hidden hides the elementvisibility: display displays the elementdisplay: none hides the element

The difference between visibility and display is whether the element will take up space in the window.

30

visibility: hiddenDoes not show, but takes up space.

display: noneDoes not show, andtakes up no space.

Using Print Styles


CSS defines printed pages by extending the box model

Using Print Styles


The general rule to create and define a page box is:@page {styles}

Printed media can vary in size and orientation

The size style allows the Web author to define the default dimensions and orientation of the printed pagesize: width height orientation


HTML, 4e33

•Go to pg 239in text book and continue work on the in-chapter exercise.

tutorial 4 creating special effects with css. selector patterns on a web page, elements are nested...

Documents