Computer Science 12
Tutorials on HTML:
CSS Demo
In the tutorial material on HTML topics: colors and a brief intro to CSS, you were asked to download the ZIP file cssdemo.zip and experiment with editing cssdemo.html to change which CSS file is referenced within the head element:
<head>
<title>CSS Demo</title>
<link rel="stylesheet" type="text/css" href="box-demo-1.css" />
</head>
For your convenience, the two HTML files in the ZIP file cssdemo.zip can also be viewed here. Below are links to six versions of cssdemo.html which differ only in which style sheet file they use.
cssdemo.htmlwithbox-demo-1.csscssdemo.htmlwithinvisible-borders-1.csscssdemo.htmlwithbox-demo-2.csscssdemo.htmlwithinvisible-borders-2.csscssdemo.htmlwithbox-demo-3.csscssdemo.htmlwithinvisible-borders-3.css
In Notepad, compare the source code of cssdemo.html and its various style sheet files with the source code of style-attribute-demo.html (which uses style attributes within HTML tags, rather than a separate style sheet file). Yet a third way of doing CSS is exemplified by style-element-demo.html , in which all the CSS is put in a single style element (not a style attribute), enclosed by an opening and closing style tag within the head element of the HTML document itself.
Of the three ways of doing CSS, separate external style sheets are preferred ffor most purposes, because (1) it can give us greater flexibility, by allowing us to choose different "skins" or "themes" for the same HTML document, (2) it lets us style many different HTML documents with one style sheet, and (3) it reduces clutter within the HTML documents themselves..
Back to the tutorial material on HTML colors and a brief intro to CSS