Separating Style from Content

As web designers and webmasters all over the world move to update their code to bring it in line with standards and the ‘trend’ of validation, it is important that we follow one of the most important rules: removing style from content. This describes the process by which we remove presentational tags and attributes, as well as CSS styling, away from the HTML and content and in to a stylesheet.

Consider this block of HTML, what a typical page on your website might look like:

<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>

Note the style attributes in our divs and font tags customising our text. This is presentational; i.e. it only affects the style and appearance of the page and lends no semantic value. If we take a look at that code again, minus any styling, you will see that it is easier to both read and maintain, as well as being much smaller (smaller pages means less bandwidth used):

<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>

However, certain elements in our new block of coding won’t look how we want them to if we don’t give them some kind of attributes or styling. 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:

  <body>

    <img src="images/bla.gif" id="mainimg" alt="layout image 1">

  <div id="maindiv">
    my title<br>

If an item appears more than once on a page, like the adoptable image examples, we give it a class:

    <img src="images/adoptable.gif" class="adoptable" alt="adoptable"> <img src="images/adoptable.gif" class="adoptable" alt="adoptable">
  </div&gt

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. Based on the original inline styling from our first block of code, 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 your ids/classes as well as the properties used to customise them would be different in your stylesheet — they would be based on your original HTML coding. However, using this guide we can begin the process of removing the inline styling.

Leave a Reply