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 language not intended for display CSS can be used must provide all display information

CSS in XML, cont'd HTML distinguishes in-line vs block elements vs 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 styles setting a style for the "body" element changes the whole document same true for parent elements in XML

Embedded style style is declared within a given XML document plus style information centralized minus can't be reused on other documents no standardized way to do this

External a separate document "style sheet" is used documents link to the style sheet plus style can be shared across documents minus another document to manage & distribute

Stylesheet linking Processing instruction information for the rendering application not part of the document content Syntax

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 relationships a b a > b a + b designer-defined classes

CSS Pseudo-elements Pseudo-elements a class name that is pre-defined but isn't a tag Example first-line first-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 name identifies certain elements for styling in document, in stylesheet, foo.bar ID must be unique in document use 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 other transparent regions will show through layering negative margin does this Boxes can be positioned absolutely also causes layering position: absolute specific position on page

Example

Break

SVG Scalable Vector Graphics Graphics graphical display of all sorts even UI Vector as opposed to "raster" Scalable important for multi-platform

SVG XML application Based on "paint/canvas" model A graphic is a set of painting operations layered on top of each other

Viewing SVG Browser plug-in Adobe (best) Corel Drawing tools CorelDraw Adobe Illustrator

Basic tools text line rect circle ellipse path

Attributes x, y start position fill the color of the contents stroke the color of the line / edge many others

Simple example a box containing text <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

A more complex example course logo

HTML embedding

Scalability All images are pixels rasterization When are pixels created? jpg, gif, png, etc. at creation time svg at display time Benefits no loss of clarity at high scale smaller 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 elements esp. text

Path example course logo with textPath

Grouping and transforming g element is used to group elements Reasons apply an attribute to all define a new coordinate system transform the group

Transform examples Coordinate shift Skew

Combining CSS and SVG SVG elements can 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 images clickable image maps But image map separate from image

Linking, cont'd A element as in HTML but based on XLink standard Example 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 scripted using JavaScript / ECMAScript Same techniques as used in HTML event handling via onclick, onmouseover, ec. Difference now interacting with SVG DOM not HTML DOM

Scripting examples course logo with roll-over mines

Animation SVG also supports animation uses 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

Milestones 2/6 team domain 2/23 schema draft document draft 3/15 final presentation

Next week Midterm open book, notes covers XML syntax validation CSS SVG