NETC08 session 1095
From Extension Collaborative Wiki
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;
}
