HTML and CSS

MDST 3559: DataestheticsProf. Alvarado

02/08/2011

Business

• Revised syllabus– Will move from HTML to PHP – Then move down the stack into SQL

Review

• jEdit• HTML• Basic CSS• Touched on idea of documents as data

structures

CSS Box Model

Overview

• Data structures and transformations• Data, addressability, and paths• CSS selectors to control look and feel• CSS selectors to control behavior

• x

Structures

• We have seen three basic structures so far:– Linear sequence of content (e.g. news article)– Tree structure of source code (HTML)– Tabular structure of CSV

• How are these related?– What depends on what?– How are they combined?

Structures and Transforms

• The news article is an interpreted version of the tree– The tree is transformed into a sequence by means

of rules defined by CSS and other standards• CSV is actually a tree as well– Table• Row +

– Cell +

Where the number of cells is the same throughout

• x Interpretation

How do the rules work?

What does “interpretation” mean in this context?

“Interpretation”

• Every data structure consists of elements• In a data structure, every element has an

address• A transformation is achieved by applying one

or more rule to a data structure• Rules reference elements by address– Either directly or by means of patterns ...

Example transform rules

• For every element of pattern X, display using font Y

• For every element at location R and C, express as a point on a graph at position X and Y

The key idea is selection

What to pick from the whole and what to do with it

So, how does CSS do this?

How does it select?

With Selectors

• Patternselector {

key: value;}

• Examplebody {

font-size: 12pt;}

CSS Selectors: Basic

XElements of type X

#XElement with ID X

.XElements of Class X

*Every element

X Y Y is child of X

X > YY is immediate child

X + YY follows X

X ~ YY immediately follows

CSS Selectors: Attributes

X[title]X has title

X[href=“foo”]X has href of ‘foo’

X[href*=”foo"]href contains ‘foo’

X[href^="http"]href begins with ...

X[href$=".jpg”]href ends with

X[data-*="foo"]Attribute matches

X[foo~="bar"]Attribute among valuese.g. attr=“v1 v2 v3”

CSS Selectors: Pseudo

X:linkunclicked anchor

X:visitedclicked anchor

X:hoveron mouse hover

X:checkedchecked input

X:beforeX:after

Before and after the element

Works with the content property

E.g. content:”foo”;

CSS Selectors: Double Colon

• X::first-letter• X::first-line

Exercise• Download Aristlotle’s Poetics, Section I, Parts I & II• Mark up using DIVs with following classes and IDs

#front-matter#(title).creator +, #(role)#(date)

#content.section +, #(section-N)

.section-title

.part +, #(part-N).part-titlep +

Exercise (cont’d)

• Then create a CSS element in the header to style each class and ID

• Vary the following properties– font-size– font-weight– font-family– padding– margin– first-letter of a section

Assignment (to be posted)• Create a page collection in your STUDIO1 directory with the following items:

– Main page main1.html– Topic page 1 main1-topic1.html– Topic page 2 main1-topic2.html

• For each page, create a TITLE element and an H1 element, titling each page as your wish.

• In Topic page 1– Embed two visualizations– Write 250 words of context

• In Topic page 2– Create a gallery of 4 images using a 2 x 2 tables

• Create a common style sheet for each page and define font and color styles for the following elements:– BODY, H1, and P

• Create a common menu in each page that links to the other pages