Introduction
CSS is a very important topic in web development today and even though most web developers have left the old days of table based designs and such, I am pressed to find a good solid guide to CSS as a whole to the beginning web developer. My goal of this guide is to teach CSS a whole, styling and layout design, in an understandable way. The readers of this guide should already be familiar with HTML (come on, even my Mom knows HTML). I will employ easy to understand language and lots of examples to drill home key topics. I hope that by the end of this guide that with some practice that whoever reads this will be confident and have the tools to create great CSS based web pages.
Part 1: What is CSS and Why is it Important?
Cascading Style Sheets, or CSS for short, is a format for defining the properties of HTML (Hyper Text Markup Language) elements. CSS makes it easy to make global changes to a whole range of like HTML elements at the same. For example, changing the font and color of all of the paragraph elements on the page with last little as a single line of code, rather than defining the properties on every single paragraph tag as you would with a strictly HTML based approach.
From a design and layout perspective, CSS is a more powerful tool than the HTML table based way of building layout. With a little practice, CSS will make it easier to design your pages and make them more flexible.
CSS based designs are also more Accessible than table based designs. What is Accessibility you say? Accessibility is the measure if your website is accessible to people with disabilities. This includes people who are blind (and you text to speech programs called screen readers to surf the web) or use a different kind of computer input device to because of reduced motor skills or mobility from a disability. Accessibility also takes into account if your type is readable by people with poor vision (eg. elderly people) or by people who are colour blind. So, why should you care? Those people just make up a tiny portion of the Internet right? Wrong! Senior citizens represent the fastest growing community on the Internet and they have the greatest expendable income! Another reason you should care is a little thing called the Americans with Disabilities Act (ADA). This act decrees that all public resources should be made accessible to people with disabilities. This act applies to web sites too. The case involving the National Federation of the Blind and Target.com has been settled and Target is now forced to make their web site accessible.
CSS is also a key component of the Web Standards movement. Web Standards is a movement headed by an organization call the World Wide Web Consortium (W3C for short). The W3C is a standards body that moving forward in making standards for web mark up and programming techniques. Their goals are to make a standards guideline for the web so that website’s are more accessible to everyone and to provide ground rules as the Internet is being integrated into more and more devices (phones, PDAs, fridges, yes fridges…).
However, I shall warn you, CSS can be a fickle beauty. There are some pitfalls about it, but there are easy methods to making sure you do not fall into them. Different web browser all tend to have their own way of rendering CSS. The main reason this happens is that they seem to vary in the way they perform calculations when it comes the CSS box model (more on the box model later in the guide). However, with FireFox as a benchmark for model CSS rendering, we have seen Internet Explorer come a long way in improving its rendering abilities with version 7. Also the Safari browser is promising better rendering with the soon to be released version 3. A year ago, developing a website that was cross browser compatible was painful, but now a days things are looking up. Also, you can avoid running into these problems by adhering to a certain programming style that will hopefully keep you in your sanity.
Don’t let my last paragraph scare you. CSS is not hard, once you clearly understand a few key concepts you will be off to the races. CSS is an important skill and beginning web developers find it to be difficult and would say it is advanced compared to HTML. The fact of the matter is that CSS, once learned, is like your bread and butter in style and positioning elements on the web. I hope this overview of the importance of CSS has not bored you too much. Please check back soon for the first real lesson, basic styling with CSS.
Share and Enjoy:
These icons link to social bookmarking sites where readers can share and discover new web pages.
Last month I had a great opportunity to attend the Adobe AIR Bus Tour in Toronto, Ontario. It was a fantastic event and I would like to give my thoughts on the new Adobe AIR platform and the convention is general.