CSS versus HTML text formatting

By James Middleton - Added 7th of July 2008

Without CSS (Cascading Style Sheets), text formatting is a long-winded and ugly affair. Each paragraph of copy would need to establish the font-type (if not default - Times New Roman), font-color (if not default - black) and font-size.

As you can imagine, this leads to a lot of extra in-document HTML code. This will inevitably results in an increase in page file size and may even (in some cases) inhibit the search engine indexing process from the actual written content itself.

CSS allows you to specify localised or even a universal default for copy formatting. Take a look at the following examples.

Standard non-CSS HTML formatting

<p><font size="1" color="#ff3333" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular">This is the copy</font></p>

HTML with CSS formatting

<p style="color:red;font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; size:12pt">This is the copy</p>

After looking at the above example, you may feel that CSS isn't worth the effort; after all, the CSS version is only 3 characters shorter and just as untidy. The above demonstrate a localised or 'in-line' application of CSS. CSS is far more powerful when applied separately from page content. The following examples demonstrate this.

HTML formatting

<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular">Mary had a little lamb its fleece was white as snow; </font></p>
<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular">And everywhere that Mary went, the lamb was sure to go.</font></p>
<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular">It followed her to school one day, which was against the rule;</font></p>
<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular">It made the children laugh and play, to see a lamb at school.</font></p>
<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular">And so the teacher turned it out, but still it lingered near,</font></p>
<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular">And waited patiently about till Mary did appear.</font></p>
<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular">"Why does the lamb love Mary so?" the eager children cry;</font></p>
<p><font size="1" color="red" face="Arial, Helvetica, Geneva, Swiss, SunSans-Regular"> "Why, Mary loves the lamb, you know" the teacher did reply.</font></p>

CSS formatting

<style type="text/css" media="screen">
p { color: #f00; font-size: 12pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
</style>

<p>Mary had a little lamb its fleece was white as snow;</p>
<p>And everywhere that Mary went, the lamb was sure to go.</p>
<p>It followed her to school one day, which was against the rule;</p>
<p>It made the children laugh and play, to see a lamb at school.</p>
<p>And so the teacher turned it out, but still it lingered near,</p>
<p>And waited patiently about till Mary did appear.</p>
<p>"Why does the lamb love Mary so?" the eager children cry;<p>
<p>"Why, Mary loves the lamb, you know" the teacher did reply.</p>


There is a clear winner here. Notice how easy it is to read the copy within the CSS example. To take this to the next level, we will remove the CSS from the page altogether and put it in to a separate file. In place of the CSS, we will add a file reference:

style.css

p { color: #f00; font-size: 12pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }

my-page.html

<style type="text/css" media="screen" src="text-format.css">
<p>Mary had a little lamb its fleece was white as snow;</p>
<p>And everywhere that Mary went, the lamb was sure to go.</p>
<p>It followed her to school one day, which was against the rule;</p>
<p>It made the children laugh and play, to see a lamb at school.</p>
<p>And so the teacher turned it out, but still it lingered near,</p>
<p>And waited patiently about till Mary did appear.</p>
<p>"Why does the lamb love Mary so?" the eager children cry;<p>
<p>"Why, Mary loves the lamb, you know" the teacher did reply.</p>

Now we have 'externalised' the CSS - that is, it has been saved within a separate file and call upon using 'src="text-format.css"' within the 'style' tag. You could include a CSS file src (source) reference on every page of your website, thereby massively reducing the overall file size and load time.

CSS Conclusion

CSS will undoubtedly reduce the amount of code within your copy. If externalised, will allow for greater continuity and in the same instance, reduce your total work load. There are certainly no browser compatibility issues within CSS. You would be hard pushed to find somebody with a web-browser that is so antiquated that they can't access the functionality of CSS.

---

Credits & Links

Article written by James Middleton - www.webdesign-4-beginners.co.uk.

Information for Publishers

You are free to republish this article, provided you retain all hyperlinks as active in the above credits.

---

Add your own comments

* Must complete

*Your Name
*Comments Please do not use HTML codes within this field	(Max chars: 1000) Characters remaining:
*Security Code	Please type the above code into the box below (case sensitive):
	Please Note: All comments are reviewed before going live.