For Styles: Introduction to CSS images

Following are the files that you will need for CSS lessons. Click on the file , once it shows in a separate window, right click and then choose "save picture as"

Please leave comments on each video, thanks

header image (960 x 180)

Footer image (960 x 180)

content image1

content image 2

Index File (Template for css). Copy the text to your editor and save it as index.html in csslearning folder. In order to understand each step it is better to type it yourself uptill end. You codes starts below. These codes were not easy to post it on blogger, you have to arranage it in the editor:

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Learn CSS with PakTaleem</title>  </head>  <body>    <div id="wrapper">         <div id="header"> Header top        </div>     <div id="sidebar">       <ul>         <li><a href="http://c-lien.blogspot.com/?Iw==">Home</a></li>        <li><a href="http://c-lien.blogspot.com/?Iw==">PakTaleem History</a></li>        <li><a href="http://c-lien.blogspot.com/?Iw==">About US</a></li>        <li><a href="http://c-lien.blogspot.com/?Iw==">Contact US</a></li>              </ul>     <p>Integer fermentum, erat et auctor fermentum, velit orci convallis quam, euismod tincidunt nulla urna eget lectus.      Pellentesque in semper arcu.</p>    </div>          <div class="content">     <h1>Learn CSS with PakTaleem </h1>      <p>Nunc fringilla, risus vel iaculis congue, augue nisi posuere quam, ut iaculis neque est eu lacus.       Curabitur consequat nunc non lorem tempor auctor. Fusce nulla arcu, facilisis a hendrerit eu, pharetra in lectus.       Aliquam quis metus lorem, eu molestie nibh. Curabitur in facilisis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.       Suspendisse potenti. Maecenas nibh mauris,accumsan sed blandit eget, aliquet in arcu. - <a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy55b3V0dWJlLmNvbS9wYWt0YWxlZW0=">http://www.youtube.com/paktaleem</a>.</p>          <h2>PakTaleem on Youtube</h2>     <p>Duis in velit nec metus scelerisque laoreet nec ac magna. Fusce hendrerit nunc eu enim interdum rutrum.      Suspendisse neque odio, sollicitudin vel mollis eu, egestas eu magna. Sed quis eros eu nulla dictum feugiat eu vel dui.      Fusce id augue lorem. Nulla suscipit tortor ac metus aliquet quis volutpat felis vulputate. Vivamus sit amet est id dolor eleifend pulvinar.     Nullam est dui, malesuada ac lobortis eu, vulputate pulvinar nibh. Curabitur nibh erat, adipiscing rhoncus aliquam nec, lobortis non enim. Curabitur fringilla risus non purus mollis dictum. Aliquam dignissim nunc viverra ante consectetur malesuada.</p>          <h3>Experience the difference</h3>     <p>AVivamus velit erat, vestibulum ut accumsan luctus, rutrum in tellus. Nunc lacinia semper risus et volutpat. Vestibulum sed ligula sit amet neque tincidunt fringilla quis suscipit risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc est, condimentum at placerat quis, suscipit dapibus metus. Donec dictum turpis ac nisl porta bibendum. Ut ultricies urna a tortor molestie ut placerat tellus adipiscing. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nisi lectus, facilisis sit amet luctus et, ultrices a nisi. Mauris vitae massa non purus tempus luctus. Duis cursus, neque at varius blandit, eros ante fringilla dolor, molestie gravida turpis felis et augue. Curabitur augue neque, faucibus at facilisis id, consequat eget dui. Quisque congue pulvinar eros, non suscipit tellus scelerisque at. Nam lacus metus, pharetra eget pellentesque ut, luctus faucibus dolor. Maecenas commodo sagittis tellus quis tincidunt. Praesent sagittis malesuada ante sed ullamcorper. </p>     <p> Suspendisse lectus elit, blandit vitae adipiscing eget, aliquam eu tellus. Morbi condimentum, ligula sed ultricies ullamcorper, dolor odio fermentum metus, vel commodo felis sapien vel elit. Suspendisse fringilla ornare dui, in laoreet sapien vehicula ac. Fusce nec eros nulla. Nunc sit amet urna turpis, sit amet accumsan turpis. Sed vel est magna, a luctus leo. Praesent sed velit sit amet lorem placerat egestas. Vivamus rutrum egestas odio a luctus. Duis elementum leo et velit ultrices viverra. Integer sollicitudin hendrerit feugiat. Suspendisse dui sem, gravida eu blandit a, posuere vel ligula. Aliquam erat volutpat. Duis eget orci neque.</p>         </div>          <div id="footer">       <p>Quisque libero velit, semper id volutpat eget, tincidunt a nibh. Aliquam blandit metus eu urna semper eget consequat orci facilisis.</p>        </div>   </div> </body> </html>

For Styles

samedi 5 mai 2012

Introduction to CSS images

Aucun commentaire:

Enregistrer un commentaire