CSS = Cascading Style Sheet CSS consists of rules to display, style and decorate HTML elements Why CSS ? – Separate decoration from HTML markup (Ex :,,…) – Help web development faster – Easy to maintain and fix bugs – Easy to change website layout & interface What is CSS ?

Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared. Box model

A fixed layout is a layout with a fixed width Fixed layout Pros : Easy to create Width are the same in all browser No need min-width, max-width Cons : Additional spaces in high resolution Scrollbars when in low resolution Examples :

Fluid (liquid) layout is a layout that adjust to the user’s screen resolution Fluid layout Pros : More use friendly No unused spaces Eliminate horizontal scrollbar Cons : May look awful in some resolution Image, video may have multiple width Additional space while less content in large resolution Examples : m

CSS float allows element to be pushed to left or right so that other elements will wrap on it Ex : img{ float:left;} Float usually used for images and layout To turn off other elements to wrap around float, use {clear:both} or clearfix (google it) Floating element

Layout using float

Using {position} we can place an element anywhere on webpage – position : static; – position : fixed; – position : relative; – position : absolute; Positioning element

Static position static — The default positioning of all elements. Static elements remain in the normal page flow and do not move.

Fixed position fixed — Element will be taken out of the normal flow of the page, and attach to viewable page edges fixed element will stay visible even when the page is scrolled. Internet Explorer 6 does not support fixed positioning without !DOCTYPE

Demo fixed element PositionFixed.html

Relative position relative — A relative element will be positioned according to its static place holder relative element will have a place holder to mark its original place

Demo relative element PositionRelative.html

Absolute position absolute — An absolute-positioned element will be taken out of the normal flow of the page & placed according to its nearest relative-positioned parent. By default, will has position:relative;

Demo absolute position AbsolutePosition.html

Overlap element If 2 element are overlapped when displaying, z-index will be used to specify their orders z-index can be positive or negative Higer z-index will be in front of others

Demo overlap PositionOverlap.html

A technique to replace text with image using CSS Toosols online.header{ overflow:hidden; text-indent:-9999px; background:url(logo.gif) no-repeat; } Image replacement

Sliding door

Rounded box

IE6 and below has many CSS bugs Some bugs : – PNG transparency – IE Box model – Double margin bug – No min/max width/height Cross browser issue

Float left (right) element that has left (right) margin will have double margin Demo : Fix : – Add display:inline; to the floated element Double margin bug

E6 ignores the min-height property and instead treats height as the minimum height Demo : Fix : /*For IE6*/ #container {min-height:200px; height:200px;} /*For all other browsers*/ html>body #container { height:auto;} Min Height

100% height doesn’t effect in IE6 Fix : – Specify a fixed height of its parent element. – Need element fill the full-length of your page, apply height:100%; to both the html and body elements /*100% height of the parent element for IE6*/ #parent {height:500px;} #child {height:100%;} /*100% of the page length for IE6*/ html, body {height:100%;} #fullLength {height:100%;} 100% Height

Floated elements drop below their expected position when their total width exceeds the content’s width of its container. Demo Fix : – Wrap content in a fixed-width container large enough to accommodate the content, or remove the width from the static block. Float Drops

Container will not wrap floated elements properly Fix : – Add width & overflow : hidden to its container Clear float

When text is next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specified Fix : – When in IE6, apply margin-left : -3px for text 3px text jog bug

Identify IE6 to apply CSS or Js fix : – Using Conditional Comments For Internet Explorer Use Javascript to identify IE6 – Use IE 6 unsupported CSS Selectors IE filter

Strategy to avoid IE issue : 1.Start working with an standard compliant browser (like Firefox) 2.Use the right DOCTYPE 3.Validate your code 4.Use CSS reset first 5.Use progressive enhancement Way to fix : 1.Use IE filter 2.Use javascript framework 3.Use IE6 javascript fix 4.Use IE6 hack (not recommend) How to overcome IE6 issue

A collection of common CSS for reuse Framework can divide into : – reset – baseline – forms – typography – grid Some framework : – Blue Print – YUI Grids – YAML ( Yet Another Multicolumn Layout) CSS framework

Pros : – DRY (Don't repeat yourself) – Basic concept that makes it easy for other people to understand the style – Implicitly use coding/naming guidelines Cons : –... that are not yours – You have to learn the framework – Possible semantical implications – Might offer too much Pros and Cons