Cascading Style Sheets II

Robin Burke

ECT 270

Outline

Midterm solution CSS review CSS selection

selectors pseudo-classes classes, ids div and span

Final project

Midterm solution

Style

aspects of the page that describe its appearance, but not its logical structure

Examplesfontscolorspositioningalignment

Cascading Style Sheets

Separate style from HTML content Different ways to use

in-lineembeddedlinked

Linked style most flexible

CSS Syntax

selector { attribute:value; } Example

h1 { font-color:blue; } Multiple attribute/values pairs possible

Fonts

Typical styles for fontsfont-familycolorfont-weightbackground-colorfont-stylefont-decoration

Colors / Backgrounds

Can use colors and backgrounds in more ways than possible in HTMLbackground of any item

Can specify color using rgb directly without hex triplet

Can control tiling of background

Selectors

CSS properties and values provide features to be controlled

Selectors specify where in the document those styles will be applied

Types of selectors

element namesh1 { font-family: Courier, monospace; }

element containmenttable tr th a { font-decoration: none; }

pseudo-classesa:visited { color: blue; }

not widely-available>, +, [attribute="value"]

Pseudo-elements

pseudo-elementsselectors ≠ HTML elementsstill = logical structure

Examplep:first-letter { color: red; }

Not widely available:before, :after

Classes

Selectors with user-defined behavior usually in conjunction with HTML element

Inside HTML element class attribute

In CSS selector = element_name.class_name Also .class_name for same class in different

elements Example

yes/no list items

Classes

While writing HTML Identify different areas of page requiring

different treatment Come up with descriptive class names for

each Insert class attribute in HTML elements

While writing CSS create styles for each class associate with appropriate class selector

Id

Also a selectorbut unique to a single element

Example#sidebar { background-color: grey; }

Generic blocks

How to identify a chunk of contentthat is not an HTML element already

Two optionsparagraph-like? Use "div"

• block format

word-like? Use "span"• in-line format

Examples

Positioning

With CSS, we can control where an element appears

Tables for layout not necessaryin theory

Box model

padding

border

margin

Block-level element

Positioning Options

normal blocks stacked vertically in-line arranged horizontally with wrapping

relative calculate where the block should have been

and apply offset absolute

put block at a precise position float

make block independent and wrap other content around it

Layering

Boxes can overlap each othertransparent regions will show through

To achievenegative marginabsolute or relative position on top

Examples

layering with margins layering with absolute positioning

Frames

We can get "frame-like" appearancewith absolute positioning

Example

Frame

Exercise

Elements

bullet.gif

picture7.gif

circlesbg.gif

confetti.gif

Final Project

Tourism site Requirements (9 pages total)

Home page Order form Slide show

Presentation 6/9 Must use

CSS Javascript

Final Project Milestones

5/12Proposal: destination / team members

5/26Last day for design review

6/9Presentations (8:45 am)Must all be present