(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

2. What is CSS?

5. What is CSS?

6. Why Use CSS?
document document
content presentation

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

9. TABLES
ARE FOR DATA
NOT FOR LAYOUT

10. CSS Syntax
h1 {font-size: 1.5em}
selectors values
properties

11. CSS Selectors
type selector
div
ID selector
div#feature
Class selector
div.comment
ID + Class
div#feature.audio

12. First Session
• Fixed-width layout
• Flexible, bulletproof text-based navigation
• Light design styling
• Print stylesheet (if time)

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

14. Let’s Go to
the Browser

15. Important Concepts
(Visual formatting model)

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/

22. Width != Width

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

26. Tip: Firebug can help
with the Box Model

27. • CSS Selectors Cheat Sheet:
www.cameronmoll.com/articles/widget/cheatsheet.pdf

28. • Better Font Stack:
http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/

29. August 27, 2001
IE6 released
8
http://www.stopie6.org/

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