Post on 01-Jan-2016
• CSS = Cascading Style Sheet• CSS consists of rules to display, style and
decorate HTML elements• Why CSS ?– Separate decoration from HTML markup (Ex :
<b>,<font>,…)– 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 : http://www.lebloe.comhttp://www.floridaflourish.com
• 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 : http://www.blossomgraphicdesign.com
• 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, <body> 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
<h1 class=“header"> Toosols online </h1>.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 DOCTYPE3. Validate your code4. Use CSS reset first5. Use progressive enhancementWay to fix : 1. Use IE filter2. Use javascript framework3. Use IE6 javascript fix4. 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