Cascading Style Sheets

Robin Burke

ECT 270

Outline

Midterm The Layout Debate CSS properties

Fonts Alignment Color

CSS selection selectors pseudo-classes classes, ids div and span

Midterm

10/20 5:45 pm

closed-bookHTML/CSS handout distributed

Group exercise

Part A

The Great Layout Debate

PuristW3C

Pragmatistweb designers

A solution

A separate standard for defining style Styles can be defined at different

placesdocumentsitelocal device or clientuser preference

What is a style?

An association between a set of display propertiesa logical unit of HTML content

Notdocument content

Some exceptionsnumbered lists, captions, etc.

Result

HTML goes back to defining structure Layout and display decisions encoded

in the stylesheet Designer can easily change page

format without affecting HTML

Cascading

Author User Client Also possible to label styles as

"important"

Inheritance

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

changes the whole document

In-line styles

part of individual tags plus

benefits of new CSS attributesstyle declared where it is used

minusdoesn't separate content from displayglobal changes not simplified

Embedded style

style is declared within a given page plus

style information centralized minus

can't be reused on other pages

External

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

plusstyle can be shared across pages

minusanother document to manage &

distribute

Structure of CSS

selector { attribute:value; } Example

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

Examples

in-line style embedded style linked style

CSS Rules: Fonts

Fonts are very complex platform-specific copyrighted different standards

Multi-dimensional size weight style ornament family

Font families

Categories serif sans-serif monospace cursive

Specific fonts Times Roman Arial Courier

font-family styles

Best practicePC font, Mac font, generic font;

Examplefont-family: Arial, Helvetica, sans-serif;

Font sizes

Options Relative Absolute Units

• in, px, em, pt, pc Examples

font-size: larger font-size: 12 pt font-size: 50 px font-size: small

Spacing

Can control letter and line spacingletter-spacingword-spacingline-height

Alignment

text-alignhorizontal alignmentlike "align" attribute

vertical-alignlike "valign" attributebut more possibilities

Other font style choices

text-weight controls boldness

text-decoration underlining, strike-through

text-transform uppercase, lowercase

font-variant small-caps

font-style italic

CSS Rules: Colors

What can be colored?textbackgroundlinks

Optionscolor namesRGB triplets

• hex or decimal

Text and link color

color changes the text color example

• color: rgb(153,102,6)• color: #FFEECC

links can have state-dependent colors link – unvisited visited – visited active – while being clicked hover – while the cursor is there

Link colors

Handled via "pseudo-classes" relative to a elementa:linka:visited

Examplea:link { color: red; }a:visited { color: blue; }

Link color example

a:link { color: red; }

a:visited { color: blue; text-decoration: none; }

a:active { font-weight: bolder; }

a:hover { color: green; }

Background color

Background of any element can be setnot true in HTML

Background images

Background imageslimited in HTML

• either large or tiled

With CSSTotal control over the background

image

Example

Background options

Lists

can choose different kinds of bullets can control nesting behavior Example

CSS Rules: Selectors

any html element name element with particular attribute

td[align="center"] 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 an HTML tag Example

first-linefirst-letter

Example

table caption { background-color: blue;

color: white; }

tr td { background-color: yellow; }

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

CSS Classes and Ids

A class is a user-defined name identifies certain elements for styling

• li.yes

Another example code in <pre> elements

ID must be unique in document use for identify a single element to have a

particular style #id

CSS Blocks

What if I have a segment that isn't an HTML element?

Examplescaption and program listingemphasized text

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

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

Group exercise

Part B

Next week

Midterm Web design