/* works.css */

/* styling */
body { margin: 0px; padding: 0px; background-color: #000000; background-image: url(/prx/000/http/www.markschenk.com/cssexp/contentnstyle/images/nighthawks.jpg); background-attachment: fixed; background-position: 0 0; background-repeat: no-repeat; }
h1 { padding: 0px; margin: 20px auto 10px 50px; width: 300px; color: #DCDCDC; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-style: normal; font-size: 30px; }
p { padding: 2px; margin: 0px 20px 10px 20px; color: #000000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; }
div.main { border-style: solid; border-width: 1px; border-color: #C0C0C0; padding: 10px; width: 400px; margin: auto auto auto 50px; background-image: url(/prx/000/http/www.markschenk.com/cssexp/contentnstyle/images/pale.png); text-align: justify; }
#usage:after,div.main:after { padding-top: 10px; color: #808080; font-size: 10px; }
p:before { display: block; color: #556B2F; font-weight: bold; content: counter(chapter,upper-roman) "-" attr(id); counter-increment: chapter; text-transform: capitalize; }
a,a:visited { padding: 0px; color: #8B0000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; position: relative; left: 23px; top: -10px; }
a:hover { color: #006400; }
#nostyle { display: none; }

/* content */
#headline { content: "How is it done!?"; }
#introduction { content: "So, how does it work? It would be easy to totally change the appearance of a page by using display:none for certain tags and hiding/showing them in specific stylesheets. This serves some nice purposes for use on webpages, but I wanted to demonstrate some other options here. What I've done is remove all the content from the HTML page and defined it in CSS. So when the stylesheet is changed all content is actually changed, not merely hiding or showing certain classes."; }
#content { content: "Well how do I specify the content in CSS? Well it's quite simple, you use the CSS2 \0022 content\0022  attribute for defining the text displayed in paragraphs, urls of pictures and links. That way all important information is stored in the CSS. In the CSS2.1 specifications only content can be added in conjuction with the :before and :after pseudo elements. CSS3 allows content for other elements too."; }
#stylesheets { content: "W3C - " attr(href); }
#advanced { content: "There are more CSS gimmicks on this page, just for fun. For instance I've used the \0022:before\0022  option with the ID of the paragraphs as headers, which unfortunately limits the headers to single words. Syntax is as follows p:before\007B content:attr(id)\003B\007D. I have also used autonumbering for the headings with the counter option in CSS2. Both these methods only work in Opera 7 and not in any previous versions or in any Mozilla or IE client."; }
#advanced:hover { content: "As you have just noticed, hovering over this paragraph will also change the content. This is simply done by using the :hover property in CSS. This way you can easily make roll-over menus and dropdown menus with pure CSS. See www.huijs.net/css for a good example. Hovering isn't working flawlessly yet and sometimes the hover effect \0022 sticks\0022."; }
#advanced:before:hover { content: counter(chapter,upper-roman) "-hovering"; counter-increment: chapter; }
#usage { content: "Could all this be used for practical webdesign? No, not really, there are too many drawbacks. For instance you cannot insert HTML tags with the CSS, severly limiting the content. However there are aspects of this page which would be very useful in webdesign if the other browsers were to support it. Especially the autonumbering would be very useful and also the insertion of URLs of links in print stylesheets. Those options will have potential once Mozilla and IE support it."; }
#usage:after { display: block; content: "\00A9  2003 - Mark Schenk"; }
div.main:after { content: "The background image used is Nighthawks - 1942, by Edward Hopper"; }

/* The background image used is Nighthawks - 1942, by Edward Hopper */
/* Image from ArtChive: http://www.artchive.com/artchive/H/hopper.html */