Edit Rename Upload Download Back to Top

CSS Removes Clutter

Style sheets remove the need to clutter (X)HTML pages with presentation information. The (X)HTML should only contain subject specific content, and CSS should do all the layout, colour and font (etc.) work.

Here is some cluttered HTML:

<font face="sans-serif" color="#0000FF"><p>Hello, World</p></font>

Which renders like this:

Hello, World

Here is the HTML in a cleaned up form:

<p>Hello, World</p>

Now we see that the intent of the HTML is simply to have a paragraph saying "Hello, World". With the clutter this not so obvious. Here is the style directive that puts the style back in:

<style type="text/css">
p {
 font-family: sans-serif;
 color: #0000FF;
}
</style>

Which gives us the same as the blue Hello, World above. I can't demo this here in the wiki because the <style> tag must be in the head, but you can try it out with a simple text editor and your regular web browser.


Edit Rename Upload Download Back to Top