Mozilla Developer CSS Reference

For all you Web Design boffins out there especially the CSS gurus and also to all you new Web Designers and Developers who want to know more about Cascading Style Sheets (CSS), here is a great site:
Mozilla Developer Network (MDN) CSS Reference (https://developer.mozilla.org/en/CSS_Reference)

This great site lists and gives detailed descriptions of all the CSS properties, selectors, concepts, values, types, rules, and other miscellaneous info for all the CSS that works in Mozilla Firefox. It includes the traditional CSS 2.1 specifications to which most Developers have become accustomed to as well as the new and exciting developments in CSS 3 which are already implemented in browsers. It also includes browser compatibility tables for all CSS properties and selectors. This is a good place to start whether you are a beginner or Advanced Designer.

For those of you who have no idea what Cascading Style Sheets (CSS) is, here is a short description: Cascading Style Sheets is a web technology which allows designers to creatively style and change the layout of Webpage using simple rules to define how different elements on the page should look and be positioned. For example, you could specify that all normal paragraphs in <p> tags should be colored red, font Arial, and bold (in this case the CSS would be p{color:red; font-family:Arial; font-weight:bold}). Other properties that may be changed include but is not limited to: margins, padding, borders, fonts, size, positioning, whether scrollbars appear when text overflows, how the page looks when printed or viewed on a mobile phone, background images and colors, the style of a link when the mouse hovers over it, opacity, page transitions, list styles, etc. . CSS also allows developers to separate content from design (or layout) and designers the ability to make global changes to an entire website by changing a single file i.e. to change all headings on the entire site to green instead of blue you would simply change one CSS file that is linked to all the pages in site, e.g. "mystylesheet.css", and that would update the entire site.


CSS when combined with other web technologies may also be used to do some pretty advanced stuff like DHTML (Dynamic HTML) – Combining JavaScript, CSS, and HTML to change content dynamically and create animation. Basically JavaScript can be used to change CSS styles dynamically, as the user interacts with the page or across time, thereby being able to show or hide content, create dynamic or drop-down menus for navigation, animate page elements, and even create games.


Some other sites relating to CSS you might be interested in:

Mozilla CSS Extensions also from MDN (https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions)
Gives a list of Firefox specific CSS.


Safari CSS Reference (http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html)
Gives a list of Safari/Chrome/Webkit specific CSS .


Sitepoint CSS Reference (http://reference.sitepoint.com/css)
Gives an overview of basic CSS2.1 also has a good compatibility guide.



W3Schools CSS Tutorial (http://www.w3schools.com/css/default.asp)
Great place to start for those who still new to CSS or want to learn or test a new property or selector. Has a great Try-it-yourself feature which allows you to dynamically edit CSS and see the result online. They also have a CSS Reference.


Official W3C CSS Specifications and drafts (http://www.w3.org/Style/CSS/)


Stay tuned and follow this blog as I may be posting more on new CSS 3 properties and selectors soon.