CSS guide

From CDOT Wiki
Jump to: navigation, search

Project Name

CSS Guide


The project has progressed amazingly well thus far! The project leaders would like to take this opportunity to sincerely thank each and every contributor for their time and effort and input. More importantly we thank them for their interest in the success of our project.

Moving forward, there are still a few tags already on the current list that require completion.

Coming Soon

  • This section will contain status information about what is done and what is left to do, etc.
  • Basically current state of affairs.

Project Description

The Mozilla Developer Center would like to add a CSS guide to its set of major documents, covering at least the top 100 CSS properties in use on the web today. This data can be obtained through tools . It should include numerous examples, and a fair number of small tutorial/how-to sections for different common tasks or requests from web authors.


Project Leader(s)

Sherman Fernandes (sherman)

Mark D'Souza (mdsouza)

Dave Manley (seneManley)

Lukas Blakk (lsblakk)

Project Contributor(s)

Andrew Smith (andrew) - setup SVN accounts for all project members.
Dave Humphrey (dave) - Course Professor, providing valuable insight and direction.
Ian Hickson (hixie)
Mike Shaver (shaver) - Obtained CSS property usage data.
Colin Guy for all his help in growing the property list.

NOTE: only Project Leader(s) should add names here. You can’t add your own name to the Contributor list.

CSS Property Documentation Contributors

Sara Minchella
Ben Hearsum
Liz Chak
Dejan Tolj
Colin Guy
Richard Chu
Man Choi Kwan
Dave Bertenshaw
Dean Woodside
Aditya Nanda Kuswanto
Mohamad Attar

For a complete list of contributors please see the property list.

Thanks to all contributors for their efforts !

New Recruits

If you like to help in this CSS Guide, add your name next to a property and link it to your profile page in this section. We'll add you as a contributor! (if we miss someone, let us know).

Project Details

  • Get connected to #devmo on IRC and specifically to dria (she owns MDC) and sheppy (technical writer/dev with Mozilla).
  • Research where in the Mozilla code base the CSS properties live, since you'll want to be able to consult that code as you research info about the properties and their use in Firefox. For this you can use http://lxr.mozilla.org
  • Once the list is known, divide it and work in parallel.
  • Research Mozilla proprietary tags and their usability in browsers.

