Introduction to CSS3
As you probably know, CSS stands for Cascading Style Sheet and it used in place of HTML frames, and HTML tables. CSS was created to make web site creation easier and more pragmatic. If you have an external style sheet linked on all pages of your website, this will allow you to make changes all across the site with just a few changes.
Traditionally, you would have to open every page of you site and make the necessary changes. If you had a 20 page site and you decided to change you logo then you'd have to open every page and add that new logo into the pages. With CSS, however, you could change the logo just by changing the image name in your style sheet.
Versions of CSS
CSS1 became a w3c recommendation in Dec 17th, 1996 and was last revised on Apr 11th, 2008. CSS1 included many CSS3 properties that are still used today such as margin, padding, border, and background. When CSS1 came out HTML 2.0 was the primary version of HTML. We're now on (X)HTML 4.01 as the standard.
CSS2 included improvements on CSS1 such as a box-model, overflow, and aural style sheets for aria required screen readers.
Many years later the w3c completed a major revision of CSS2 called CSS2.1 that became recommendation on September 8th, 2009. This includes many fixes on CSS2 and included many new values and new properties that made web design even more simple. At this time HTML 4.01, and XHTML 4.01 were standards at this point in time. When CSS 2.1 was birthed it began to phase out web sites made with HTML tables. CSS2 and CSS 2.1 allowed for a designer to make complex HTML table sites simpler and more practical to amend. This also gave way to very complex internet programs such as Drupal, Joomla, and WordPress (though they existed before 2008).
As of March 3rd, 2010, CSS3 is still a working draft by the w3c. Some properties such as border-radius, text-shadow, and border-image are already supported by the latest versions of Chrome, Safari, Firefox, and Opera. For more information on CSS3 you can read the documentation here.
Note: A large sum of these selectors will NOT work in IE versions 5.5-8. To test and see which selectors are buggy and are not supported please visit css3.info's Selector Test. If you're using the latest versions of opera, chrome, safari, and Firefox then you needn't worry.
Some things we will cover
We will cover an extremely useful property called the "text-shadow" property. It can look like the following:
and of course opacity/rgba:
- "Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 December 1996, revised 11 January 1999 http://www.w3.org/TR/2008/REC-CSS2-20080411/
- "Cascading Style Sheets, level 2, CSS2 Specification", B. Bos, H. W. Lie, C. Lilley and I. Jacobs, 12 May 1998 (revised 11 April 2008),
- "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification" B. Bos, H. Lie, I.H. http://www.w3.org/TR/CSS21/