Cascading Style Sheets

Robin Burke

ECT 360

Outline

Midterm CSS

CSS selection Positioning

SVG Final project

Midterm

2/2 5:45 pm

open book

What is a style?

An association between a set of display properties a logical unit of document content

Not document content

Some exceptions numbered lists, captions, etc.

CSS originated for adding style to HTML documents

Benefit

HTML goes back to defining structure Layout and display decisions encoded

in the stylesheet Designer can easily change page

format without affecting HTML

Syntax of CSS

selector { attribute:value; } Example

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

XHTML example

CSS in XML

XML is a data-interchange languagenot intended for display

CSS can be usedmust provide all display information

CSS in XML, cont'd

HTML distinguishes in-line vs block elements<b> vs <p>crucial for layout

XML has no such distinction

Display attribute

block display content in a separate chunk

in-line display content as part of the parent element

list-item display content as part of a list

none hide content

Inheritance

Elements inherit their stylessetting a style for the "body" element

changes the whole documentsame true for parent elements in XML

Embedded style

style is declared within a given XML document

plusstyle information centralized

minuscan't be reused on other documentsno standardized way to do this

External

a separate document "style sheet" is useddocuments link to the style sheet

plusstyle can be shared across documents

minusanother document to manage &

distribute

Stylesheet linking

Processing instructioninformation for the rendering

applicationnot part of the document content

Syntax<?xml-stylesheet type="text/css"

href="course.css"?>

Examples

external style

Lists

can choose different kinds of bullets can control nesting behavior Example

CSS Rules: Selectors

any element name element with particular attribute

foo[bar="baz"] not implemented in IE 6.0

element relationshipsa ba > ba + b

designer-defined classes

CSS Pseudo-elements

Pseudo-elementsa class name that is pre-defined but

isn't a tag Example

first-linefirst-letter

Also not implemented in IE 6.0

Examples

section section-number {font-weight: bold; }

section[type="night"] { color: blue; }

instructor:first-letter { font-size:large; color: red; }

CSS Classes and Ids

A class is a user-defined nameidentifies certain elements for stylingin document, <foo class="bar">in stylesheet, foo.bar

ID must be unique in documentuse for identify a single element to

have a particular style#id

Examples

#me { font-weight: bold; }

section.day { color: red; }

section.night { color: blue; }

Alignment and positioning

padding

border

margin

Block-level element

Layering

Boxes can overlap each othertransparent regions will show throughlayering

• negative margin does this

Boxes can be positioned absolutelyalso causes layering

• position: absolute• specific position on page

Example

Break

SVG

Scalable Vector Graphics Graphics

graphical display of all sortseven UI

Vectoras opposed to "raster"

Scalableimportant for multi-platform

SVG

XML application Based on "paint/canvas" model A graphic is a set of painting

operationslayered on top of each other

Viewing SVG

Browser plug-inAdobe (best)Corel

Drawing toolsCorelDrawAdobe Illustrator

Basic tools

text line rect circle ellipse path

Attributes

x, ystart position

fillthe color of the contents

strokethe color of the line / edge

many others

Simple example

a box containing text<svg width="475px" height="75px"

xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect

fill="blue" stroke="black" stroke-width="5"

x="0" y="0" width="475" height="75"/>

<text x="10" y="20"

fill="white" font-size="18">

Hello world

</text>

</svg>

A more complex example

course logo

HTML embedding

Scalability

All images are pixelsrasterization

When are pixels created?jpg, gif, png, etc. at creation timesvg at display time

Benefitsno loss of clarity at high scalesmaller files esp. for simple drawings

Example

scaling JPEG vs SVG

Path

a way to represent complex shapes straight line curved

Example

ducks

Abstract path

A path need not be drawn Can be used to arrange other

elementsesp. text

Path example

course logo with textPath

Grouping and transforming

g element is used to group elements Reasons

apply an attribute to alldefine a new coordinate systemtransform the group

Transform examples

Coordinate shift Skew

Combining CSS and SVG

SVG elementscan have CSS styles applied

Internal or external style Familiar properties

color, font-family, etc. also SVG specific

fill, stroke, fill-opacity, etc.

CSS example

course logo internal course logo external

Linking

With imagesclickable image maps

Butimage map separate from image

Linking, cont'd

A elementas in HTMLbut based on XLink standard

Example<a xlink:href="myurl">

<rect ...></rect>

</a>

Clicking in the rectangle goes to URL

Linking example

course logo with link

Filters

Graphical effects created by filters Can be applied under SVG control A complex topic

Filter effects blur lighting compositing blending convolution noise, etc.

Filter example

course logo with specular effect Steps

get the silhouette of the image and blur it offset blur to create shadow apply lighting to blur to get highlight trim highlights to fit image add highlight back to original image combine with shadow

Scripting

SVG graphics can be scriptedusing JavaScript / ECMAScript

Same techniques as used in HTMLevent handling via onclick,

onmouseover, ec. Difference

now interacting with SVG DOMnot HTML DOM

Scripting examples

course logo with roll-over mines

Animation

SVG also supports animationuses some ideas from SMIL

Animation example

course logo spinning

Final project

XML application your choice should have 50 objects

Schema Transformations

full listing summary SVG

Display controlled by CSS

Final project, cont'd

SchemaDocument

Transform #1(XSLT)

Full Listing(XHTML)

Full ListingStyle (CSS)

Full ListingDisplay

Transform #2(XSLT)

Summary(XHTML)

SummaryStyle (CSS)

SummaryDisplay

Transform #3(XSLT)

GraphicalSummary

(SVG)

GraphicalStyle (CSS)

GraphicalDisplay

validates

Milestones

2/6teamdomain

2/23schema draftdocument draft

3/15final presentation

Next week

Midterm open book, notes covers

XML syntaxvalidationCSSSVG