Project News

  • Feb 3, 2007 - Lukas has begun porting properties across, and the work is going well.
  • Jan 30, 2007 - Spoke to Eric Shepherd about the project, and he expressed interest in having it transfered to devmo. He suggests using the existing border-style property on devmo as an example of how to format what we have. Lukas Blakk has offered to take the lead on this effort.
  • Dec 13, 2006 - The CSS Guide is almost completed! A couple more properties to fill in
  • Dec 13, 2006 - We now have 100 properties!!! Just need people to help fill it in
  • Dec 13, 2006 - Thanks to Colin and Mark for expanding the property list (currently 80+).
  • Dec 6, 2006 - Added more elements (from 69+)
  • Dec 6, 2006 - Looking for ways to contribute other than documenting tags? Why not help us complete the list of the top 100 CSS tags. Contact a project leader for more information on how you can help.
  • Nov 22, 2006 - We welcome and thank all the new contributors to their project for all their efforts. Contributing to the project is easy. To get started simply pick an unassigned property from the task list below and follow the template. Feel free to contact the any project leader should you have any questions.
  • Nov 15, 2006 - Assigned initial 30 CSS properties among project leaders.
  • Nov 15, 2006 - Added 19 Mozilla-specific proprietary CSS properties to CSS table.
  • Nov 15, 2006 - Gave project update to colleagues in DPS909 and recruited documentors for the project.
  • Nov 10, 2006 - Added table of top 50 CSS properties for completion (Additional 50 to follow).
  • Nov 10, 2006 - CSS Property "Color" page outline completed.
  • Oct 29, 2006 - Working to complete documentation for a few tags prior to submitting it for review.
  • Oct 22, 2006 - Currently working to document a few CSS properties (minimum of 3) using the initial template draft as a guide. The next step would be to share experiences / feedback etc. regarding the template so that suggested revisions / corrections can be made moving forward. This will allow us to improve the quality of the template right from the start and prevent painful re-working later on. Some of the most used CSS properties can be found here. Thanks to Mike Shaver for providing us with this info !
  • Oct 17, 2006 - Spoke to Shaver and got a list of CSS properties and their usage. See above.
  • Oct 07,2006 - Created initial template draft for initial review. This is a work in progress and is subject to change. The template currently only contains heading titles but will be updated to reflect sample content.
  • Oct 06, 2006 - Prof. Humphrey (dave) stated that Mike Shaver is working with Ian Hickson (hixie) at Google regarding getting access to their CSS related data.
  • Sept 30,2006 - Currently trying to determine which headings i.e CSS property details etc. are the most important and thus should be included in the design of the single page template.
  • Sept 26, 2006 (dave) - I spoke to shaver on the phone today about this project, and he had some suggestions. First, he is going to see if hixie (Ian Hickson) at Google can help us get access to the top 100 CSS properties/etc (see http://code.google.com/webstats/ for another similar project he's done). Shaver also suggested that the best starting point is for you to create a Single Page Template that you'll use to work on all these. This page should include things like: links to W3C standards, example uses, description, data (e.g., legal values, edge cases, etc.) from the Mozilla code, etc. You might want to consult the existing CSS Reference (e.g., the background property), but don't use that as the basis for your template--it is not complete. Once you have the top 100 properties/etc you can divide them up between you and tackle this in parallel.

CSS Properties

# CSS Property Assignee MDC Port Status
1 color Sherman Already Exists
2 font-size Dave Complete
3 font-family Mark Already Exists
4 text-decoration Sherman Complete
5 font-weight Dave Complete
6 background-color Mark Already Exists
7 width Sherman Complete
8 text-align Dave Complete
9 margin-top Mark  
10 margin Sherman  
11 margin-bottom Dave  
12 border Mark Already Exists
13 padding Sherman  
14 line-height Dave  
15 height Mark  
16 margin-left Sherman  
17 font-style Dave  
18 padding-left Mark  
19 padding-top Sherman  
20 position Dave Already Exists
21 border-bottom Mark Already Exists
22 background-image Sherman Already Exists
23 background Dave Already Exists
24 margin-right Mark  
25 border-right Sherman Already Exists
26 padding-bottom Dave  
27 border-top Mark Already Exists
28 border-left Sherman Already Exists
29 top Dave  
30 display Mark Complete
31 left Sara Minchella  
32 padding-right Ben Hearsum  
33 vertical-align Liz Chak Already Exists
34 background-repeat Liz Chak Already Exists
35 z-index Dejan Already Exists
36 float Dejan Complete
37 cursor Dejan Complete
38 border-style Colin Guy Complete
39 font Richard Chu Complete
40 border-width Dejan Already Exists
41 background-position Man Choi Kwan Already Exists
42 letter-spacing Dave Bertenshaw  
43 visibility Richard Chu  
44 border-color Dave Already Exists
45 border-collapse Colin Guy Complete
46 list-style-type Aditya Nanda Kuswanto Already Exists
47 text-transform Aditya Nanda Kuswanto  
48 clear Sara Minchella Complete
49 overflow Richard Chu  
50 text-indent Aditya Nanda Kuswanto  
51 -moz-binding Dave Already Exists
52 -moz-border-radius Dave Already Exists
53 -moz-border-radius-topleft Dave Already Exists
54 -moz-border-radius-topright Dave Already Exists
55 -moz-border-radius-bottomright Dave Already Exists
56 -moz-border-radius-bottomleft Dave Already Exists
57 -moz-border-top-colors Mohamed Attar Already Exists
58 -moz-border-right-colors Mohamed Attar Already Exists
59 -moz-border-bottom-colors Mohamed Attar Already Exists
60 -moz-border-left-colors Mohamed Attar Already Exists
61 -moz-opacity Liz Chak Already Exists
62 -moz-outline Aditya Nanda Kuswanto Already Exists
63 -moz-outline-color Aditya Nanda Kuswanto Already Exists
64 -moz-outline-style Aditya Nanda Kuswanto Already Exists
65 -moz-outline-width Aditya Nanda Kuswanto Already Exists
66 -moz-outline-focus Dave Should this be "user-focus"?
67 -moz-user-input Sherman & Dean Already Exists
68 -moz-user-modify Sherman & Dean  
69 -moz-user-select Sherman & Dean  
70 text-overflow Richard Chu Clarify
71 text-justify Richard Chu Clarify
72 right Sara Minchella  
73 border-spacing Sara Minchella Complete
74 bottom Sara Minchella Already Exists
75 background-position-x Colin Guy Clarify - Already Exists
76 background-position-y Colin Guy Clarify - Already Exists
77 border-bottom-color Dean & Sherman Already Exists
78 border-bottom-style Dean & Sherman  
79 border-bottom-width Dean & Sherman Already Exists
80 border-top-color Dean & Sherman Already Exists
81 border-top-style Dean & Sherman Already Exists
82 border-top-width Dean & Sherman Already Exists
83 font-size-adjust Mark Complete
84 max-height Mark  
85 max-width Mark  
86 min-height Mark  
87 min-width Mark  
88 font-variant Mark  
89 azimuth Mark Already Exists
90 direction Mark Already Exists
91 list-style Mark Already Exists
92 list-style-image Mark Already Exists
93 list-style-position Mark Already Exists
94 outline-color Mark  
95 border-left-color Sherman Already Exists
96 border-left-style Sherman Already Exists
97 border-left-width Sherman Already Exists
98 border-right-color Sherman Already Exists
99 border-right-style Sherman Already Exists
100 border-right-width Sherman Already Exists