Advanced CSS:

Beyond Simple Classes

Katya Sadovsky
katya@uci.edu

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

 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

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;

Example: selector

.uportal-text-small { declaration
color : Black;
font-family : Verdana, Geneva, Arial, Helvetica;
font-size : 10px; }

property

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

* Universal selector: matches any element.

E Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P).
EF 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".

Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated
E[foo~="warning"]
values, one of which is exactly equal to "warning".

Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of
E[lang|="en"]
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".
Pseudo-class selector: matches element of type E if it is in (human) language c (the document
E:lang(c)
language specifies how language is determined).

E:first-child 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
E:link, E:visited
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.

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 ():
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
University of California  Irvine
 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

content

border

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

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

 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

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 | table-row | table-column-
group | table-column | table-cell | 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:
– 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

University of California  Irvine