Building a page template in CSS - a step by step tutorial
Russ Weakley
2-Jun-05
A quick step-by-step demonstration of how the Web Essentials template was built using CSS. Created for a presentation to students of Blue Mountains College of TAFE.
Choose from the steps below. When inside a step, you can use red BACK, START and NEXT buttons to navigate.
Code samples for each step are displayed in the top right corner.
- the mockup
- the html code
- the contrainers
- styling the body
- styling the #header
- styling the #header h1
- styling the #header h1 em
- styling the #topnav
- styling the #topnav ul
- styling the #topnav li
- styling the #topnav li a
- styling the #topstrip
- styling the #content
- styling the #content .intro
- styling the #content ul
- styling the #content ul li
- styling the #content h2
- styling the #content p
- styling the #content a
- styling the #content a:hover, #content a:active
- styling the #banners
- styling the #banners img
- linking to an external css file
- @import to other css files
- Browsercam results
- The live site
