NETC08 session 1095

2008-04-30T14:13:55Z

Session Name: Style Your Site: An Advanced CSS Design Tutorial
Session Number: 1095
Location: Tanglewood
Day and Time: Monday, 4:30 - 5:15 pm
Format: Presentation
Topic: Web Site Design
Level: Advanced

Session Abstract:

Cascading Style Sheets (CSS) define the look of modern web pages. CSS is a very powerful stylesheet language that allows you to separate presentation from content. Learn advanced CSS techniques in this step-by-step coding demonstration that starts with an un-styled web page and ends up with a finished design. This presentation will also touch on accessibility, semantic markup, visual design and other site-design related issues. Please note, we'll cover advanced issues, but beginners are welcome. A little bit of HTML knowledge is helpful, but not required.

Code Samples

Download the zipped files: "Style your Site" Code Samples.
(the zipped file is hosted at Mediafire hosting service. After the page loads, you should see a link that says "Click here to start download..".)
If you can't get the files, please email me and I'll send you the zipped files. ben.macneill@extension.org
I've also included the html and css below for convenience.

Led By: Ben MacNeill, User Interface Designer, eXtension

Session HTML

<!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" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Style Your Site: An Advanced CSS Design Tutorial - NETC08 - Session 1095</title>
    <link rel="stylesheet" href="styles-final.css" type="text/css" media="screen" />
</head>

<body>
    <div class="wrapper">
        <div id="masthead">
            <a href="">
                <img alt="eXtension: More Mind Reach" src="images/extension_logo_small.gif" />
            </a>
            <br class="clear"/>
        </div>
        <div id="nav">
            <ul>
                <li><a href="" class="current">About</a></li>
                <li><a href="">Oranges</a></li>
                <li><a href="">Apples</a></li>
                <li><a href="">Pineapples</a></li>
                <li><a href="">We have no Bananas Today</a></li>
            </ul>
        </div>
        
        <div id="content">
            <h1>Style Your Site: An <strike>Advanced</strike> CSS Design Tutorial</h1>
            <h2>Session 1095</h2>

            <p>Cascading Style Sheets (CSS) define the look of modern web pages. CSS is a very powerful stylesheet language that allows you to separate presentation from content. Learn advanced CSS techniques in this step-by-step coding demonstration that starts with an un-styled web page and ends up with a finished design.</p>
            <p>This presentation will also touch on accessibility, semantic markup, visual design and other site-design related issues. Please note, we'll cover advanced issues, but beginners are welcome. A little bit of HTML knowledge is helpful, but not required.</p>

            <h2>Details</h2>
            <ul>
                <li><strong>Session Name</strong>: Style Your Site: An Advanced CSS Design Tutorial</li>
                <li><strong>Session Number</strong>: 1095</li>
                <li><strong>Location</strong>: Tanglewood</li>
                <li><strong>Day and Time</strong>: Monday, 4:30 - 5:15 pm</li>
                <li><strong>Format</strong>: Presentation</li>
                <li><strong>Topic</strong>: Web Site Design</li>
                <li><strong>Level</strong>: Advanced</li>
            </ul>
            
            <h3>More Links</h3>
            <ul>
                <li>My del.icio.us CSS bookmarks: <a href="http://del.icio.us/chillnc/css">http://del.icio.us/chillnc/css</a></li>
                <li>For testing: <a href="http://chrispederick.com/work/web-developer/">Web Developer toolbar</a> by Chris Pederick (Firefox)</li>
            </ul>
            
            <h3>Contact Information</h3>
            <p>Please email me if you have any other questions.</p>
            <p>
                Ben MacNeill<br />
                <a href="mailto:ben.macneill@extension.org">ben.macneill@extension.org</a><br />
                User Interface Designer<br />
                eXtension
            </p>
        </div>
        

        <div id="footer">
            <p>2008. No Rights Reserved.</p>
        </div>
        
    </div>
</body>

</html>

Session CSS (styles-final.css)

/* reset all margins, padding, and borders.
(Because every browser has slightly different default values, and we don't want any surprises)
also see http://developer.yahoo.com/yui/reset/  */
* {margin: 0; padding: 0; }
img { border: 0; }

/* put margins back on certain elements */
h1, h2, h3, h4, h5, h6, p, ul {margin: 0 0 1em;}

.wrapper {
    width:800px;
/*    border: 1px solid red;*/
    margin:0 auto;
    background: #ddd;
    border-left:4px solid #fff;
    border-right:4px solid #fff;
    }

#masthead {
/*    border: 1px solid green;*/
    border-bottom:2px solid #ccc;
    padding: 1em 1em 2em;
    background: #ddd url(images/header_bg.png) repeat-x left bottom;
    }
    
#content {
/*    border: 1px solid blue;*/
    width:559px;
    float:right;
    background: #fff;
    padding:20px;    
    border-left: 1px solid #1e50a9;
    }
    
#nav {
/*    border: 1px solid black;*/
    width:200px; 
    float:left;    
    }
    
#footer {
/*    border: 1px solid blue;*/
    clear:both;
    padding:2em 0 1em;
    text-align:center;
    border-top: 1px solid #1e50a9;
    background: #fff url(images/footer_fade.gif) repeat-x top center;
    color:#999;
}

#masthead a {
    float:right;
    font-size:3em;
}

.clear {clear:both;}


#nav ul {list-style:none; margin:0; padding:0;}
#nav ul li {margin:0;}
#nav ul li a {
/*    border: 1px solid red;*/
    display:block;
    padding: 1em 20px;
    color:#fff;
    font-size:1.2em;
    line-height: 1.2em;
    text-decoration:none;
}

/* nav link rollover */
#nav ul li a:link,
#nav ul li a:visited    {background: #5294cc url(images/side_nav.png) repeat-y -200px bottom;}
#nav ul li a:hover      {background: #5294cc url(images/side_nav.png) repeat-y -400px bottom ;}
#nav ul li a.current    {background: #5294cc url(images/side_nav.png) repeat-y 0 bottom;}

/* the font-size default for all modern browsers is 16pt. multiple by 62.5% to reset font size to 1em.
1em is now equal to 10pt. 1.2em is 12pt, 1.6em is 16pt, etc. (unless nested) */
body {font-size: 62.5%;}

body {
    font-family: "Arial", "sans-serif";
    background: #003377;
    color: #333;
    background: #1d50a9 url(images/ask_footer.png) repeat-x top center;
}

/* set default text sizes */
h1, h2, h3 {
    color: #003073;
    font-weight:normal;
}

h1 { font-size: 2.4em; color: #6c0081; background:#fbebff; }
h2 { font-size: 2.2em;}
h3 { font-size: 1.8em;}




p, li {
    margin: .5em 0 2em;
    font-size: 1.3em;
    line-height: 1.4em;
}

ul {
    margin:1em 3em 2.5em;
    }
ul li {
    margin: 0 0 .75em;
    padding:0;
    }

Watching: NETC08 session 1095

NETC08 session 1095

Session HTML

Session CSS (styles-final.css)