Benefits of Using CSS

Plenty of Reasons to Use CSS

The Benefits of CSS include the following, in no particular order:

1. The Separation of Content from Presentation

What exactly does this mean?

The Content: Well, the Content portion of a Web Page includes anything placed in the HTML Code. This includes HTML Tags (and Elements), Images, Text & Headings, and so on. HTML Tags also make up the Structure of a Web Page.

The Presentation: The presentation of a web page is ideally created and modified by using CSS. CSS, as you will recall, is a Style Language used to control the appearance of the HTML elements placed on a web page. Therefore, CSS is the Presentation. This includes background graphics, fonts and font-families, font color, background colors, positioning properties, borders, and so on.

Keeping them Separated: It is very important to avoid using any kind of Presentational HTML. And with HTML 4.01, most of the Presentational Tags were removed form the HTML specification. In particular, using an External Style Sheet enables us to keep the content separate from presentation.

The benefits of keeping Content Separate from the Presentation includes the follow:

a.   The obvious benefit is the creation of web pages that are "light", and therefore, load faster.  In other words, Less code in the HTML translates into cleaner code and a lot less code, which reduces the weight or size of a web page.  This is the result of placing CSS Styles on an External Style Sheet.

b.  It's easier to modify and update web pages.  With CSS, we can easily modify the appearance of our web pages by manipulating CSS Styles.  We never have to touch the content.  Compare this to table-based layouts which tend to break when you modify them or update them!!!  Pain in the rear!!

c.  The use of an External Style Sheet is very efficient.  We just create our core styles one time, yet apply them hundreds of times throughout a web site.  (This is acheived by attaching the External Style Sheet to your web pages.)

 

2.  CSS Does What HTML Can Never Do

For instance, default HTML headings look terrible.  As a result, many people never used them.  They simply used resized paragraph text and made headings bigger or smaller.  This hurts your web page SEO and decreases your web site’s chances of hitting page 1 in the Search Engine Results Pages (SERPs).  

CSS, on the other hand, enables you to style <h1> and other heading tags so that they don’t look ridiculous. ( h1 thru h3 heading tags that contain keyword phrases will boost your SEO)   So use Heading Tags!  and resize them with CSS.

 

3.  CSS is a Web Standard

In order to create Web Pages that are Web Compliant, we must follow the Web Standards as set forth by the W3C, and other Web Related organizations.  Using CSS is one of the most important Standards to follow.  (Being web compliant may even boost your SEO.)

 

Overall, CSS is a lot of fun once you get the hang of it, it's so much more efficient, easier to manage and update than tables, and it will give you a nice SEO boost in the Search Engines. 

Whatever you do, please avoid nesting tables in tables in more tables and so on.  This complex nesting of tables blocks access to your content, and most importantly, will cause you nothing but a nightmare when you try to update any part of your web pages.

 

When is it okay to use a table?   Read Here