Tutorial: Html5 And Css3 Site
20
HTML 5 AND CSS 3 Adam’s Simple Website Tutorial
-
Upload
adam-stewart -
Category
Self Improvement
-
view
7.894 -
download
6
description
A simple tutorial on how to create a basic page using HTML5 and CSS3
Transcript of Tutorial: Html5 And Css3 Site
HTML 5 AND CSS 3Adam’s Simple Website Tutorial
New HTML 5 Elements Header, Nav, Section, Aside, Article &
Footer Usually need to create ID such as
#header or #nav
New CSS 3 Elements -webkit-box-shadow OR -moz-box-
shadow – webkit browsers (Safari, Crome) or Mozila Browser (flock, firefox)
#ccc 5px 5px 20px; - Colour, top/right, bottom/left & spread
E.g -moz-box-shadow: #ccc 5px 5px 20px;
Some Info Colours: Blue - #2DA5BF Red - #DA1F28 Grey - #464646
New HTML 5 Layout <!DOCTYPE html> <html lang="en">
Instead of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Far more simple and straightforward
Head<head> <title>HTML5 & CSS3 Example Page</title> <!--[if IE]> <script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <link rel="stylesheet" href=“style.css" type="text/css" /> </head>
Header (new)<header id="header"> <h1>HTML5 & CSS3
Website</h1><p>Simple website built using
HTML 5 and CSS 3</p> </header>
Nav (new)<nav class="container">
<ul id="primaryNav"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Gallery</a></li></ul><ul id="secondaryNav"><li><a href="http://css-tricks.com/">Contact Us</a></li></ul></nav>
Section (new)<section class="container"> <div>
<div><img src=“example.jpg" alt="image" height="246" class="polaroid"/></div>
</div>
Section (new) - Cont <aside> <h2><p>Welcome to my Website!</p></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in massa tortor. Sed mi dui, aliquam a lobortis eu, ultrices a erat. Duis eros tellus, bibendum sit amet tincidunt elementum, tempus nec erat. Cras pretium massa diam. Nunc volutpat laoreet erat eget luctus. Duis consectetur lectus a massa condimentum sodales. Nullam luctus posuere nibh quis dignissim. Mauris mattis nisl ut turpis sagittis at consequat leo porta.</p>
</aside> </section>
Footer (new)<footer> <p>Website copyright 2009 Adam
Stewart</p> </footer>
CSS - Bodybody { background: #EBEBEB; font:
15px/1.5 Georgia, Serif; width: 1000px; margin: 0 auto;}
CSS - The “Clearfix” hack..container:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }.container { display: inline-block; }/* start commented backslash hack \*/* html .container { height: 1%; }.container { display: block; }/* close commented backslash hack */
CSS - Stylea { text-decoration: none; }h1 { font: bold 30px Helvetica, Sans-Serif;
margin: 0 0 5px 0; color:#464646; }h2 { font: bold 20px Helvetica, Sans-Serif;
margin: 0 0 10px 0; color: #DA1F28; }
CSS - Headerheader { margin-top: 1em; }header p { margin: 0 0 12px 0; padding:0;
color:#464646; font-family:Arial, Helvetica, sans-serif; }
CSS - Navnav { background: #464646;}nav a { color: #fff; padding: 10px; display: block; border-right: solid #fff
1px; font-family:Arial, Helvetica, sans-serif;}nav a:hover { background-color: #DA1F28; }nav ul { list-style: none; }nav ul li { float: left; font-size: 16px; }
nav #leftNav { margin-left: 10px; }
nav #rightNav li { float:right; }nav #rightNav a { border-left:solid #666 1px; border-right:none;
background: #DA1F28; }nav #rightNav a:hover { background: #2DA5BF;}nav #rightNav { margin-right: 10px;}nav, footer{ -moz-border-radius:10px; -webkit-border-radius:10px; }
CSS – aside and sectionaside { color: #464646; font-family:Arial,
Helvetica, sans-serif; float:right; width:300px;}
section { margin-top: 2em; padding:10px;}
CSS – Image (polaroid).polaroid { display: block; background:
#fff; padding: 10px; -moz-box-shadow: #ccc 5px 5px 20px; -webkit-box-shadow: #ccc 5px 5px 20px; margin-bottom:1em; width:640px; float:left;}
.polaroid img { width: 640px; }
CSS - Footerfooter { padding: 8px; text-align: center;
background:#CCC; margin-top: 2em; position: relative; font-family:Arial, Helvetica, sans-serif; color:#464646;}
CSS – HTML5 Elements/* HTML5 tags */ header, section, footer, aside, nav, article, figure { display: block; }
