Mdst 3559-02-08-css


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mdst 3559-02-08-css

  1. 1. HTML and CSS<br />MDST 3559: DataestheticsProf. Alvarado02/08/2011<br />
  2. 2. Business<br />Revised syllabus<br />Will move from HTML to PHP <br />Then move down the stack into SQL<br />
  3. 3. Review<br />jEdit<br />HTML<br />Basic CSS<br />Touched on idea of documents as data structures<br />
  4. 4. CSS Box Model<br />
  5. 5. Overview<br />Data structures and transformations<br />Data, addressability, and paths<br />CSS selectors to control look and feel<br />CSS selectors to control behavior<br />
  6. 6. x<br />
  7. 7. Structures<br />We have seen three basic structures so far:<br />Linear sequence of content (e.g. news article)<br />Tree structure of source code (HTML)<br />Tabular structure of CSV<br />How are these related?<br />What depends on what?<br />How are they combined?<br />
  8. 8. Structures and Transforms<br />The news article is an interpreted version of the tree<br />The tree is transformed into a sequence by means of rules defined by CSS and other standards<br />CSV is actually a tree as well<br />Table<br />Row +<br />Cell +<br />Where the number of cells is the same throughout<br />
  9. 9. x<br />Interpretation<br />
  10. 10. How do the rules work?<br />What does “interpretation” mean in this context?<br />
  11. 11. “Interpretation”<br />Every data structure consists of elements<br />In a data structure, every element has an address<br />A transformation is achieved by applying one or more rule to a data structure<br />Rules reference elements by address<br />Either directly or by means of patterns ...<br />
  12. 12. Example transform rules<br />For every element of pattern X, display using font Y<br />For every element at location R and C, express as a point on a graph at position X and Y<br />
  13. 13. The key idea is selection<br />What to pick from the whole and what to do with it<br />
  14. 14. So, how does CSS do this?<br />How does it select?<br />
  15. 15. With Selectors<br />Pattern<br />selector {<br />key: value;<br />}<br />Example<br />body {<br /> font-size: 12pt;<br />}<br />
  16. 16. CSS Selectors: Basic<br />X<br />Elements of type X<br />#X<br />Element with ID X<br />.X<br />Elements of Class X<br />*<br />Every element<br />X Y <br />Y is child of X<br />X > Y<br />Y is immediate child<br />X + Y<br />Y follows X<br />X ~ Y<br />Y immediately follows<br />
  17. 17. CSS Selectors: Attributes<br />X[title]<br />X has title<br />X[href=“foo”]<br />X has href of ‘foo’<br />X[href*=”foo"]<br />href contains ‘foo’ <br />X[href^="http"]<br />href begins with ...<br />X[href$=".jpg”]<br />href ends with<br />X[data-*="foo"]<br />Attribute matches<br />X[foo~="bar"]<br />Attribute among values<br />e.g. attr=“v1 v2 v3”<br />
  18. 18. CSS Selectors: Pseudo<br />X:link<br />unclicked anchor<br />X:visited<br />clicked anchor<br />X:hover<br />on mouse hover<br />X:checked<br />checked input<br />X:before<br />X:after<br />Before and after the element<br />Works with the content property<br />E.g. content:”foo”;<br />
  19. 19. CSS Selectors: Double Colon<br />X::first-letter<br />X::first-line<br />
  20. 20. Exercise<br />Download Aristlotle’s Poetics, Section I, Parts I & II<br />Mark up using DIVs with following classes and IDs<br />#front-matter<br />#(title)<br />.creator +, #(role)<br />#(date)<br />#content<br />.section +, #(section-N)<br />.section-title<br />.part +, #(part-N)<br />.part-title<br />p +<br />
  21. 21. Exercise (cont’d)<br />Then create a CSS element in the header to style each class and ID<br />Vary the following properties<br />font-size<br />font-weight<br />font-family<br />padding<br />margin<br />first-letter of a section<br />
  22. 22. Assignment (to be posted)<br />Create a page collection in your STUDIO1 directory with the following items:<br />Main page  main1.html<br />Topic page 1  main1-topic1.html<br />Topic page 2  main1-topic2.html<br />For each page, create a TITLE element and an H1 element, titling each page as your wish.<br />In Topic page 1<br />Embed two visualizations<br />Write 250 words of context<br />In Topic page 2<br />Create a gallery of 4 images using a 2 x 2 tables<br />Create a common style sheet for each page and define font and color styles for the following elements:<br />BODY, H1, and P<br />Create a common menu in each page that links to the other pages<br />