Check Out My Style Sheet

1
Check Out My Style Sheet
The second night of CA273 Advanced Web Design
2
CSS
The Presentation Layer of the Web
Dan Mall on the experience layer
Kevin Yanks and Cameron Adams. Simply JavaScript.
SitePoint, 2007
3
CSS History
Weve come a long way in 12 years

• CSS 1 (1996)
• CSS 2 (1998)
• CSS 3 (Under development)

4
CSS3
What we have to look forward to

• Rounded corners
• Multiple background images
• Opacity Alpha Transparency
• Rotation
• CSS Tables

http//css3.info
5
CSS3 Rounded Corners
No more round about methods

• Not quite full support
• Works in the Firefox and Safari
• Not in IE or Opera
• Progressive Enhancement

http//www.css3.info/preview/rounded-border/
6
CSS3 Rounded Corners
The CSS
.author-bio -moz-border-radius 5px / For
Mozilla/Firefox / -webkit-border-radius 5px
/ For Safari 3 / border 1px ededed solid
http//www.css3.info/preview/rounded-border/
7
CSS3 Rounded Corners
An Example
http//www.css3.info/preview/rounded-border/
8
CSS Review
Basic Anatomy of a CSS Rule
http//dabrook.org/cc/Basic-Anatomy-of-a-CSS-Rule.
png
9
Got Style?
Veerle Pieters - veerle.duoh.com
Stacked nice and tidy
http//veerle.duoh.com/?cssblog/css-master.v.1232
814717
10
Got Style?
Chris Coyier CSS Tricks
Straight up
http//css-tricks.com/wp-content/themes/CSS-Tricks
-2/style.css
11
Got Style?
Elliot Jay Stocks Carsonified
All in one
http//www.carsonified.com/wp-content/themes/carso
nified2.0/style.css
12
Got Style?
Ben Kutil
Chock full of comments
http//discovered.staging.slsdev.net/stylesheets/l
ayout.css
13
Styling Your Styles
Exercise Formatting CSS To Suite Your Style

• Open up the main-before-styling.css file
• Format different sections with different CSS
  styling
• Get a feel for your preference of styling

14
CSS Beyond the Browser
CSS2 Introduced Media Types

• all - Suitable for all devices.
• aural - for speech synthesizers.
• braille - for braille tactile feedback devices.
• embossed - for paged braille printers.
• handheld - for handheld devices
• print - for paged, opaque material and for
  documents viewed on screen in print preview mode.
  
• projection - for projected presentations
• screen - primarily for color computer screens.
• tty - for media using a fixed-pitch character
  grid, such as teletypes, terminals
• tv - for television-type devices

http//www.w3.org/TR/CSS2/media.htmlmedia-types
15
CSS Beyond the Browser
CSS3 Introduces Media Queries

• Display CSS depending on specification or
  device
• height and width
• portrait or landscape
• available colors
• resolution
• Have to think about designing for the web in
  broader terms

http//www.w3.org/TR/CSS2/media.htmlmedia-types
16
CSS Beyond the Browser
Many people still see the web as a temporary
medium, one that is always changing and where
content is potentially irretrievable. I know many
people who love to print things they find on
sites, from articles to recipes to photos, to
view when they are away from the computer or for
their own personal archive. There's no reason
that information shouldn't either support your
brand or be designed with the same care as your
site.
Jason Santa Maria
Mark Boulton, Designing for the Web.
http//www.fivesimplesteps.co.uk/
17
CSS Beyond the Browser
Styling for print

• Link to print stylesheet below your screen
  style sheet
• Use the media attribute for the link tag

ltlink rel"stylesheet" href"css/main.css"
media"screen,projection" type"text/css"
/gt ltlink rel"stylesheet" href"css/menu_print.css
" media"print" type"text/css" /gt
http//www.w3.org/TR/CSS2/media.htmlmedia-types
18
CSS Beyond the Browser
Some tips for CSS print sheets

• Ask How would this look best on paper?
• Set width in inches
• Make heavy use of the display and visibility
  properties.
• Use shades of grey for coloring.

content width 6.5in
content width 6.5in
.feature-image display none .more-info
visibility hidden
http//www.w3.org/TR/CSS2/media.htmlmedia-types
19
Wrap Up
Ive got style yes I do, Ive got style how bout
you?

• CSS Presentation
• Progressively enhance your sites.
• Give your CSS codesome style.
• Designing for the web gtdesigning for the
  browser.