CSS Introduction

Saturday, March 3, 2012

tags CSS

In the early days HTML, presenting information was the goal. Aesthetics of a web page was not as important as content at the time. This is no longer the case. If you visit a web page that is not aesthetically pleasing as you would expect, chances are that your interest in the content will be diminished. Therefore, the presentation of your content is critical to your website’s success. Fortunately, using Cascading Style Sheets, or CSS, is the most efficient approach used to get those web pages to look just right!

What is CSS

HTML coders rapidly noticed that they were applying the same types of attributes with the same values on more than one page. For example, if all of the tables or hyperlinks needed a particular formatting, HTML coders were setting those values on each element. In the case where a formatting change was needed, say to change a background color of an element, the coder would be required to go through all of the target elements and update the attribute to a new value. Having this data repeated made HTML files larger and more difficult to manage.

The idea behind a CSS is that you can store those attributes and values in a central location and have your elements reference that central point. When you needed to make a change to a set of elements, you just need to update the value in one place. Since the web pages reference the Style Sheet, at run time, those attributes and values are added to the elements. This efficiently separates the structure and presentation of your pages. Around the mid 90's the World Wide Web Consortium (W3C) introduced this concept.

Benefits of Using CSS

As we discussed, the main benefit of CSS is that you make changes to styles in one place. That is much more efficient than defining your styles on every page. The look of your site is kept consistent throughout all the pages that work off the same style sheet. Also, since there is less information on each page, the pages will download faster. In addition, your pages will be more organized and easier to decode in the event that you have a problem on the page. Of course, updating your design and general site maintenance will be much easier, with fewer coding errors. Finally, the many of the formatting options are just not possible to achieve via HTML alone. In following articles in this series, we will cover the various ways to implement CSS and all of the different ways to style HTML elements.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor HTML CSS: The Complete Reference CSS: The Missing Manual