Advanced CSS:
Beyond Simple Classes
Katya Sadovsky
katya@[Link]
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).
[Link] 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 [Link]
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:
[Link] {
height: 100%;
…
}
– Firefox:
[Link]:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
University of California Irvine
Useful URLs
• CSS resources:
– [Link]
– [Link]
– [Link]
– [Link]
– [Link]
– [Link]
– [Link]
– [Link]
– [Link]
University of California Irvine