This document provides an overview of CSS essentials. It begins with an agenda that covers XHTML and CSS, CSS selectors, visual formatting models, basic and advanced CSS samples, and CSS tricks and hacks. The document then defines what CSS is used for and the separation of concerns between HTML and CSS. It covers basic and advanced CSS selectors including type, class, ID, and pseudo-class selectors. Box model, positioning, inheritance, and specificity are explained. Examples of block-level and inline-level elements are given along with common units and values in CSS. The document concludes with examples of basic and advanced CSS code and discusses various CSS hacks for cross-browser compatibility.

1. CSS Essentials
For the one who care about layout
Tin@BrowBag 3 June 2011

2. Agenda
XHTML & CSS
CSS selector
Visual formatting & models
Basic sample
Advanced sample
Tricks and hacks

3. CSS define the visual model
Layout
Typography
Units
Rendering
Graphics
etc.

4. Era of CSS
Before the movable- Moden publishing
dawn type
CSS 3

5. Agenda
XHTML & CSS
CSS selector
Visual formatting & models
Basic sample
Advanced sample
Tricks and hacks

6. XHTML and CSS
XHTML => data (structure)
CSS => presentation (visual)
Separation of concerns
Best practices:
Use proper HTML tags
Use meaningful class/id name (red-text warn-text)
Minimizing HTML structure and CSS rules

7. Example of html

8. Agenda
XHTML & CSS
CSS selector
Visual formatting & models
Basic sample
Advanced sample
Tricks and hacks

9. CSS selector - Rule Structure
Selector Declaration block
Declaration Declaration
H1 { color: red; background: yellow; }
Property Value Property Value

10. CSS selector - Basic
Element Selector
Type selector: h1 { font-weight: bold;}
Descendant selector: li a { text-decoration: none; }
Class Selector
.warn { color: red }
.full-width { width: 100% }

11. CSS selector - Basic
ID Selector
#sidebar { float: right; width: 27em; }
Pseudo class
a:link { color: blue; }
li:hover { background-color: grey; }
input:focus { background-color: yellow; }
All pseudo class:
:active, :after, :before, :first-child, :first-letter, :first-
line, :focus, :hover, :lang, :link, :visited

12. CSS selector - advanced
Universal (wildcard) Selector
* { padding: 0; margin: 0; }
Child selector: #nav > li
Adjacent Sibling selector: h1 + p
Simple Attribute selector:
div[class]
input[type=”input”], div[id~=”container”] ...

13. CSS Rule Specificity (Weight)
Four level of specificity
level 1(1000): inline style, <div style=”color: red”>
level 2(0100): ID selector
level 3(0010): class, pseudo class, attribute selector
level 4(0001): element selector, universal selector
Special level: !important (except IE6)
Draw game: last declaration win

14. CSS Rule Specificity
Rule Weight Weight (digit)
Style=”” 1, 0, 0, 0 1000
#wrapped #content {} 0, 2, 0, 0 200
#content .date {} 0, 1, 1, 0 110
div#content {} 0, 1, 0, 1 101
#content {} 0, 1, 0, 0 100
p.comment .date {} 0, 0, 2, 1 21
p.comment {} 0,0, 1, 1 11
div p {} 0, 0, 0, 2 2
p {} 0, 0, 0, 1 1

15. CSS: Inherit and cascading
Inheritance: Inherit ancestor element’s style, color,
font-size (font*)
descendants in dom tree inherit ancestor’s style
none inherit: padding, margin, border, background
no specificity (lowest priority)

16. CSS: Inherit and cascading
Cascading: different level of css rule composite
together
all match selector declarations will be applied
browser default style
Inheritance
selector declarations from lower to higher specificity
the styles with !important
later property overwrite former property

17. How to use them?

18. Real example (by Firebug)

19. Agenda
XHTML & CSS
CSS selector
Visual formatting & models
Basic sample
Advanced sample
Tricks and hacks

20. Element Classification
Nonreplaced Elements
The majority of HTML elements are NE
Their content box is generate by itself
Replaced Elements
content box is replaced by something not directly
represented by document content
Image, flash object, input element

21. Everything start form the ‘display’ model
“The display property
specifies the type of box
an element should
generate.”

22. Era of CSS
Before the movable- Moden publishing
dawn type
CSS 3

23. What’s the box?

24. Basic Box model
margin: top right bottom left;
border
padding
width
Content Area
height

25. Basic Box model Background
margin: top right bottom left;
border
padding
width
Content Area
height

