Advanced C SS: Bey ond Sim ple Cl asses

Katya Sadovsky

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

University of California  Irvine

• 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
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.

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

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;


selector declaration

.uportal-text-small {

color : Black; font-family : Verdana, Geneva, Arial, Helvetica; font-size : 10px; }

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

University of California  Irvine

Selectors & cascading
Pattern Meaning

* E EF E>F E+F E[foo] E[foo="warning"] E[foo~="warning"] E[lang|="en"] DIV.warning E#myid E:lang(c) E:first-child E:link, E:visited E:active, E:hover, E:focus E:first-line, E:first-letter

Universal selector: matches any element. Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P). Descendant selector: matches any F element that is a descendant of an E element. Child selector: matches any F element that is a child of an element E. Adjacent siblings selector: Matches any F element immediately preceded by an element E. Attribute selector: matches any E element with the "foo" attribute set (whatever the value). Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "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". 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). HTML only. The same as DIV[class~="warning"]. ID selector: matches any E element ID equal to "myid". Pseudo-class selector: matches element of type E if it is in (human) language c (the document language specifies how language is determined). Pseudo-class selector: matches element E when E is the first child of its parent. 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). Dynamic Pseudo-class selector: matches E during certain user actions. Pseudo-element selector: matches the first formatted line or letter of element E.

Works in most browsers (incl. IE)

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 ():
– 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 – – Selector specificity: more specific selectors have precedence Order specified: styles specified later in the order have precedence  Irvine University of California

Cascading and Inheritance
• A simplified view of the preceding “formula”:

STYLE attribute overrides <STYLE> block overrides Linked stylesheet overrides Imported stylesheet

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)

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 (<p>, <ul>, 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 (<span>) – Cannot contain other block-level elements • “Replaced” elements are those that are replaced by the content they point to (<img>, <applet>, etc)
University of California  Irvine

CSS box model
margin padding



Also, see 3D diagram at
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
<div> some text <p>paragraph</p> other text </div>

University of California  Irvine

Notes on boxes
• There are cases when adjacent margins collapse • Relative positioning is calculated with respect to the content edge

University of California  Irvine

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

University of California  Irvine

• 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
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)

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 | tablerow | table-column-group | table-column | tablecell | table-caption | none | inherit

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

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; }
University of California  Irvine

Useful URLs
• CSS resources:
– – – – – – – –
University of California  Irvine