Advanced Cascading Style Sheets (CSS) Lecture # July 2013

Agenda for Today’s Lecture Brief overview of the Cascading Style Sheets Selectors & cascading Block vs Inline elements CSS box model Element presentation: float, position, etc. Generated content Tips and tricks

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.

The Sad Truth About IE Internet Explorer (even IE9) is still not CSS compliant Some of the areas not supported: –Child selectors –Attribute selectors –Counters

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; } select or declarati on property

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

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease 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.

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

Cascading and Inheritance STYLE attribute blockLinked stylesheetImported stylesheet overrides A simplified view of the preceding “formula”:

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)

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)

CSS box model content padding margin border Also, see 3D diagram at

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

Positioning schemes Positioning schemes in CSS include: –Normal flow (includes relative positioning) –Floating –Absolute positioning

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

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)

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

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

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; }

Useful URLs CSS resources: – – – – – – – – –