Advanced CSS: Beyond Simple Classes

1
Advanced CSS Beyond Simple Classes

• Katya Sadovsky
• katya_at_uci.edu

2
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

3
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

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

5
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

6
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 Blackfont-family
  Verdana, Geneva, Arial, Helveticafont-size
  10px

selector
declaration
property
7
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!
• Pmyid 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

8
Selectors cascading
Works in most browsers (incl. IE)
9
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 -gt user -gt user
  agent!important user -gt author -gt user
  agentNOTE user agents supply a default style
  sheet
• Selector specificity more specific selectors
  have precedence
• Order specified styles specified later in the
  order have precedence

10
Cascading and Inheritance

• A simplified view of the preceding formula

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

12
Block vs Inline elements

• Block-level elements are presented visually as
  blocks i.e. they generate a line break before
  and after themselves (ltpgt, ltulgt, 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 (ltspangt)
• Cannot contain other block-level elements
• Replaced elements are those that are replaced
  by the content they point to (ltimggt, ltappletgt,
  etc)

13
CSS box model
Also, see 3D diagram at http//www.hicksdesign.co.
uk/journal/3d-css-box-model
14
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 ltdivgt some text
  ltpgtparagraphlt/pgt other textlt/divgt

15
Notes on boxes

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

16
Positioning schemes

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

17
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

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

19
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

20
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

21
Tips and tricks

• Trick for extending a DIV over floating child
  divs
• IEdiv.main
• height 100
• Firefox
• div.mainafter
• content ""
• display block
• height 0
• clear both
• visibility hidden

22
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.htm
  l.tutorial.htm
• http//www.w3.org/2005/Talks/11-steven-css-advance
  d/
• http//www.hicksdesign.co.uk/journal/3d-css-box-mo
  del
• http//greystate.dk/resources/css-boxmodel/
• http//www.csszengarden.com/?cssfile062/062.css