Southbank International School Weblogs

By now the majority of Middle School students will have an HTML document with code resembling the following:



<html>

  

    <head>

    <link rel="stylesheet" type="text/css" href="style.css">

    </head>

  

<body>



<div id="header">

    <h1>Toy Website</h1>

</div>



<div id="menu">

    <ul>

        <li><a href="#">Home</a></li>

        <li>Gallery</li>

        <li>Contact</li>

    </ul>

</div>



<div id="placeholder">

    <img src="image.jpg" />

</div>



<div id="blockquote">

    <blockquote>The  toy you've all been waiting for has finally arrived!</blockquote>

</div>



<div id="block">

    <h2>Why Our Toy Is The Best</h2>

    <h3>We Know Toys</h3>

    <p>Our space-age toy was lovingly handcrafted by Aleutean monks....</p>

</div>

</body>

</html>

Read on to find out more on how you should be finishing off the formatting of your HTML pages...

You'll notice that the one element you haven't yet added to your pages are these lines:





    <head>


    <link rel="stylesheet" type="text/css" href="style.css">


    </head>

Those lines call an external CSS file (a style sheet). That fine will contain all the information about the style of our document. The HTML page is responsible for containing the content. So, HTML (content) + CSS (style) = a readable web page across many platforms and browsers.

CSS is coded slighty differently from HTML, like this:



body {

    background: black;

    font-family: "Curlz MT", Verdana;

    font-size: 14px;

    color: white;

}



div#header {

    background: #00FFFF;

    text-align: center;

}



h1 {

color: yellow;

}

The code above will change any h1 (header level 1) tags you have in your HTML document to green text. Think of how you can use CSS to style your document.

Links that will aid you:
- Webmonkey HTML Cheatsheet
- Webmonkey CSS Reference
- Webmonkey CSS Examples
- Our southbank.net stylesheet

Remember: stylesheets and images will not work in this particular example unless they live in the same folder as the HTML file.