26. Box model example (in firebug)

27. IE box model quirks
W3C
Actual width = margin * 2 + padding*2 +
border * 2 + width (css property)
content-width = width (css property)
IE
Actual width = margin * 2 + width (css
property)
content-width = width - padding * 2
This file is licensed under the Creative Commons Attribution ShareAlike 3.0 Unported (http://en.wikipedia.org/wiki/Image:W3C_and_Internet_Explorer_box_models.png)

28. So... for IE compatibility
Normally, don’t use padding and margin on same
element, use it in different level
Make IE doesn't work in quirks-mode
Has-layout=true (zoom: 1, but can’t pass w3c validation)
Don’t use width: 100% and padding on same element (for
safty, use 95% or other safe value)

29. Element Display Roles - Block Level
Block-Level is a element with property display: block
It generate a box fills its parent’s content area
can’t have other element on it’s side
it generate breaks before/after it’s box
Use width/height to determine the size
min-width/max-width
Div is block element by default
Use overflow control overflow content display/hide

30. Block-Level Layout
It generate a rectangular box called element box, which
describes the amount of space occupied by an element
Background extends to the outer edge of the border
Only margins, height, and width may be set to auto
Only margins can be given negative values
Padding & borders of element box default to 0 & none
Width property define only the width of content area

31. Block box formating
margin: top right bottom left;
border
padding
width
Content Area
height

32. Block box formating
The containing block
border
padding
auto margin width
Content Area
height
negative margin
border
padding
width
Content Area
height
border
padding
fixed margin width
Content Area
height
Fixed width

33. Element Display Roles - Inline Level
Inline-level is a element with property display: inline
It generate element box within a line of text and do not
break up the flow of that line, continues layout
The box size is determined by it’s content
inline element can only contain inline element
Margin has no effect here
line-height and vertical-align
inline-height, inline-width (not recommended)
font-size

34. Inline-Level Layout
content
area inline element inline box
content area half-leading
which is Strongly emphasized and which is

35. Inline-Level Layout
content
area inline element inline box
content area half-leading
which is Strongly emphasized and which is
baseline

36. Inline box formating
The containing block
which is Strongly emphasized which is
beijing oepn party is good

37. Normal layout flow

38. Other Element Display Roles
Inline-block: it has no breaks, but you can specific
width and height on it
display: none (totally hide the content, remove it from
layout flow)
about visibility: hide (do not display the content, but
still take effect in layout flow)

39. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts
Future Layout Modules

40. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts
Future Layout Modules

41. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts
Future Layout Modules

42. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts
Future Layout Modules

43. Steal from http://www.slideshare.net/stopsatgreen/the-home-of-tomorrow-css-layouts
Future Layout Modules

44. Control the layout
Floating Layout Absolute positioning
Left, right float Fixed positioning
Clear float z-index
Shrink to fit Table Layout
Positioning Layout Fixed table layout
Static positioning Automatic table layout
Relative positioning

45. Values and Units
Color Values Length Values
#RRGGBB Absolute length units
#RGB Inches (in)
rgb(rrr.rr%, ggg.gg%, Centimeters (cm)
bbb.bb%)
Millimeters (mm)
rgb(rrr, ggg, bbb)
Points (pt) 12pt = 1in
keyword (black, blue ...)
Picas (pc)

46. Values and Units
Length Values
Relative length units
em-height (em)
x-height (ex)
Pixels (px)
Percentage Values (%)

47. Agenda
XHTML & CSS
CSS selector
Visual formatting & models
Basic sample
Advanced sample
Tricks and hacks

48. CSS basic example
Style for font (size, weight, color, style, family)
Style for link
love/hate
rollover (spry)
Style for float image and clear
Style for background

49. Agenda
XHTML & CSS
CSS selector
Visual formatting & models
Basic sample
Advanced sample
Tricks and hacks

50. CSS Advanced example
Image button rounded corner
horizontal menu fixed width
css tooltip mountain corner
slide door tab 4 wrapped bg images
4 corner images
css rounded corner

51. Agenda
XHTML & CSS
CSS selector
Visual formatting & models
Basic sample
Advanced sample
Tricks and hacks

52. Hacks and Tricks
Most hacks is for IE Tricks for IE
Star hack (6) min-width/width(6)
Underscore hack (7) <!--[if lte IE 7]>
!important (6) <![endif]-->
> child selector (-5, -6)
property selector
has-layout? zoom: 1

53. You are coming a long way,
baby

54. Thanks!