Upload
ben-macneill
View
1.923
Download
0
Embed Size (px)
DESCRIPTION
(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.
Citation preview
Style Your SiteA Comprehensive CSS Design Tutorial
Ben MacNeillUser Interface Designer, eXtension at NCSU
http://commons.wikimedia.org/wiki/File:SkeletonsNumbers.png
What is CSS?
What is CSS?
document content
document presentation
Why Use CSS?
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
Laying the Ground Work
Simple, semantic html markup
creates good structure
TABLES
ARE FOR DATA
NOT FOR LAYOUT
CSS Syntax
h1 {font-size: 1.5em}
selectors
properties
values
CSS Selectors
div
div#feature
div.comment
div#feature.audio
type selector
ID selector
Class selector
ID + Class
First Session• Fixed-width layout
• Flexible, bulletproof text-based navigation
• Light design styling
• Print stylesheet (if time)
Second Session
• 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
The Enhancing
Let’s Go to the Browser
Important Concepts(Visual formatting model)
The Display Property
Block-level elements:<p>, <ul>, <div>
Every html element has a default display: property
Inline-level elements:<em>, <span>
The Display Property
Block-level elements are formatted visually as blocks.
Inline-level elements are formatted visually as lines.
The Cascade
• Each style rule (the selector) is assigned a weight
• Most specific selector (greatest weight) wins
div {color: red;}div div {color: blue;} div div div {color: green;}
Winning the Cascade
• Most specific selector wins
• If two selectors are equal, last one wins
• inline styles beat style sheets
• !important beats everything
All Elements Are Not Equal
• Classes and IDs carry more weight or specificity
div pdiv.feature pdiv#article pdiv#article.feature p
The Box Model
http://www.flickr.com/photos/31288116@N02/3065654591/
Width != Width
Shorthand
margin: 10px;
margin: 10px 20px 30px 10px;
margin: 10px 20px;
margin: 10px 20px 20px;
top right bottom left
top sides bottom
top/bottom sides
all
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
Tools & Testing
• Firebug http://getfirebug.com/
• Web Developer Toolbar by Chris Pederick (Firefox)http://chrispederick.com/work/web-developer/
• Target: Firefox > Safari > IE8 > IE7
Tip: Firebug can help with the Box Model
• CSS Selectors Cheat Sheet: www.cameronmoll.com/articles/widget/cheatsheet.pdf
• Better Font Stack: http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/
Thanks!
Ben MacNeillUser Interface Designer, eXtension at [email protected]
Slides and zipped Code examples:http://www.slideshare.net/chillnchttp://drop.io/benmacneill
My CSS bookmarks:http://del.icio.us/chillnc/css