the index page for your website looks a little like this:
<html>
<head>
<title> my website </title>
<meta name="keywords" content="joe bloggs' website, site, pages,">
<meta name="author" content="joe bloggs">
</head>
<body bgcolor="cornflowerblue">
<img src="images/bla.gif" width="400" height="150" align="left" alt="layout image 1">
<div style="position: absolute; top: 104px; left: 23px;">
<font face="verdana" size="5">my title</font><br>
<font face="verdana" size="3" color="darkslateblue">welcome to my website, navigation is on the right, introduction paragraph - bla bla! please leave feedback in my <a href="/gb/" target="_blank">guestbook</a></font>
<img src="images/adoptable.gif" width="20" height="20" alt="adoptable"> <img src="images/adoptable.gif" width="20" height="20" alt="adoptable">
</div>
</body>
</html>
Separating style from content is the process of removing all of the tags which control the look of your page, like width and height, from your HTML and putting them in your CSS (usually an external styleheet). Let's take a look at that block of coding again, minus all of the style coding:
<html>
<head>
<title> my website </title>
<meta name="keywords" content="joe bloggs' website, site, pages,">
<meta name="author" content="joe bloggs">
</head>
<body>
<img src="images/bla.gif" alt="layout image 1">
<div>
my title<br>
welcome to my website, navigation is on the right, introduction paragraph - bla bla! please leave feedback in my <a href="/gb/">guestbook</a>
<img src="images/adoptable.gif" alt="adoptable"> <img src="images/adoptable.gif" alt="adoptable">
</div>
</body>
</html>
Smaller, easier to understand, easier to edit - these are just a few of the benefits of removing style coding from your HTML documents. But what next you ask? Creating a stylesheet. Creating an external stylesheet is easy ? open Notepad, and save the document as "stylesheet.css" ? just like you would a HTML document, only with a different extension
