We will view a demonstration of HTML and Cascading Style Sheets at work in this activity.
- Visit the CSS Zen Garden website.
This site was built to demonstrate what can be achieved through CSS design and through the separation of content and presentation. Note that this site was created using HTML for the content and CSS for the presentation.
- Download the HTML and the CSS files for the page you are currently viewing by right-clicking on the given links. Open the CSS file in your text editor, such as Notepad.
Describe the styles used to format the following: body text (<body>), paragraph text (<p>) and hyperlinks (<a:link>). Please note that you are not expected to understand what all the rules mean at this point, but browsing through the style sheet should give you an idea of how it is structured.
- Now click on some of the designs listed on the right-hand menu bar. The same content will be reloaded, but the page formatting and style will change depending on the style sheet selected.