CSS Positioning CSS Positioning Creating Special Effects Creating Special Effects with CSSwith CSS

CS202

Working with Cascading Style Sheets (Chapter 4)

CS202 1

ObjectivesObjectivesFirst, the labs…Work with CSS selectorsCreate styles for listsCreate and apply class stylesCreate a rollover effectCreate a drop cap using a pseudo-

elementManage page layout with CSSWork with overflow and clipping stylesApply styles to various mediaHide elements from printingApply printer styles and page breaks for

printingCS2022

Review of CSS (Chapter 4)Review of CSS (Chapter 4) Background

◦ background-attachment: fixed;◦ background-attachment: scrolled;

 Text Decoration: ◦ links◦ fonts

Boxes:◦ General info◦ Mix and match classes◦ Border Style

Visibility:◦ Changing from: visibility: hidden

All of that leading to DHTML

CS2023

Working with Selector Working with Selector PatternsPatternsOn a Web page, elements are

nested within other elements, forming a hierarchical tree structure

CS2024

Working with Selector Working with Selector PatternsPatterns

The tree structure allows CSS to create contextual selectors◦Express location of an element within

the hierarchy of elementsparent descendant {styles}li b {color: blue}li b, h2 {color: blue}#notes b {color: blue}* {color: blue}p > b {color: blue}

CS2025

Using Selector PatternsUsing Selector PatternsTo apply a style to

a single element use the e selector /* e is the name of the element */

all elements use the * selector

a descendant element (f) use the e f selector /* e is the parent and f is an element

nested within the parent */a child element (f)

use the e > f selector /* (e) is the name of a parent and (f) is a direct child

a sibling element use the e + f selector /* (e) and (f) are siblings and (f)

immediately follows (e) in the document tree */

CS2026

Working with Selector Working with Selector PatternsPatterns

Can also select elements based on their attributeelement[att] {styles}a[href] {color: blue}

See◦ http://faculty.wwu.edu/~granier/info/css/advanced/css_attributes_1

.htm title is one of “core attributes” (class, id,style and title)

And◦ http://webdesign.about.com/od/cssselectors/qt/cssselattribute.htm◦ http://www.blooberry.com/indexdot/css/index.html

CS2027

Working with Selector Working with Selector PatternsPatternsConditional comments allow you

to apply different HTML code for different versions of Internet Explorer<!-- [if condition IE version]>HTML code<![endif]-->

And browsers extensions (page 237)

CS2028

Using Pseudo-Classes Using Pseudo-Classes and Pseudo-Elementsand Pseudo-Elements

Pseudo-elements are abstracted from what we know of an element’s content, use, or position in the document

selector:pseudo-element {styles}

CS2029

Using Pseudo-Classes and Using Pseudo-Classes and Pseudo-ElementsPseudo-Elements

A pseudo-class is a classification of an element based on its status, position, or current use in the document

Rollover effects can be created using pseudo-classes◦ http://www.tutorio.com/tutorial/pure-css-image-rollovers

About CSS 10

Positioning Objects with Positioning Objects with CSSCSS

CS20211

Positioning Objects with Positioning Objects with CSSCSSCreate div containers for each

noteAdd a class attribute to apply a

common set of stylesEach note should have a unique

id or class (example)

CS20212

Positioning Objects with CSSPositioning Objects with CSSCSS-P (CSS-Positioning)

◦ part of the specification for CSS2◦ positioning styles adopted by browsers

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◦ used to move an element relative to its default position

on the pageposition: relative; left: 100px; top: 50px

You can fix an element at a specific spot in the document window while the rest of the page scrolls by setting the value of the position style to fixed

You can assign the inherit position style to an element so that it inherits the position value of its parent element

CS20213

Positioning Objects with Positioning Objects with CSSCSS

About CSS 14

• The different positioning styles• aka (CSS1 specs) CSS-Positioning or CSS-P

• To place an element at a specific position on a page use:

position: type; top: value; right: value;

bottom: value; left: value;

Positioning Objects with Positioning Objects with CSSCSS

CS20215

Stacking ElementsStacking Elements

About CSS 16

• Specify stacking order with:z-index: value

z-index: 3

z-index: 1

z-index: 2

Stacking ElementsStacking ElementsElements placed using CSS

positioning are stacked on top of elements that are not

To specify a different stacking order, use the style:z-index: value

CS20217

Working with Overflow Working with Overflow and Clippingand Clipping• The overflow property syntax:

◦ overflow: type

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

CS20218

Working with Overflow Working with Overflow and Clipping

The clip style allows you to define a rectangular region through which the element’s content can be viewedclip: rect(top, right, bottom, left)

CS20219

Hiding ElementsHiding Elements

CSS has two styles that you can use to keep an element from being displayed in the output: ◦the display style ◦the visibility style

visibility: typeThe type attribute can be set to

visible, hidden, collapse, or inheritCS20220

Comparing the visibility and Comparing the visibility and display stylesdisplay styles

About CSS 21

Visibility hidden

Object is hidden but still is part of the page flow

Display: none

Object is hidden and is removed from the page flow

Working with Different MediaWorking with Different Media

About CSS 22

• By default, a style sheet is applied to all devices• each device must determine how best to match the

styles to its own requirements• You can specify output styles for particular devices in the

media attribute of the link and style elements

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

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

The @media RuleThe @media Rule

About CSS 23

You can also specify the output media within a style sheet using:

@media type {style declarations}

Where media is one of the supported media types

and style declarations are the styles

associated with that media type

Media GroupsMedia Groups

About CSS 24

• CSS2 uses media groups• to describe basic facets of different media• and to differentiate between different types of

media based on the ways they render content– Continuous or paged– Visual, aural, or tactile– Grid or bitmap– Interactive or static

– Various media types

Working with Different Working with Different MediaMedia

You can use a single style sheet broken down into different sections for each media type

@media screen { body {font-size: 1em} h1 {font-size: 2em} }@media print { body {font-size: 12pt} h1 {font-size: 16pt} }@media handheld { body {font-size: 8pt} h1 {font-size: 12pt} }@media tv { body {font-size: 16pt} h1 {font-size: 24pt} }

CS20225

Working with Different Working with Different MediaMediaCSS uses media groups to

describe how different media devices render content◦Continuous or paged◦Visual, aural, or tactile◦Grid (for character grid devices) or

bitmap◦Interactive (for devices that allow

user interaction) or static (for devices that allow no interaction)

CS20226

Using Print StylesUsing Print Styles

• CSS defines printed pages by extending the box model

• You can specify the size of a page, margins, internal padding, etc. of the page box

• (Check page HTML 248 for working with print styles)

CS202 27

Using Print StylesUsing Print StylesThe 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

CS20228

Working with Page BreaksWorking with Page BreaksThe printer will decide the

location of the page breaks

page-break-before: typepage-break-after: type

hr {page-break-after: always}

CS20229

Working with Page BreaksWorking with Page BreaksThe type style attribute has the

following values:◦Always, Avoid, Left, Right, Auto and

InheritWidow:

◦only a few lines of an element at the top of a page

Orphan: ◦only a few beginning lines of an element

appear at the bottom of a pageThe styles to control the appearance of

widows and orphans in the printout are:widow: valueorphan: value

CS20230