The idea of creating re-usable styles has been around since long before the web.

DTP (Desktop Publishing Software) like Adobe InDesign, Pagemaker, CorelDraw etc. have been using styles to manage page formatting and editing despite the huge amounts of content. Even word-processors like MS-Word use styles you can create for content-features and save for reuse. Styles save time, is what we’re saying.

And it’s the same for web, especially now that CSS is here.

Cascading Style Sheets or CSS is fast replacing the need to create design tables for styling a web page. CSS is nothing but language which dictates the presentation of a page’s HTML. Since it is isolated from your HTML/XHTML code, it makes it so much easier to style and restyle entire websites and eliminates the need to make changes in individual page code (as was the case with design tables)

Let’s take a deeper look.

How Cascading Style Sheets Work

Let’s say you created <h1> tag to make your headlines blue and bold. Now you add this tag to every page on your website so your headlines become blue and bold. It’ll take some time, but that’s okay.

Then one day you decide you want your headlines to be green instead of blue. That means modifying the <h1> tag on every single page. If you have a large website, that’ll take a lot of time.

But that’s a lot of time a lot of developers wouldn’t want to spend simply styling headlines to make them green from blue on every single page of your website.

That’s where CSS comes to rescue.

With CSS in your external style sheet, all you have to do is change the style that contains formatting information for <h1> tag, and you’re done. All your headlines will turn green automatically.

The word ‘cascading’ is descriptive of CSS behavior. Literally it means ‘downward’. Basically, relevance of code in CSS ‘flows’ from top to bottom: the lowest line of the code is the most important. So if, for example, you colored your paragraph text blue somewhere at the top and later added another tag to change the color to green somewhere at the bottom, the paragraph will appear green. Codes at the end of the page can over-ride those preceding them. This saves the time that would have otherwise been spent on editing the code.

Those are just a few little examples. Considering how many design changes a site undergoes on a pretty regular basis, using CSS can save a considerable amount of time and effort.

Simply put, a website that uses cascading style sheets essentially separates the elements of content (HTML/XHTML) from design (tags which control appearance of said content). This approach works well for designers, simplifies things for browsers, and benefits your users (more on that later).

It’s a win-win for everyone.

Advantages of using CSS:

§ Simplified, consistent designing

Any styles you alter in CSS apply automatically to all the web pages of a site. The time and effort you save by designing with CSS, especially on larger websites, is considerable, not to mention consistent. It’s also easy to use. The styles can be saved within the XHTML page, or they can be saved in separate files and called with a simple tag by multiple XHTML pages.

§ Better performance

Since CSS files are stored externally, they will only need to be accessed once when a user visits your website. This reduces file transfer size and allows better utilization of your server resources.

Additionally, a few changes pertaining to CSS in your site’s front end can dramatically speed up your size. Reduce the number of roundtrips between user and your web server by merging smaller background images into a single style sheet.

Also, instead of importing CSS with @import, call the style sheet into action with <link> tag. This will enable the browser to download style sheets simultaneously with rest of the content, giving faster page loading times. You can also check out this handy manual by Google for further revamping your site to perform better with CSS.

§ SEO Friendly

CSS keeps your code clean and relevant content visible to search engines, which care more about ‘what’ you say than ‘how’ you say it. By keeping the content relevant and your design elements isolated, your chances of getting higher rankings on search results increase considerably.

§ Adaptability

With the ever growing influx of mobile devices with every dimension under the sun, websites need to become responsive in order to reach their audiences. For that, you need more than a working knowledge of HTML and, you guessed it, CSS. Starting with CSS3 module, media queries are invariably the key technology of responsive web design. These enable the content to render itself and adapt to screen resolutions.

§ Accessibility

CSS allows designers to present the same content in as many ways as are most suited to the site’s intended audience. Thanks to CSS, making sites accessible to all is another norm that’s growing in popularity.

CSS allows you to present content in different viewing styles, which is handy when your site needs to be easy-to-access to those who use screen readers or other specialized browsers.

Note: Even if you’re not required to create designs for a user-base with special needs, accessible designs can help you boost your search rankings, since they allow engines easier access to content.

§ Compatibility

The debate over designing for Internet Explorer continues to this day. While the newer IE9 and 10 are able to support today’s websites, the older versions just can’t seem to handle it.

CSS helps you combat compatibility crisis with responsive, and more importantly, ‘mobile-first’ technique. Start with baseline design for mobile and then apply desktop-layouts when the screen size is more than a certain resolution. Further use of conditional style sheets to load complex styles in older versions of IE will also help fix the problem.

Bottom line: Even without media query support from older browser versions, there are ways to make your site compatible to them. All of them still include CSS.

· Compliance

W3C, the World Wide Web Consortium, the body that defines standards and specifications for Internet, recommends designers to use CSS. The standards are revised continuously, but they, and most everyone else, agrees that CSS designs give a lot in terms flexibility and accessibility, not to mention performance.

Wrapping Up

Mastering CSS concepts might take a while, but the wide expanse of designing opportunities that becomes available to you once you get the hang of it will more than make up for it.

End point: Don’t let the syntax baffle you. Be patient and make some effort into learning it. You won’t regret it.