Here's an HTML file with CSS styling directly in the file:
<html>
<head>
<title>Baseball 2008</title>
<style type="text/css">
body {background-color: blue }
h1 {background-color: green}
h2 {background-color: transparent}
p {background-color: rgb(0,250,255)}
p {font-family:"Courier New", Courier, monospace}
</style>
</head>
<body>
<h1>Baseball Stories</h1>
<p>Tomas Wolber hit a homerun</p>
</body>
</html>
Here's another file with the same CSS styling:
<html>
<head>
<title>Basketball 2008</title>
<style type="text/css">
body {background-color: blue }
h1 {background-color: green}
h2 {background-color: transparent}
p {background-color: rgb(0,250,255)}
p {font-family:"Courier New", Courier, monospace}
</style>
</head>
<body>
<h1>Basketball Stories</h1>
<p>Tomas Wolber made ten 3-pointers.</p>
</body>
</html>
The ProblemIf these pages were part of the same web site, they would have a harmonious, albeit ugly, style. The problem is that the styling is defined within each file, so if I change something in one file, it won't effect the other one. For instance, if I change the background of the body tag to red in the basketball file, the baseball file will still have a blue background.
So if the styling is defined per-file, maintenance of your site becomes difficult as your site grows to many pages.
This is extremely important because with software and web pages, things are going to change! The initial design or the 50th design is NEVER the final design.
SolutionIn computer science, there is a saying:'All problems in computer science can be solved by another level of indirection'
Here, we don't want to directly refer to CSS, but instead indirectly refer to it. We want to have our html refer to a file, and in that file define the styling for the site.
sports.css would look like this (same as the above style commands without the 'style' tag):
body {background-color: blue }
h1 {background-color: green}
h2 {background-color: transparent}
p {background-color: rgb(0,250,255)}
p {font-family:"Courier New", Courier, monospace}
and the html files would then link to the css file:
<html>
<head>
<title>Basketball 2008</title>
<link href="sports.css" media="screen" rel="Stylesheet" type="text/css" />
</head>
<body>
<h1>Basketball Stories</h1>
<p>Tomas Wolber made a lot of 3 pointers.</p>
</body>
</html>
Once this is set up, any changes to the css file will cause the entire site to change.In-Class assignment1. Create two HTML file web pages that would be part of the same site. You may use the baseball and basketball ones in these notes, or create your own. Do not put any styling directly in the HTML files.
2. Create a CSS file like sports.css with some styling defined for paragraphs, headers, etc.
3. Add a link statement in both HTML files so they point to your new css file.
4. View both your pages in a browser. They should show the same style.
5. Make some changes to the CSS file, then view both your web pages again. They should both change style based on a change to the CSS.
6. Add links to the two files in your portfolio, and explain there what the files represent (that they both use the same CSS file).
|
|
