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.
After his altogether brilliant article Why CSS Bugs Me, I'm officially designating this week to be John C. Dvorak week. To help Mr. Dvorak understand the real power of CSS in modern web design, I'm looking to you, CSS celebrity chefs in a revival of Too Many Cooks!
You see, Mr. Dvorak thinks that bugs cascade when they are part of a larger style sheet, amplifying problems. Worse yet, nobody except the most techie insiders wants to talk about this mess.
. Well we'll show him! And you can forget about arguing with him with pokey little examples such as Wired or the CSS Zen Garden. No way, it's time to show him what CSS can really do.
In case you might have been watching Deal Or No Deal at the time, the original Too Many Cooks took collaborative web design to a new low high.
Thirty top designers and coders volunteered a style rule each to create a tasty dish of pure genius. As Notts County striker and sometimes web designer and reviewer Simon Collison wrote at the time.
I'm predicting this approach, and the look and feel of Too Many Cooks will have a great influence on web design throughout the remainder of 2005. Beige, italics, fish and stupid five-year-old's drawings of big birds will be influencing us all from this pivotal point onwards.
Now Too Many Cooks is back and with a difference. Let's show Mr. Dvorak the true power of CSS by baking something personal for him.
The rules are simple and the same as last year.
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 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.
/* (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 { }
/* (25) */ div#branding { }
/* (26) */ div#nav_main { }
/* (27) */ div#content { }
/* (28) */ div#content_main { }
/* (29) */ div#content_sub { }
/* (30) */ div#siteinfo_legal { }
I think that with all the talent floating around here, that all together we should be able to cook up a design worthy of the mighty Mr. Dvorak!
#1 On July 21, 2006 09:08 AM Andrew Disley said:
Reset margins and paddings on all elements:
/* (1) */ * { margin: 0; padding: 0; }
#2 On July 21, 2006 09:08 AM Matthew Pennell said:
/* (1) */ * {
margin: 1px;
padding: 1px;
}That should make things interesting...
#3 On July 21, 2006 09:27 AM Robin said:
/* (2) */
html {
border: 10px solid #e2206e;
font: 0.9em/1.5 "Lucida Grande", "Trebuchet MS", sans-serif;
}
#4 On July 21, 2006 09:31 AM Mark said:
/* (2) */
html {
margin:0;
border: 10px solid #e2206e;
font: 0.9em/1.5 "Lucida Grande", "Trebuchet MS", sans-serif;
}
#5 On July 21, 2006 09:39 AM Kate Bolin said:
/* (4) */ h1 {
font-family: Georgia, Times New Roman, serif;
font-size: 150%;
text-align: center;
margin: 0;
padding: 0.5em;
text-transform: uppercase;
border-bottom: 1px dotted #ccc;
}
#6 On July 21, 2006 09:41 AM Rob Wilmshurst said:
/* 3 */
body {
background: #DEFF8F;
color: #333;
border: 5px solid #fa0;
padding: 10px;
}
#7 On July 21, 2006 09:57 AM kemie said:
/*4*/
h1{
font-size:2em;
color: #719F00;
padding:4px 0;
border-bottom:2px solid white
}
#8 On July 21, 2006 10:02 AM Andy Hume said:
/* (5) */ h2 {
font-size:1.3em;
font-family:"myriad pro", "lucida grande", verdana, trebuchet, sans-serif;
text-transform:uppercase;
letter-spacing:1.4em;
margin:20px 0 10px 0;
}
#9 On July 21, 2006 10:04 AM JackP said:
/*5 - because everyone wants to read things in caps, and what does it matter if you can't see all of a heading? You're just lucky I didn't make the font wingdings */
h2 { letter-spacing:0.2em; font-variant:small-caps; overflow:hidden;}
#10 On July 21, 2006 10:14 AM davydesign said:
/* (5) */
h2 {
display: block;
width: 200px;
height: 150px;
text-indent:-9999px;
background: #FFF url(https://www.850thebuzz.com/blog/wp-content/uploads/2006/07/Zinedine%20Zidane%20Headbutt,%20Super%20Mario.gif) no-repeat top left;
overflow: hidden;
}materazzi/mario mashup.
#11 On July 21, 2006 10:15 AM Joel said:
/* (6) */
h3 {
font-weight:bold;
color:#47572F;
background-color:inherit;
border-left: 5px solid #fa0;
padding-left:1em;
}
#12 On July 21, 2006 10:50 AM Dean Edwards said:
/* (99) */
h1:after {
content: " - Where'd my CSS go!?";
}
#13 On July 21, 2006 11:16 AM Cole said:
/* (7) */ h4 {
border-bottom: 2px solid #666666;
font-size: 1.2em;
font-family: verdana, sans-serif;
background-color: inherit;
color: #666666;
padding: 4px 0;
margin: 14px 0 4px 4px;
text-align: right;
}
#14 On July 21, 2006 11:17 AM Joko13 said:
/* (19) */
a:link {
color: #719F00;
text-decoration: none;
}
a:visited {
color: #66cc00;
text-decoration: none;
}
a:hover {
color: #719F00;
text-decoration: underline;
}
a:focus, a:active {
color: #66cc00;
text-decoration: none;
}
#15 On July 21, 2006 11:23 AM Martin said:
/* (7) */
h4 {
color:#903;
line-height:1.1em;
letter-spacing:1.4em;
}
#16 On July 21, 2006 11:24 AM Martin said:
/* (8) */
p {
line-height:1.1em;
color:orange;
}
#17 On July 21, 2006 11:48 AM Neil Crosby said:
/* (9) */ blockquote {
background-color: #FC0;
color: #000;
margin-top: 1em;
margin-bottom: 2em;
text-transform: lowercase;
font-family: "Comic Sans MS", cursive
padding: 0.5em;
}
#18 On July 21, 2006 11:52 AM Richard@Home said:
/* (10) */ q {
font-family: serif;
font-style: italic;
background: #EEE;
color: #333;
}
#19 On July 21, 2006 12:00 PM Mei said:
/* (11) */ dl {
margin:0 10px;
padding:0;
border-left:2px solid #47572F;
border-top:2px solid #47572F;
}
#20 On July 21, 2006 12:30 PM Hilde said:
/* (12) */ dt {
margin: 30px 0;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: #230;
background: #ab8;
border-right: 2px solid #674;
border-bottom: 2px solid #674;
}
#21 On July 21, 2006 12:46 PM nick said:
/* (13) */ dd {
font-size: large;
font-weight: bold;
border: 5px dashed red;
background-color: #ffa;
color: #black;
}descriptions have to be seen :)
#22 On July 21, 2006 12:47 PM nick said:
oops, should be
color:black;
above :)
#23 On July 21, 2006 01:07 PM Jason G said:
(14) ul
{ font-size: 1.3em; list-style: none; border: 3px dotted #336699; padding: 10px; width: 90%; margin: 1em auto; }
#24 On July 21, 2006 01:09 PM Jo’o Craveiro said:
/* simplistic, sort of how I usually style my ul's */
/* (14) */ ul {
list-style-type: square;
margin: 0; padding: 0;
padding-right: 1em;
font-style: italic;
}
#25 On July 21, 2006 01:11 PM Jo’o Craveiro said:
Well, since I got 2 minutes late without noticing, strike my above contribution out, and:
/* (15) */ ol {
list-style-type: lower-roman;
margin: 0; padding: 1em;
font-style: italic;
}
#26 On July 21, 2006 01:14 PM Chris Casciano said:
simple.. but want to see what people will do with this one...
/* (14) */ ul {
position:relative;
top:0;
left:30;
}
#27 On July 21, 2006 01:19 PM Chris Casciano said:
make that...
/* (16) */ li {
position:relative;
top:0;
left:0;
padding-right:150px;
padding-top:30px;
min-height:150px;
background:url('https://www.cdfa.ca.gov/ahfss/ah/images/animated_arrow.gif') no-repeat top left;
}
#28 On July 21, 2006 01:43 PM Kalle said:
(17) is missing?
/* (19) */ img {
padding: 5px;
margin: 5px;
border: 1px solid #222;
}
#29 On July 21, 2006 02:04 PM Steven Tew said:
/* 19 */
a:link { color: #903; text-decoration: underline; }
a:visited { color: #222; text-decoration: underline; }
a:hover { color: #903; text-decoration: none; }
a:focus, a:active { color: #903; text-decoration: underline; }
#30 On July 21, 2006 02:31 PM Rob Mientjes said:
/* 20 */
form {
margin: 1em;
padding: 16px 6px;
border: .3em dotted #f08;
}
form:hover { /* I wonder if Dvorak can see this in effect, 'cause considering his stance, he _could_ still be using IE5 */
border-color: red;
}
Go-go-gadget form styling!
#31 On July 21, 2006 02:43 PM Michael Bester said:
/* (21) */
fieldset
{
border: none;
float: right;
width: 15em;
font-style: italic;
}fieldset:hover
{
font-weight: bold;
font-size: 130%;
}
#32 On July 21, 2006 02:53 PM Andrew K. said:
/* (11) */
dl {
padding:.5em 6% .5em 2%;
margin:.5em 2%;
border:1px solid #ccc;
border-right:6px double #be110c;
background:#2f2222;
color:#fff;
}
#33 On July 21, 2006 03:05 PM mattc said:
/*(28)*/
div#content_sub {
padding: 10px;
background: #f90 url(https://static.flickr.com/35/93001082_f2019e631c.jpg?v=0) repeat;
color: #fff;
font: bold 12px Georgia, Palatino, Palatino Linotype, serif; color: #fff;
border: 2px solid #fff;
}/* I think we need more backgrounds here. Wouldn't want the content to be readable!
Background made by Electric-Eye, released under CC license. */
#34 On July 21, 2006 03:21 PM Andrew K. said:
/* (30) */
div#siteinfo_legal {
position:absolute;
bottom:10px;
right:10px;
width:20%;
min-height:80px;
background:#fff url(https://leftjustified.net/images/stappler.gif) no-repeat left 50%; /* image is public domain - openclipart.org */
padding:1em 1em 1.5em 80px;
border:1px dotted #ccc;
border-width:1px 0;
}
#35 On July 21, 2006 04:09 PM Dave J said:
/* (22) */
label {
position: absolute; /* Allows input boxes to be aligned opposite the label using margin-left property */
color:blue;
background-color:red;
text-align:right;
width:160px;
padding:1em;
text-decoration:underline;
}label:hover {
color:red;
background-color:blue;
text-decoration:none;
}
#36 On July 21, 2006 04:17 PM Marco said:
/* (29) */
div#content_sub {
display: block;
float: right;
width: 500px;
color: Tomato;
background: Khaki url(https://static.flickr.com/37/81694593_e49dcc61a1.jpg) 0 0 repeat;
border: dashed 5px Moccasin;
font: 3.0em Wingdings, sans-serif;
line-height: 4.0em;
}This should look good. ouch :)
#37 On July 21, 2006 04:19 PM Johan said:
To fill the styling gap for the forms
/* (21) */
fieldset
{
border: none;
float: right;
width: 15em;
font-style: italic;
}fieldset:hover
{
font-weight: bold;
font-size: 130%;
}I continue:
/* (22) */ label {
display: block;
float: left;
margin-bottom: 10px;
}label:first-letter
{
padding-bottom: 1px;
border-bottom: 1px #d60153 solid;
font-weight: bold;
text-transform: capitalize;
}a tip (add a <br> to clear the float )
#38 On July 21, 2006 07:33 PM Analgesia said:
So this is where all my lost CSS is hiding.
BTW Here is some CSS I found hanging around the local web-shop scaring away customers:
/* (23) */
input, select, textarea {
border: solid 1px #ccc;
background-color: #fff;
}
#39 On July 21, 2006 07:54 PM BeHE said:
/* (24) */ div { border: 10px solid yellow; background-color: yellow; color: black; }
#40 On July 21, 2006 08:00 PM riccard0 said:
/* (18) */
img
{
border: solid 1px #666;
background-color: #fff;
padding: 15px;
display: block;
}A good ol' fashioned photo print look for images.
#41 On July 21, 2006 08:58 PM Malarkey said:
Nice going chefs!
I just need three more of you to stir in;
/* (25) */ div#branding { }
/* (26) */ div#nav_main { }
/* (27) */ div#content { }And we can get this out of the oven!
#42 On July 21, 2006 09:08 PM Steven Woods said:
/* (26) */
div#nav_main {
float: right;
height: 150px;
font-size: 2.0em;
text-decoration: blink;
}
#43 On July 21, 2006 09:14 PM David Joseph said:
/*(25)*/div#branding{
/* line through and red because divs are wrong :) */
text-decoration: line-through;
color: #ea0909;
}
#44 On July 21, 2006 09:44 PM gb said:
/* (27) */
div#content {
letter-spacing: 2px;
text-transform: capitalize;
text-shadow: #999 3px 3px 3px; /* Because Safari users really need that shadow to make the text stand-out and look cool */
border: 5px double #f00; /* Frankly, why not? */}
#45 On July 21, 2006 09:52 PM Malarkey said:
(Ed says: Stop Cooking! The phone lines are now closed.)