Web Design with CSS NNE-STC April 2009

Agenda Use precise selection techniques Float text boxes and images with exact control Build flexible or fixed columnar layouts without tables Use more efficient, less complicated code to create complex visual designs

Use precise selection techniques

Float text boxes and images with exact control

Build flexible or fixed columnar layouts without tables

Use more efficient, less complicated code to create complex visual designs

Web Site Make-over Source: http://www.stopdesign.com/

Basic Syntax <style type=“text/css”> body {color: 000;} p {font-family: arial, helvetica, sans-serif; color: ccc; line-height: 1.25em;} </style> Remember inheritance!

Adding Specificity <div id=“main”><p> … </p></div> Descendant div#main p {color: 000;} <div id=“main”> Restricting ID div#main {color: 000;} <p id=“main”> ID #main {color: 000;} <p class=“copy”> Restricting class p.copy {color: 000;} <div class=“copy”> Class .copy {color: 000;} <h1> and <h2> Multiple selectors h1, h2 {color: 000;} Selected Element CSS Selector

Pseudo-classes Links :link :visited :hover Pseudo-elements :first-letter :first-line p.feature:first-letter {color: 000;}

The Box Model

The Box Model

The Normal Flow h1 p p ul body

Positioning h1 div div div body