A barebones HTML5 layout with a sticky page footer. Just change the CSS to match your requirements. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An HTML5 Document with a sticky footer</title> <style>@import "css/reset.css"; </style> <style>@import "css/main.css"; </style> </head> <body> <div id="root"> <header> The page header </header> <section> <h1>Example</h1> <p>This is an example HTML document.</p> <p>Put your content here</p> </section> [...]
CSS3 brings us rounded corners with the CSS rule border-radius. At the time of writing, webkit and gecko based browsers offer this functionality with custom CSS rules. Gecko (Firefox): div { -moz-border-radius: 10px; } div { -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; } Webkit (Safari, Chrome) div { -webkit-border-radius: 10px; } [...]
Modern browsers support RGBA colour definitions in CSS, for example: div { background: rgba(255,255,0,127); } You can simulate this in IE with something like the following code: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dd204362,endColorstr=#dd204362); MSDN – DXImageTransform
Complient browsers use the background-color rule to set the colour of HR (horizontal rules). IE6 however uses the color rule. It will do no harm to add both the main style sheet.
An example of using style sheet media queries, or media expressions. In a nutshell apply conditions to which style sheets are imported depending on the client device properties. <link rel="stylesheet" type="text/css" media="screen, projection" href="css/main.css"/> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1600px), projection" href="css/main-hires.css"/> In this case only devices with a minimum resolution of 1600 pixels [...]
A simple HTML template to create valid, xHTML 1.0 documents. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>title</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="script.js"></script> <style type="text/css"> </style> </head> <body> <div id="root"></div> </body> </html> template.html
A reset CSS which will get rid of the browsers default styling on all elements. Making it a lot easier to build consistent cross browser web sites. reset-fix.css Extras: Clearfix CSS class, for clearing floated child nodes. Typography percentages in the comments select {margin:0;} applied for IE
A CSS based workaround for the IE6 transparent PNG bug. Apply in an IE6 specifc style sheet. background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/icon.png’); This fix can only used in certain scenarios. Will render links unclickable Will cause form elements to be unfocusable When applied to unordered/ordered lists, will hide the list item text