(Part 1 of 2) Cascading Style Sheets (CSS) control the look and feel of modern web pages while also separating presentation from content. Learn comprehensive 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.
1. Style Your Site
A Comprehensive
CSS Design Tutorial
Ben MacNeill
User Interface Designer,
eXtension at NCSU
http://commons.wikimedia.org/wiki/File:SkeletonsNumbers.png
7. Some real reasons
• Accessibility (Section 508 anyone?)
• Reduce complexity/repetition in the markup
• The Cosmetic stuff is all in one place. Global
design changes are easy.
• Your content is more portable for mobile
devices, feed readers, printing
• It's not 1999
8. Simple, semantic
html markup
creates good structure
Laying the Ground Work
13. Second Session
The Enhancing
• CSS-based image sprites & background images
• Fluid layout
• Font control
• CSS reset stylesheet
• Convert form to semantic markup and style it
• Mobile stylesheet for the iPhone
16. The Display Property
Every html element has a
default display: property
Block-level elements:
<p>, <ul>, <div>
Inline-level elements:
<em>, <span>
17. The Display Property
Block-level elements are formatted visually
as blocks.
Inline-level elements are formatted visually
as lines.
18. The Cascade
div {color: red;}
div div {color: blue;}
div div div {color: green;}
• Each style rule (the selector) is assigned a
weight
• Most specific selector (greatest weight) wins
19. Winning the Cascade
• Most specific selector wins
• If two selectors are equal, last one wins
• inline styles beat style sheets
• !important beats everything
20. All Elements Are Not
Equal
div p
div.feature p
div#article p
div#article.feature p
• Classes and IDs carry more weight or
specificity
21. The
Box
Model
http://www.flickr.com/photos/31288116@N02/3065654591/
23. Shorthand
margin: 10px 20px 30px 10px;
top right bottom left
margin: 10px 20px 20px;
top sides bottom
margin: 10px 20px;
top/bottom sides
margin: 10px;
all
24. Floating
• Floated elements are taken out of the normal
document flow and shifted to the left or right
as far as it can go
• elements following floated elements shift up
and wrap unless cleared with the clear:
property
25. Tools & Testing
• Firebug
http://getfirebug.com/
• Web Developer Toolbar
by Chris Pederick (Firefox)
http://chrispederick.com/work/web-developer/
• Target: Firefox > Safari > IE8 > IE7
30. Thanks!
Ben MacNeill
User Interface Designer, eXtension at NCSU
ben.macneill@extension.org
Slides and zipped Code examples:
http://www.slideshare.net/chillnc
http://drop.io/benmacneill
My CSS bookmarks:
http://del.icio.us/chillnc/css