Separating Style From Content
An essential part of validating coding, using includes to maximise maintainability and skinning a website includes separating style from content. In fact, I mention it a whole lot in most of my tutorials because it's quite important.
I bet 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. We'll add to this shortly...
Certain elements of our new block of coding won't look how we want them to if we don't give them some kind of attributes. How will the browser know where to position the <div>, what colour we want our text or how wide the image is? This is where we start adding to our stylesheet with CSS.
First of all though, we give our items ids or classes. If an item is unique - if it only appears once - we give it an ID. As you can see, the main image and div only appear once, so we give them an id:
..etc..
<body>
<img src="images/bla.gif" id="mainimg" alt="layout image 1">
<div id="maindiv">
my title<br>
..etc..
If an item appears more than once on a page, like the adoptable image examples, we give it a class:
..etc..
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" class="adoptable" alt="adoptable"> <img src="images/adoptable.gif" class="adoptable" alt="adoptable">
</div>
..etc..
Next is the slightly harder bit - interpreting what CSS needs to go where in a stylesheet. To create the stylesheet, open Notepad (or any other text editor) and then save the file (blank for now) as "stylesheet.css" - with the quotation marks. This will save the file with the right extension. Now you can add CSS to this file to customise the ids and classes you've specified above, saving as you go along, using the following system:
#id {
this represents an id. rename id to whatever you've set the id in the html files as. you would put the custom attributes between the two { }
}
.class {
this represents a class. rename class to whatever you've set the class in the html files as. you would put the custom attributes between the two { }
}
As we've assigned the example above classes and ids, we could then add the properties with CSS that we previously had defined with HTML. This is how our stylesheet would look:
body {
background-color: cornflowerblue;
}
#mainimg {
width: 400px;
height: 150px;
float: left;
}
#maindiv {
position: absolute;
top: 104px; left: 23px;
font: 8pt Verdana, Sans-serif;
color: darkslateblue;
}
.adoptable {
width: 20px;
height: 20px;
}
Obviously this is just an example and the names of the ids/classes as well as the properties used to customise them would be different for your stylesheet based on your original HTML coding. If you don't know any CSS, feel free to use the tutorials on this website, or visit the CSS section of w3schools.com for in-depth help.
Tags:
,
Last Updated On: 31st January 06 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Friends of 'TT'
Resources