CSS (Cascading Style Sheets) has been a buzz word in the web design and development market since it’s inception in 1997. Since it’s creation it has been adopted and standardized by all the major web browsers. It’s nothing magical or hard to understand so lets break down exactly what CSS is and how it can save you on time, money, and headaches.

HTML (Hyper Text Markup Language) was designed to display information in a structured manner. It wasn’t designed with fancy images and layouts in mind. It also wasn’t designed to be used as an advertisement tool. What most web developers do when designing a purely HTML website would be considered ‘hacking’ the language. They use workarounds and techniques that are not standardized to create dynamic and great looking sites using a language that was not meant for that purpose. It’s akin to using lipstick to leave a message on a mirror for lack of the proper pen and paper. Web Developers took what they were given and used it to the best of their ability. However, the Web Community understood that the lipstick and mirror of HTML could only be used for so long.

CSS was designed to take the strain of styling a page off of HTML in order to let HTML do the job it was intended and developed for, which is organizing the content on the page. A simple example would be the HTML font tag. The font tag was used in order to change the size, color, or font face of text included inside the tag. So it may have looked something like this: <font size=”10px”>This is font size of 10px!</font>. To this day, browsers still support the font tag and many sites that have not made the change to CSS still use it to help style the page. If you wished to use CSS to change the font size of a specific piece of text you would include it in span tags like this: <span id=”myFontSize”>This is font size of 10px!</span> then in your style sheet you would define the myFontSize id as: .myFontSize { font-size: 10px; }.

Now, you might be thinking that the CSS example took more code, and hence more time. In this specific case you would be correct. However, once a style is defined in a style sheet, it can be reused. You could create another span tag <span id=”myFontSize”>This is another font Size example!</span> and that would also be given the font size of 10px that was defined in the style sheet. To better explain what this benefit can actually mean, let’s imagine a 25 page website was created for a company. The comapny President is very fond of the courier font and tells the developer to use it everywhere on the site. If the site was developed in HTML without CSS, a font tag would be used to surround every different piece of text that needed to be in the courier font, and the font name would be hard coded into every page, most likely multiple times. Now lets say the President retires and a new President takes over that prefers Times New Roman. In order to change something as simple as the font used on the site the developer would have to go through each page and change multiple font tags from courier to Times New Roman. That’s a headache and a time waster. If the site had been done in CSS, all relevant text would have been included in span or div tags that referred to a single entry in the style sheet. That means changing the font for the entire site would be as easy as changing Courier to Times New Roman in one place.

CSS not only allows you to easily style a website in a way that separates content and style, but it also allows you to easily re-style the website quickly, without having to dig through any of the actual pages. It also allows you much more control over the style of the website then simple HTML does. CSS is the future of web design. Most companies with a major web presence have already made the transition. Have you?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>