Adv anc e d

Cascading Style Sheets (CSS)

Lecture # 14

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

selector 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 & cascadingPattern Meaning

* Universal selector: matches any element.

E Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P).

E F Descendant selector: matches any F element that is a descendant of an E element.

E > F Child selector: matches any F element that is a child of an element E.

E + F Adjacent 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.warning HTML only. The same as DIV[class~="warning"].

E#myid ID 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-child Pseudo-class selector: matches element E when E is the first child of its parent.

E:link, E:visitedPseudo-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:focus Dynamic Pseudo-class selector: matches E during certain user actions.

E:first-line, E:first-letter Pseudo-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

<STYLE> block

Linked stylesheet

Imported stylesheet

overrides

overrides

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

CSS box model

content

padding

margin

border

Also, see 3D diagram at http://www.hicksdesign.co.uk/journal/3d-css-box-model

Containing & Anonymousblock 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>

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 AbsolutePositioning

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

– http://www.w3.org/TR/REC-CSS2/– http://www.yourhtmlsource.com/stylesheets– http://meyerweb.com/eric/css/ – http://webtips.dantobias.com/logical.html– http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm– http://www.w3.org/2005/Talks/11-steven-css-advanced/– http://www.hicksdesign.co.uk/journal/3d-css-box-model – http://greystate.dk/resources/css-boxmodel/

– http://www.csszengarden.com/?cssfile=062/062.css