NB: This page is archived without styles. Go to our home page or read my blog.
Imagine what it would be like to work with 29 other people on the same CSS file. Now you get the chance to help me with a little teamwork experiment.
Working with other designers or developers on any project can often be tricky. But imagine what it would be like if there were 29 other people working on the same CSS file! Well imagine no more, because now you get the chance to help Malarkey with a little teamwork experiment.
Reproduced below is a CSS style-sheet bursting with elements, but with no rules written. All you have to do is write a set of rules for the element which number corresponds with your reply number in the comments follows the rule written by the person above you. It might also be helpful to explain why you chose to do what you did.
There are thirty spaces to fill, any valid CSS is allowed with the one exception of display:none;. Of course you have no idea what the XHTML file contains, but I'll publish the page with all the styles applied when we have thirty.
I think that with all the talent floating around out there, that all together we should be able to cook up a design worthy of the mighty StyleGala!
/* (1) */
* { }
/* (2) */ html { }
/* (3) */ body { }
/* (4) */ h1 { }
/* (5) */ h2 { }
/* (6) */ h3 { }
/* (7) */ h4 { }
/* (8) */ p { }
/* (9) */ blockquote { }
/* (10) */ q { }
/* (11) */ dl { }
/* (12) */ dt { }
/* (13) */ dd { }
/* (14) */ ul { }
/* (15) */ ol { }
/* (16) */ li { }
/* (18) */ img { }
/* (19) */
a:link { }
a:visited { }
a:hover { }
a:focus, a:active { }
/* (20) */ form { }
/* (21) */ fieldset { }
/* (22) */ label { }
/* (23) */ input, select, textarea { }
/* (24) */ div { }
/* ONLY BACKGROUND AND BORDER RULES TO BE ADDED */
/* (25) */ div#branding { }
/* (26) */ div#nav-main { }
/* (27) */ div#content { }
/* (28) */ div#content-main { }
/* (29) */ div#content-sub { }
/* (30) */ div#siteinfo-legal { }
/* NO EDITING BEYOND THIS POINT */
div#branding { }
div#nav-main { }
div#content { }
div#content-main { }
div#content-sub { }
div#siteinfo-legal { }
Thank-you to all the talented designers and developers who collaborated in this experiment. I wonder if we have an award winning design? Let's see.
#1 On May 18, 2005 12:14 AM Luke Redpath said:
/* (1) */
*
{
// enable easy em usage
// i.e. 1.1em = 11px
font-size: 62.5%
color: #444;
margin: 0; padding: 0;
line-height: 1.4
}Get in there ;)
#2 On May 18, 2005 12:19 AM Josef Dunne said:
Hey what a great idea! Ok let me see.. i think ill start with something simple as to not totally crash the experiment, i was thinking along the lines of {float:left} but i decided against that... so im going to with this:
/* (2) */ html {background-color:#EEE; margin:5px; }
#3 On May 18, 2005 12:25 AM Keith said:
Got the ems in there, let's see how this changes it up:
/* (4) */ h1 {
font-size: 28px;
line-height: 32px;
font-weight: bold;
font-family: gill sans, georgia, times, times-roman, verdana, san-serif;
letter-spacing: 12px;
color: #A9564D;
}
#4 On May 18, 2005 12:27 AM Andrea said:
I get the body! No jokes, please.
How about a nice legible font face?
body {
font-family: "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
}
#5 On May 18, 2005 12:28 AM Malarkey said:
Ed says: OK, this isn't working is it? Malarkey obviously didn't consider you guys posting at the same time.
Ignore your comment numbers, just try to keep it in order ;)
#6 On May 18, 2005 12:35 AM Baxter said:
I'll go with h2
/* (5) */ h2 {
font-size: 24px;
line-height: 28px;
font-weight: bold;
font-family: gill sans, georgia, times, times-roman, verdana, san-serif;
letter-spacing: 9px;
color: #A9564D;
}Just a downsized h1 from above, obviously.
#7 On May 18, 2005 12:38 AM Marko said:
h3 { padding: 2px 5px; background: #f30; color: #fff; font-size: 1em; font-weight: bold; }
It was made in hurry for obvious reason :)
#8 On May 18, 2005 12:41 AM Matt Wilcox said:
This is why I write hX font styles for all of them in one selector and just downsize after, something like:
h1, h2, h3, h4, h5, h6 {
font-family: "Times New Roman", times, serif;
font-weight: bold;
letter-spacing: -.5em;
line-height: 1.5em;
}h1 {font-size: 32px}
h2 {font-size: 24px}
h3 {font-size: 18px}
h4 {font-size: 16px}
h5 {font-size: 14px}
h6 {font-size: 12px}(The above is NOT a contribution to the CSS project here)
#9 On May 18, 2005 12:57 AM Rachel said:
Following on from h3:
h4 {
padding:2px 5px;
background: #f90;
color: #fff;
font-size: 1em;
font-weight: bold;
font-style:italic;
}:0)
#10 On May 18, 2005 01:00 AM harry said:
well hell! I'm going to have the p ...
p {
margin-bottom:1.2em;
color:#4F130D;
font-size:1em;
line-height:1.6;
}
#11 On May 18, 2005 01:05 AM Justin Perkins said:
/* (11) */ dl{
border:1px solid gold;/* I just wanted to type "solid gold" */
background:#f1f1f1;
padding:1em;
font-family:sans-serif;
font-size:1.5em;
color:#ff0;
}
#12 On May 18, 2005 01:05 AM Craig C. said:
Skipping ahead one in case somebody gets their post in before me...
/* (9) */ blockquote {
font: italic .9em/1.3em Georgia, "Times New Roman", Times, serif;
color: #691c4f;
border-left: 3px double #ccc;
margin: 0 20px;
padding: 5px 15px;
text-align: justify;
}This is like CSS Mad-libs!
#13 On May 18, 2005 01:09 AM Nicholas Rougeux said:
This is a rather fun idea you have here. It's CSS Mad Libs! Dan, it looks like Craig beat me to it in that observation. It has all the potential of coming out fantastic or just plain weird. Sounds like a plan to me. Anyway, here's my contribution following the theme:
q { font-style: italic; color: #686868; }
#14 On May 18, 2005 01:14 AM Harry Jones said:
woohoo ul is my favourite
ul {
padding: 0;
margin: 0;
list-style: none;
background: url(https://budugllydesign.com/archivebud/bud9706/sotd/budfish2.gif);
}
#15 On May 18, 2005 01:56 AM Arnaud said:
/* (15) */
ol {
margin-left: 20px;
font: 1.4em "Lucida Grande", Verdana, sans-serif;
color: #333333;
list-style-type: upper-roman;
}
#16 On May 18, 2005 02:13 AM Casey Gollan said:
I decided to go with the number 15 ;-)
/* (15) */ ol {
padding: 15px;
margin: 15px;
width: 15px;
height: 15px;
color: #015;
background-color:#000;
font-size:15px;
overflow:auto;
}
#17 On May 18, 2005 02:15 AM Casey Gollan said:
Scratch that!
Just use my styles for 16 then,/* (16) */ li {
padding: 16px;
margin: 16px;
width: 16px;
height: 16px;
color: #016;
background-color:#000;
font-size:16px;
overflow:auto;
}
#18 On May 18, 2005 02:20 AM chet said:
img{
border:3px double black;
margin:10px;
}
#19 On May 18, 2005 02:23 AM Glen C. said:
This is an awesome idea, but I think people are holding out a little until they get to some of the good elements. Here's my contribution to the img portion (What happened to #17?)
/* (18) */ img {
padding: 3px;
border: 3px solid #AF5F57;
}
#20 On May 18, 2005 02:28 AM myk said:
/* (19) */
a:link {
text-decoration:none;
font-size:smaller;
text-transform:uppercase;
}a:visited {
text-decoration:none;
font-size:smaller;
text-transform:uppercase;
color:#ccffcc;
font-weight:bolder;
}a:hover {
background:#006600;
}a:focus, a:active {
color:#aaffaa;
}
#21 On May 18, 2005 02:39 AM Carlos Porto said:
Just making sure the form element stays under control and plays nice.
/* (20) */
form { margin:0; padding:0;}
#22 On May 18, 2005 02:53 AM Nick Cowie said:
21
from a css I just had lying aroundfieldset
{
float: left;
display: block;
margin: 0em 1em 1em 1em;
padding: 1em;
font-family: Arial, Helvetica, Sans-Serif;
border-style: solid;
border-color: #009;
}
#23 On May 18, 2005 03:14 AM Calvin Walton said:
Ok, i'll do #22, label:
label {
float: left;
margin: 0 1em 0 0;
font-weight: bold;
}
#24 On May 18, 2005 03:15 AM joel schou said:
Lessee, this ought to be interesting. This was buried pretty far down in a cascade on an existing site, so I'll be interested to see how it behaves without the rest of the hierarchy.
/* (22) */ label {
margin: 0 auto;
display: block;
width: 60%;
text-align: center;
text-transform: lowercase;
background: #191917;
}
#25 On May 18, 2005 03:16 AM joel schou said:
Aw drat. Scratch that. Let me go throw something together for fieldset {} instead.
#26 On May 18, 2005 03:20 AM joel schou said:
OK, here we are:
/* (23) */ fieldset {
padding: .5em 1em;
background: #fbfbfb;
border: 1px solid #ebebeb;
font: 1.1em/1.4em Georgia, Times, 'Times New Roman', serif;
color: #4b4;
}
#27 On May 18, 2005 03:36 AM Nathan said:
/* (24) */
div {
background: url(https://www.dltk-teach.com/alphabuddies/image/bird.gif) top left;
padding: 6em;
margin: 1px;
font: 1.3em/2.0em Garamond, Times, 'Times New Roman', serif;
}
#28 On May 18, 2005 03:38 AM Nathan said:
I don't think anybody actually did # 23...
#29 On May 18, 2005 03:56 AM Marco said:
input, select, textarea {
display: block;
margin: 5px;
border: dashed 1px #666;
padding: 0 0 0 3px;
color: #333;
background: #dedede;
font: bold 1.0em "Trebuchet MS", sans-serif;
}
#30 On May 18, 2005 03:58 AM Marco said:
Sorry, that was #23. No one had completed it as of yet.
#31 On May 18, 2005 04:05 AM joel schou said:
Wow, how did I screw that one up? I even checked it twice and apparently counted backwards both times. How embarrassing...
May I attempt to redeem myself with some gaudy coloring for the first div?
/* (25) */ div#branding { background: #fa6; border: 6px double #118811; }
#32 On May 18, 2005 04:55 AM Jack said:
/* (26) */
div#nav-main {
background: #fff;
border-left: 5px solid #c6f;
/* text-decoration: blink; kidding! */
}
#33 On May 18, 2005 05:12 AM Mike said:
Alright, number 30 then, just for safe measure.
/* (30) */ div#siteinfo-legal {
border-top: 2px dashed #60A1C2;
background-color: #E9DBA1;
}That should make it nice and gawdy.
#34 On May 18, 2005 05:18 AM myk said:
12 and 13 still missing! And...wait a second...There IS no #17!
#35 On May 18, 2005 07:30 AM Hrvoje said:
Just to ad a definition list underlined "header":
/* (13) */
dt {
font-weight:bold;
margin:0 0 .5em 0;
border-bottom:.5em solid #fc0;
}
#36 On May 18, 2005 08:25 AM kemie said:
/* (12) */ dt {
font: bold 11px Georgia,"Times New Roman", Times, serif;
color:#665C48;
padding: 4px;
border-bottom: 1px dotted #8BA657;
background-color: #F7F6F1;
}
#37 On May 18, 2005 08:40 AM Ozh said:
Indeed, rule #17 is missing, but that can't be unintentionnal, so it must be a hidden rule. Well, I was late anyway and I had to throw something in.
/* (17) */
html {
min-height: 100%; margin-bottom: 0.1px;
/* always scrollbar */
scrollbar-track-color: #DEE7FA;
scrollbar-face-color: #DEE7FA;
scrollbar-highlight-color: #100884;
scrollbar-shadow-color: #100884;
scrollbar-darkshadow-color: #DEE7FA;
scrollbar-arrow-color: #100884;
scrollbar-3dlight-color: #DEE7FA;
/* AH ! doesn't validate. But who cares about validation ? */
}
#38 On May 18, 2005 08:54 AM Matthew Pennell said:
I seriously can't tell what hasn't been done yet! Here's a stab in the dark:
/* (27) */ div#content {
width: 75%;
float: left;
margin: 1em 0 1em 1em;
border-right: 1px dotted #a1a2a3;
}
#39 On May 18, 2005 08:57 AM Ariel Burone said:
So here's #13
dd {
border-top : 1px dashed #9a9bb2;
border-right : 1px dashed #9a9bb2;
border-left : 1px dashed gold;
border-bottom : 1px dashed gold;
/* can't find a way to put all this in only one line*/
padding: 0 0 0 5px;
color: silver; // so, we have gold and silver. who will put some copper :-)
}
#40 On May 18, 2005 09:59 AM Phunky said:
/* (28) */
div#content-main {
width : auto ; height : auto ;
margin : 0px ; padding : 5px ;
background : #CCCDCF ;
border-bottom : 2px solid #999 ;
}
#41 On May 18, 2005 10:02 AM John said:
body {
background-color: green;
font-size: 5005%;
tits.
}
#42 On May 18, 2005 10:02 AM John Oxton said:
The who, the what, the where now?!!!
Anyone want me to make the coffee?! ;o
#43 On May 18, 2005 10:21 AM Rob Waring said:
/* (29) */ div#content-sub {
width: auto;
background-color: #34544E;
border-left: double 3px #A4A4A4;
border-right: double 3px #A4A4A4;
border-top: solid 3px #A4A4A4;
border-bottom: solid 3px #A4A4A4;
}Here goes nothing?
#44 On May 18, 2005 10:21 AM nikki said:
Conclusion:
Yup, I think that's pretty much what it would be like to work with 29 other people on the same CSS file! :)
Looking forward to the results...
#45 On May 18, 2005 10:22 AM Rob Waring said:
/* (29) */ div#content-sub {
width: auto;
background-color: #34544E;
border-left: double 3px #A4A4A4;
border-right: double 3px #A4A4A4;
border-top: solid 3px #A4A4A4;
border-bottom: solid 3px #A4A4A4;
}Here goes nothing?
#46 On May 18, 2005 10:24 AM Rob Waring said:
Gaa! I got an error the first time. Oh well, nm eh?
#47 On May 18, 2005 10:27 AM Dave said:
missing out is what I get for having an early night and a lie in!
#48 On May 18, 2005 03:41 PM David Bloomfield said:
div#siteinfo-legal { margin:10px 0 0 0; padding: 5px 0 5px 0; font-size:90%; color: #666; background-color:e5e5e5;}