<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Suzanne Alexander" /> <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display" /> <meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design." /> <meta name="robots" content="all" /> <title>Show me CSS</title> <!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp --> <script type="text/javascript"></script> <style type="text/css" media="all"> @import "styles.css"; </style> </head> <body> <div id="navbar"> <ul id="navlist"> <li id="active"><a href="/portfolio.shtml" id="current">Portfolio</a></li> <li><a href="/resume.shtml">Resume</a></li> <li><a href="/demo/show-me-xhtml.html">XHTML Help</a></li> <li><a href="/demo/css_sample.html">CSS Help</a></li> </ul> </div><!-- /navbar --> <div id="horizontal"> <div id="summary"> <p><span>So, what is <acronym title="Cascading Style Sheets">CSS</acronym>, and what do you use it for? Short for, Cascading Style Sheets, <acronym title="Cascading Style Sheets">CSS</acronym> is used to control the look and feel of mark-up for user interfaces. This page explores the use of <acronym title="Cascading Style Sheets">CSS</acronym> for graphical layout.</span></p> </div> <div id="utilNav"> <p class="p2"><span>View: <a href="html_code_view.html" title="This page's source HTML code">html</a> | <a href="css_code_view.html" title="This page's sample CSS">css</a></span></p> </div> </div><!-- /horizontal --> <div id="pageBody"> <div id="content"> <div id="intro" class="section"> <h3><span>CSS instead of tables</span></h3> <p class="p1"><span>Commonly used to control such elements as fonts and spacing issues in web pages, CSS used to its fullest extent can graphically control all of the layout for a web page replacing the use of tables entirely.</span></p> <p class="p2"><span>The web page you are looking at was created in that manner. The content is stored in the mark-up document (<a href="html_code_view.html">html</a>) while all the graphical elements and layout are instructed in the style sheet document (<a href="css_code_view.html">css</a>). </span></p> </div> <div id="case" class="section"> <h3><span>The case for CSS layout</span></h3> <p><span>Several advantages leverage CSS layout in applying multiple formats to the same content. This is especially useful when content may be accessed using different tools (user agents) such as handheld devices, speech and sound synthesizers, or television-type devices to name a few. A script in the requested content can test for the type of device and apply a style sheet to display the content in an appropriate manner for that device.</span></p> <p><span>In that regard, CSS is useful in making digital information more accessible and <a href="http://www.section508.gov/">Section 508</a> compliant. This ammendment to the Rehabilitation Act requires that Federal agencies' electronic and information technology be accessible to people with disabilities. Organizations in contract with the Federal Government may also be under the same obligation.</span></p> </div> <div id="withXML" class="section"> <h3><span>CSS & XML ...like horse and carriage</span></h3> <p><span>CSS & XML — go together just like ...you got it. CSS works well with any XML application which would include most content management systems (CMS). The XML is transformed into a XSLT document to which the CSS is applied.</span></p> </div> <div id="conclusion" class="section"> <h3><span>What does CSS look like?</span></h3> <p><span>Rendered, it can look like any other formatted document. For a fun demonstration of applying multiplie layouts to the same content, visit <a href="http://www.csszengarden.com/">CSS Zen Garden</a>. </span></p> <p><span>You can also view the code as a text document here: <a href="html_code_view.html">html</a> | <a href="css_code_view.html">css</a></span></p> </div> </div><!-- /content --> <div id="footer"> <span id="createdBy">Created by Suzanne G. Alexander. Learn more at <a href="http://www.groverproductions.com" title="Grover Productions - home of Web Developer, Suzanne G. Alexander" >GroverProducitons.com</a> </span> <span id="validate">Validate this page: <a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s XHTML">xhtml</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS">css</a> </span> </div><!-- /footer --> </div> <!-- /pageBody --> <div id="resources"> <ul> <li><a href="http://www.w3schools.com/css/css_reference.asp">CSS2 Reference</a></li> <li><a href="http://www.csszengarden.com/">Layout Samples</a></li> <li><a href="http://css.maxdesign.com.au/">CSS Tutorials</a></li> <li><a href="http://www.w3.org/Style/CSS/">www.w3.org</a></li> <li><a href="http://validator.w3.org/">Markup Validation</a></li> </ul> </div><!-- /resources --> <div id="rightPannel"> <div id="rightCopy"> <p>This site is created by Suzanne G. Alexander. You can view more of Suzanne's work and resume at <a href="http://www.GroverProductions.com/">GroverProductions.com</a></p> </div><!-- /rightCopy --> </div><!-- /rightPannel --> </body> </html>