CSS Senn Garden
		Phillip Senn
	|| HOME ||
	In trying to understand CSS Zen garden, I was getting confused by the text. So I thought "What if I substitute my own text in various paragraphs?" That would help me get more comfortable with what exactly the CSS is doing. So this is the input page for the zengarden-sample page. Please select a CSS Design Design #1 Design #2 Design #3 Design #4 Design #5 Design #6 Design #7 Design #8 Design #9 Design #10 Design #11 Design #12 Design #13 Design #14 Design #15 Design #16 Design #17 Design #18 Design #19 Design #20 Design #21 Design #22 Design #23 Design #24 Design #25 Design #26 Design #27 Design #28 Design #29 Design #30 Design #31 Design #32 Design #33 Design #34 Design #35 Design #36 Design #37 Design #38 Design #39 Design #40 Design #41 Design #42 Design #43 Design #44 Design #45 Design #46 Design #47 Design #48 Design #49 Design #50 Design #51 Design #52 Design #53 Design #54 Design #55 Design #56 Design #57 Design #58 Design #59 Design #60 Design #61 Design #62 Design #63 Design #64 Design #65 Design #66 Design #67 Design #68 Design #69 Design #70 Design #71 Design #72 Design #73 Design #74 Design #75 Design #76 Design #77 Design #78 Design #79 Design #80 Design #81 Design #82 Design #83 Design #84 Design #85 Design #86 Design #87 Design #88 Design #89 Design #90 Design #91 Design #92 Design #93 Design #94 Design #95 Design #96 Design #97 Design #98 Design #99 Design #100 Design #101 Design #102 Design #103 Design #104 Design #105 Design #106 Design #107 Design #108 Design #109 Design #110 Design #111 Design #112 Design #113 Design #114 Design #115 Design #116 Design #117 Design #118 Design #119 Design #120 Design #121 Design #122 Design #123 Design #124 Design #125 Design #126 Design #127 Design #128 Design #129 Design #130 Design #131 Design #132 Design #133 Design #134 Design #135 Design #136 Design #137 Design #138 Design #139 Design #140 Design #141 Design #142 Design #143 Design #144 Design #145 Design #146 Design #147 Design #148 Design #149 Design #150 Design #151 Design #152 Design #153 Design #154 Design #155 Design #156 Design #157 Design #158 Design #159 Design #160 Design #161 Design #162 Design #163 Design #164 Design #165 Design #166 Design #167 Design #168 Design #169 Design #170 Design #171 Design #172 Design #173 Design #174 Design #175 Design #176 Design #177 Design #178 Design #179 Design #180 Design #181 Design #182 Design #183 Design #184 Design #185 Design #186 Design #187 Design #188 Design #189 Design #190 Design #191 Design #192 Design #193 Design #194 Design #195 Design #196 Design #197 Design #198 Design #199 Design #200 Design #201 Design #202 Design #203 Design #204 Design #205 Design #206 Design #207 Design #208 Design #209 Design #210 Design #211 Design #212 Design #213 CSS Senn Garden Quick Summary A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page. Preamble: Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support. Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators. The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web. Explanation There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really. <acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change. Participation: Graphic artists only please. You are modifying this page, so strong <acronym title="Cascading Style Sheets">CSS</acronym> skills are necessary, but the example files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide</a> for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">CSS</acronym>. You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">HTML</acronym>. This may seem daunting at first if you've never worked this way before, but follow the listed links to learn more, and use the sample files as a guide. Download the sample <a href="zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don't submit half-finished work) upload your .css file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server. Benefits: Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today. Requirements: We would like to see as much <acronym title="Cascading Style Sheets, version 1">CSS1</acronym> as possible. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <acronym title="Cascading Style Sheets">CSS</acronym> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <acronym title="Cascading Style Sheets">CSS</acronym> validates. Unfortunately, designing this way highlights the flaws in the various implementations of <acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display differently, even completely valid <acronym title="Cascading Style Sheets">CSS</acronym> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn't work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won't accept it. We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected. This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <acronym title="Cascading Style Sheets">CSS</acronym> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/sa/1.0/" title="View the Zen Garden's license information.">one on this site</a> so that others may learn from your work. Bandwidth graciously donated by <a href="http://www.dreamfirestudios.com/">DreamFire Studios</a> change text