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
