CSS versus HTML text formatting

CSS versus HTMLWithout CSS (Cascading Style Sheets), text formatting is a long-winded and ugly affair. Each paragraph of copy would need to formatted with font-type (if not default – Times New Roman), font-color (if not default – black) and font-size. Far too much work, so, let’s start a war – CSS versus HTML!

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 important written content.

CSS allows you to specify localised or even a universal defaults 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 reviewing 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 outside of the tags. The following examples demonstrate this.

Ugly 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">
 .my_paragraphs p { color: #f00; font-size: 12pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
 </style>

<div class="my_paragraphs">
<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>
</div>

There’s 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

.my_paragraphs 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">

<div class="my_paragraphs">
 <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>
</div>

Now, the CSS has been externalised: it has been saved within a separate file and called upon. 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 of CSS versus HTML

CSS will undoubtedly reduce the amount of code within your copy. If externalised, will enable greater continuity and reduce your total work load.

Leave a Reply

Your email address will not be published. Required fields are marked *