joel sklar: web design with css
DESCRIPTION
Web designer and author Joel Sklar's presentation: Web Design with CSS, conducted at the April 2009 meeting of the Northern New England chapter of The Society for Technical CommunicationTRANSCRIPT
Web Design with CSS
NNE-STC April 2009
www.joelsklar.com
2
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
www.joelsklar.com
3
Web Site Make-over
Source: http://www.stopdesign.com/
www.joelsklar.com
4
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!
www.joelsklar.com
5
Adding SpecificityCSS Selector Selected Element
Multiple selectorsh1, h2 {color: 000;}
<h1> and <h2>
Class.copy {color: 000;}
<div class=“copy”>
Restricting classp.copy {color: 000;}
<p class=“copy”>
ID#main {color: 000;}
<p id=“main”>
Restricting IDdiv#main {color: 000;}
<div id=“main”>
Descendantdiv#main p {color: 000;}
<div id=“main”><p> … </p></div>
www.joelsklar.com
6
Pseudo-classesLinks:link:visited:hover
Pseudo-elements:first-letter:first-line
p.feature:first-letter {color: 000;}
www.joelsklar.com
7
The Box Model
www.joelsklar.com
8
The Box Model
www.joelsklar.com
9
The Normal Flow
h1
p
p
ul
body
www.joelsklar.com
10
Positioning
h1
div div
div
body