NETC08 session 1095

2008-04-30T14:13:55Z

{{NETC08_sessions |sessionNumber=1095 |sessionFormat= Presentation |sessionName=Style Your Site: An Advanced CSS Design Tutorial |sessionTopic=Web Site Design |sessionLevel=Advanced |sessionLocation=Tanglewood |timeSlot= Monday, 4:30 - 5:15 pm |firstName=Ben |lastName=MacNeill |presentertitle=User Interface Designer |affiliation=eXtension |otherpresenters= |sessionAbstract=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: [http://www.mediafire.com/?ujfj2ts10m2 "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. }} [[Image:Style-your-site.png]] == Session HTML ==






	
    Style Your Site: An Advanced CSS Design Tutorial - NETC08 - Session 1095
    



    
        
            
                
            
            

        
        
            
                About
                Oranges
                Apples
                Pineapples
                We have no Bananas Today
            
        
        
        
            Style Your Site: An Advanced CSS Design Tutorial
            Session 1095

            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.

            Details
            
                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
            
            
            More Links
            
                My del.icio.us CSS bookmarks: http://del.icio.us/chillnc/css
                For testing: Web Developer toolbar by Chris Pederick (Firefox)
            
            
            Contact Information
            Please email me if you have any other questions.
            
                Ben MacNeill

                ben.macneill@extension.org

                User Interface Designer

                eXtension
            
        
        

        
            2008. No Rights Reserved.

== 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;
    }

[[Category: NETC08 Session]] [[Category: Web Site Design]]

Watching: NETC08 session 1095

NETC08 session 1095

Style Your Site: An Advanced CSS Design Tutorial

Session 1095

Details

More Links

Contact Information