Write the CSS necessary to recreate the appearance provided to you as p1 screenshot. Most of the HTML code is given to you (in problem1 folder); the code given may not be modified (the provided file name is p1.htm). The only change you may make to the provided HTML code is that you may add any number of div and span elements, possibly with id and/or class attributes, as targets for CSS styling. Write valid HTML and CSS code that would pass the W3C validators. Assume that the HTML text shown would appear inside the body of the page. The overall page has a background of zen.jpg. The content is shifted right by 110px to avoid covering the background. Text on the page uses a 9pt font named "Georgia" or any sans-serif font available on the system. All headings on the page use the color #7d775c. The page's top heading is centered and underlined. The overall main content on the page is at most 50em in width, including all columns. The "A demonstration of..." paragraph appears in its own hovering column, 10em wide, with 1em separating it from any neighboring content. Its text is in italic. The "Select a Design" list of designs appears to the right of the other content, 9em wide, with a background color of #ddddbb. Its heading is centered and underlined. The list items do not have bullets. There is 1em between each list item and any neighboring list items, and 1em between items and the edge of the background color

css Zen Garden

The Beauty of CSS Design

A demonstration of what can be accomplished visually through CSS-based design.

The Road to Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP 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. ...

So What is This About?

There is clearly a need for CSS 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. ...

CSSallows complete and total control over the style of a hypertext document. The only way....

Participation

Graphic artists only please. You are modifying this page, so strong CSS skills are necessary, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.

Zen editors modify the style sheet in any way you wish, but not the HTML. ...

Select a Design:

• Under the Sea! by Eric Stoltz
• Make em Proud by Michael McAghon and Scotty Reifsnyder
• Orchid Beauty by Kevin Addison
• Oceanscape by Justin Gray
• Sakura by Tatsuya Uchida