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.
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
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
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.”
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
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)
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