Style Your Site Part 1
Upcoming SlideShare
Loading in...5
×
 

Style Your Site Part 1

on

  • 1,889 views

(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 ...

(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.

Statistics

Views

Total Views
1,889
Views on SlideShare
1,886
Embed Views
3

Actions

Likes
2
Downloads
53
Comments
0

2 Embeds 3

http://www.slideshare.net 2
http://www.slideee.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Style Your Site Part 1 Style Your Site Part 1 Presentation Transcript

  • Style Your Site A Comprehensive CSS Design Tutorial Ben MacNeill User Interface Designer, eXtension at NCSU http://commons.wikimedia.org/wiki/File:SkeletonsNumbers.png
  • What is CSS?
  • What is CSS?
  • Why Use CSS? document document content presentation
  • 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
  • Simple, semantic html markup creates good structure Laying the Ground Work
  • TABLES ARE FOR DATA NOT FOR LAYOUT
  • CSS Syntax h1 {font-size: 1.5em} selectors values properties
  • CSS Selectors type selector div ID selector div#feature Class selector div.comment ID + Class div#feature.audio
  • First Session • Fixed-width layout • Flexible, bulletproof text-based navigation • Light design styling • Print stylesheet (if time)
  • 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
  • Let’s Go to the Browser
  • Important Concepts (Visual formatting model)
  • The Display Property Every html element has a default display: property Block-level elements: <p>, <ul>, <div> 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 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
  • 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 div p div.feature p div#article p div#article.feature p • Classes and IDs carry more weight or specificity
  • The Box Model http://www.flickr.com/photos/31288116@N02/3065654591/
  • Width != Width
  • 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
  • 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/
  • August 27, 2001 IE6 released 8 http://www.stopie6.org/
  • 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