HTML-CSS Demo Kit
This kit contains 5 versions of the same HTML page that are modified using different style sheets.
We used very basic CSS in the style sheets to make it easier to understand.
The No Style Version of the page shows what the page would look like without a style sheet.
Each succeeding style sheet shows how to add various elements like borders, color, images and link buttons. No code is added to the HTML in any of the versions. All changes are done simply by changing the style sheet.
This page is structured using division tags. The code has been simplified and very basic CSS has been used to define its appearance.
The style sheet, index-3.css, has been fully commented for study purposes.
The actual HTML for the structure of the page is shown here with all content removed:
<html>
<head>
</head>
<body>
<div id="heading">
</div>
<div id="main">
<div id="navigation">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Contents of kit:
- index.html - No Style Sheet
- index-1.html - index-1.css
- index-2.html - index-2.css
- index-3.html - index-3.css
- index-4.html - index-4.css
- index-5.html - index-5.css
- readme.html - readme.css
- images folder - all heading images
- more-tips.txt
Read and edit the style sheets using NotePad or any simple text editor. You will need to turn on the All Files filter to see them.
Study the contents of this kit in conjunction with our HTML Tutorial. Concentrate on the lessons about the division tag and style sheets.
Download the Kit in a Zip file.