1. University of California  Irvine Advanced CSS: Beyond Simple Classes Katya Sadovsky katya@uci.edu

2. University of California  Irvine University of California, Irvine Located in Southern California Year Founded: 1965 Enrollment: over 24K students 1,400 Faculty (Academic Senate) 8,300 Staff 6,000 degrees awarded annually Carnegie Classification: Doctoral/Research – Extensive Extramural Funding - 311M in 2005-2006 Undergoing significant enrollment growth

3. University of California  Irvine Agenda Brief overview of the Cascading Style Sheets (CSS) 2 syntax Selectors & cascading Block vs Inline elements CSS box model Element presentation: float, position, etc. Generated content Tips and tricks

4. University of California  Irvine What is CSS Cascading Style Sheets, or CSS, are a series of instructions that specify how markup elements should appear on a Web page. For the purposes of this presentation, I will focus on CSS level 2 specification.

5. University of California  Irvine The Sad Truth About IE Internet Explorer (even IE7) is still not CSS compliant Some of the areas not supported: –Child selectors –Attribute selectors –Counters

6. University of California  Irvine Brief overview of the CSS2 syntax Ruleset syntax : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S* S* = [ \t\r\n\f]+ declaration = property ':' S* value; Example:. uportal-text-small { color : Black; font-family : Verdana, Geneva, Arial, Helvetica; font-size : 10px; } selector declaration property

7. University of California  Irvine Selectors & cascading Selectors are a way to match styles to elements in the document tree Different types of selectors: –Universal selector –Type selectors –Descendant selectors –Child selectors –Adjacent sibling selectors –Attribute selectors –ID selectors –Pseudo-elements –Pseudo-classes Spaces matter! –P#myid – selects a P element with id equal to “myid” –P #myid – selects an element with id equal to “myid” that is a descendant of P

8. University of California  Irvine Selectors & cascading PatternMeaning *Universal selector: matches any element. EType selector: matches any E element (i.e., an element of type E; e.g. H1 or P). E FDescendant selector: matches any F element that is a descendant of an E element. E > FChild selector: matches any F element that is a child of an element E. E + FAdjacent siblings selector: Matches any F element immediately preceded by an element E. E[foo]Attribute selector: matches any E element with the "foo" attribute set (whatever the value). E[foo="warning"]Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning". E[foo~="warning"] Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". E[lang|="en"] Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en“ (e.g. en-US). DIV.warningHTML only. The same as DIV[class~="warning"]. E#myidID selector: matches any E element ID equal to "myid". E:lang(c) Pseudo-class selector: matches element of type E if it is in (human) language c (the document language specifies how language is determined). E:first-childPseudo-class selector: matches element E when E is the first child of its parent. E:link, E:visited Pseudo-class selector: matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). E:active, E:hover, E:focusDynamic Pseudo-class selector: matches E during certain user actions. E:first-line, E:first-letterPseudo-element selector: matches the first formatted line or letter of element E. Works in most browsers (incl. IE)

9. University of California  Irvine Cascading and Inheritance When there are multiple rules that could apply to the same element and/or property and media type, sort declarations on (): 1.Weight (normal, !important) and origin (author, user, user agent) normal: author -> user -> user agent !important: user -> author -> user agent NOTE: user agents supply a “default” style sheet 2.Selector specificity: more specific selectors have precedence 3.Order specified: styles specified later in the order have precedence

10. University of California  Irvine Cascading and Inheritance STYLE attribute blockLinked stylesheetImported stylesheet overrides A simplified view of the preceding “formula”:

11. University of California  Irvine Logical vs Physical Tags “Logical” tags convey the structure and semantic information of the document (H1-H6, P, STRONG) “Physical” tags specify the visual presentation of document elements but do not convey the meaning of the document or its parts (B, U, FONT, BR) Do not use physical tags to solely describe the visual presentation of content (be mindful of alternative user agents such as speech readers or text-only browsers)

12. University of California  Irvine Block vs Inline elements Block-level elements are presented visually as blocks; i.e. they generate a line break before and after themselves (,, etc) –Can contain other block-level and inline elements –Act as containing blocks for nested elements All other elements, are inline elements; no line breaks are generated before and after ( ) –Cannot contain other block-level elements “Replaced” elements are those that are replaced by the content they point to (,, etc)

13. University of California  Irvine CSS box model content padding margin border Also, see 3D diagram at http://www.hicksdesign.co.uk/journal/3d-css-box-modelhttp://www.hicksdesign.co.uk/journal/3d-css-box-model

14. University of California  Irvine Containing & Anonymous block boxes Block boxes can serve as containing blocks for child boxes –Note: if a block box has another block box inside it, then they are forced to have only block boxes inside it, by wrapping any inline boxes in an anonymous block box some text paragraph other text

15. University of California  Irvine Notes on boxes There are cases when adjacent margins collapse Relative positioning is calculated with respect to the content edge

16. University of California  Irvine Positioning schemes Positioning schemes in CSS include: –Normal flow (includes relative positioning) –Floating –Absolute positioning

17. University of California  Irvine Floating float property allows element boxes to be shifted to the right or left on the current line –Floated boxes are block boxes –Floated boxes are “pulled out” of the normal flow and repositioned –Must have explicit width –May overlap other boxes clear property specifies which side(s) of an element should NOT be adjacent to a floating box that is specified earlier in the document

18. University of California  Irvine Relative and Absolute Positioning position property: –static – box is positioned according to normal flow –relative – box is positioned relative to where it would have been placed in the normal flow –absolute – box is positioned relative to its containing block; these boxes are taken out of flow –fixed – box is fixed in relation to the viewport (a browser window or a printed page)

19. University of California  Irvine Element presentation display property controls what type of box is generated for an element –Values: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header- group | table-footer-group | table-row | table-column- group | table-column | table-cell | table-caption | none | inherit

20. University of California  Irvine Generated content CSS allows authors to generate content that is not part of the document tree using the following entities: –:before pseudo-element –:after pseudo-element –content property

21. University of California  Irvine Tips and tricks Trick for extending a DIV over floating child divs: –IE: div.main { height: 100%; … } –Firefox: div.main:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

22. University of California  Irvine Useful URLs CSS resources: –http://www.w3.org/TR/REC-CSS2/http://www.w3.org/TR/REC-CSS2/ –http://www.yourhtmlsource.com/stylesheetshttp://www.yourhtmlsource.com/stylesheets –http://meyerweb.com/eric/css/http://meyerweb.com/eric/css/ –http://webtips.dantobias.com/logical.htmlhttp://webtips.dantobias.com/logical.html –http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htmhttp://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm –http://www.w3.org/2005/Talks/11-steven-css-advanced/http://www.w3.org/2005/Talks/11-steven-css-advanced/ –http://www.hicksdesign.co.uk/journal/3d-css-box-modelhttp://www.hicksdesign.co.uk/journal/3d-css-box-model –http://greystate.dk/resources/css-boxmodel/http://greystate.dk/resources/css-boxmodel/ –http://www.csszengarden.com/?cssfile=062/062.csshttp://www.csszengarden.com/?cssfile=062/062.css