# CSCI E-75: Cascading Style Sheets (CSS)
URI References

CSCI E-75: Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
The Power of Stylesheets
United States Constitution (no external stylesheet)
constitution/constitution.html
W3C Core Styles
http://www.w3.org/StyleSheets/Core/
Chocolate Stylesheet
constitution/chocolate.html
Midnight Stylesheet
constitution/midnight.html
Modernist Stylesheet
constitution/modernist.html
Oldstyle Stylesheet
constitution/oldstyle.html
Steely Stylesheet
constitution/steely.html
Swiss Stylesheet
constitution/swiss.html
Traditional Stylesheet
constitution/traditional.html
Ultramarine Stylesheet
constitution/ultramarine.html
Harvard College Admissions
Harvard College Admissions
http://admissions.college.harvard.edu/
Department of African and African American Studies
Department of African and African American Studies
http://aaas.fas.harvard.edu/
Designing with Stylesheets: CSS Zen Garden
css Zen Garden: The Beauty in CSS Design
http://www.csszengarden.com/
XHTML: a simple example with CSS
simple.html
simple-style.html
simple-style.css
simple-style.css
CSS Recommendations from the W3C
CSS 1
http://www.w3.org/TR/REC-CSS1
CSS 2
http://www.w3.org/TR/REC-CSS2
CSS 2.1
http://www.w3.org/TR/CSS21/
CSS Current Work
http://www.w3.org/Style/CSS/current-work
W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/
Valid CSS!
CSS Resources
A List Apart
http://www.alistapart.com/
Simplebits
http://www.simplebits.com/
Eric Meyer CSS
http://meyerweb.com/eric/css/
WestCiv
http://www.westciv.com/style_master/house/
book
book
book
book
book
book
book
Cascading Style Sheets : Designing for the Web (3rd Edition)
http://www.amazon.com/gp/product/0321193121
Cascading Style Sheets: The Definitive Guide, 3rd Edition
http://www.oreilly.com/catalog/csstdg3/
Eric Meyer on CSS
http://www.ericmeyeroncss.com/
More Eric Meyer on CSS
http://more.ericmeyeroncss.com/
Bulletproof Web Design
http://www.amazon.com/gp/product/0321509021/
Web Standards Solutions: The Markup and Style Handbook
http://www.amazon.com/gp/product/1590593812/
CSS Cookbook
http://www.oreilly.com/catalog/cssckbk2/
W3C Cascading Style Sheets
http://www.w3.org/Style/CSS/
Cascading Style Sheets, Level 1
http://www.w3.org/TR/REC-CSS1
Cascading Style Sheets 2.1
http://www.w3.org/TR/CSS21
W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/
Binding Styles to Markup
style attribute
style element
link element
Anatomy of a CSS Rule
Combining Rules
Combining Selectors
class selectors
id selectors
Lorem ipsum dolor
Contextual Selectors
Selectors
Inheritance
Firebug
http://www.getfirebug.com
The Cascade
CSS 2.1: Assigning property values, Cascading, and Inheritance
http://www.w3.org/TR/CSS21/cascade.html
The Cascade in Action
Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0
Sample style sheet for HTML 2.0
http://www.w3.org/TR/CSS1#appendix-a
Local copy
resources/css/html2.css
Default style sheet for HTML 4.0
http://www.w3.org/TR/CSS21/sample.html
Local copy
resources/css/html4.css
CSS Properties
53 properties
http://www.w3.org/TR/REC-CSS1
98 properties
font properties
font-size
Relative vs. Absolute
Relative Sizes and Inheritance
font "shorthand" property
text properties
CSS Units
Color Units
Wikipedia Web Colors
http://en.wikipedia.org/wiki/Web_colors
Web Palette / Web Safe Colors
visibone colorlab
http://www.visibone.com/colorlab/
Web Color Cube
http://cscie12.dce.harvard.edu/tools/webcube.cgi
web safe color palette
Block Model
Cascading Style Sheets: The Definitive Guide, 3rd ed
http://www.oreilly.com/catalog/css3/index.html
margin, padding, border
TRBL for padding and margin shorthand
border-style
Margin, Padding, Border Example
Backgrounds
Backgrounds aren't just for the "body"
wood.jpg
images/wood.jpg
marble.jpg
images/marble.jpg
water.jpg
images/water.jpg
Backgrounds aren't just for the "body"
flag.png
images/flag-small.png
United States Constitution
Backgrounds: use tiling and image size
Minuteman
minuteman dark
minuteman dark
minuteman dark
The Concord Hymn
Ralph Waldo Emerson (1837)
Pseudo-Classes and Elements
CSS 2.1 defines these pseudo-classes and pseudo-elements
http://www.w3.org/TR/CSS21/selector.html#pseudo-elements
Pseudo Elements
Pseudo Classes
Class Names
Choosing Class and ID Names
http://www.csslounge.co.uk/2005/07/05/choosing-class-and-id-names/
Float
Float and Clear
Float and Clear
Float
Float Opposite
Float and Margins
Float and a Flexible "Grid"
Float and a Flexible "Grid"
Display: none
Lists
Lists with Image
images/basketball.gif
Doing this without CSS
NCAA Men's Basketball Statistics
http://www.ncaa.org/stats/m_basketball/m_basketballMenu.html
Lists without list-style
Display List Items "Inline"
CSS Cookbook
http://www.oreilly.com/catalog/cssckbk2/
Lists as Navigation
CSS Cookbook
http://www.oreilly.com/catalog/cssckbk2/
Lists as Navigation
CSS Cookbook
http://www.oreilly.com/catalog/cssckbk2/
Breadcrumb Navigation
Hansel and Gretel
http://www.mordent.com/folktales/grimms/hng/hng.html
media selector
Harvard College Funding Database
Print CSS
CSS Print Profile
http://www.w3.org/TR/css-print/
Cascading Style Sheets : Designing for the Web (3rd Edition)
http://www.amazon.com/gp/product/0321193121
A List Apart: Articles: Printing a Book with CSS: Boom!
http://www.alistapart.com/articles/boom
Yahoo! UI (YUI) Library
Yahoo! User Interface Library
http://developer.yahoo.com/yui/
CSS Reset
http://developer.yahoo.com/yui/reset/
CSS Base
http://developer.yahoo.com/yui/base/
CSS Fonts
http://developer.yahoo.com/yui/fonts/
CSS Grids
http://developer.yahoo.com/yui/grids/
YUI Grid Example
YUI Grid Examples
http://developer.yahoo.com/yui/examples/grids/index.html
Special Nesting Grid E: 3/4 - 1/4
yui/examples/grids/grids-ge_source.html
Harvard Homepage Markup/Style Makeover
Harvard Home Page
http://www.harvard.edu/
Homepage Sections
Stage 1: YUI Grid
YUI Grid Template
harvardhomepage/harvard_css2.html
XHTML
harvardhomepage/harvard_css2.html
CSS
harvardhomepage/custom2.css
YUI CSS
harvardhomepage/reset-fonts-grids/reset-fonts-grids-min.css
Stage 2: Styles for Main sections
Styles for #doc, #ht, and #ft
harvardhomepage/harvard_css3.html
XHTML
harvardhomepage/harvard_css3.html
CSS
harvardhomepage/custom3.css
Stage 3: Styles for Navigation Lists
Styles for Navigation Lists
harvardhomepage/harvard_css4.html
XHTML
harvardhomepage/harvard_css4.html
CSS
harvardhomepage/custom4.css
Stage 4: Styles for Content
Styles for content
harvardhomepage/harvard_css.html
XHTML
harvardhomepage/harvard_css.html
CSS
harvardhomepage/custom.css
Results of Markup/Style Makeover
Harvard Homepage with Markup/Style Makeover
harvardhomepage/harvard_css.html
harvardhomepage/harvard_css.html
harvardhomepage/harvard_css.html
harvardhomepage/images/memorial_hall.png
harvardhomepage/images/memorial_hall.png
harvardhomepage/images/crimson_background2.png
harvardhomepage/images/crimson_background2.png
harvardhomepage/images/stiller.jpg
harvardhomepage/images/stiller.jpg
harvardhomepage/images/painrelievers.jpg
harvardhomepage/images/painrelievers.jpg
harvardhomepage/images/veritas.png
harvardhomepage/images/veritas.png
harvardhomepage/images/faust.png
harvardhomepage/images/faust.png
harvardhomepage/images/research.png
harvardhomepage/images/research.png
harvardhomepage/images/bullet-whiteoncrimson.png
harvardhomepage/images/bullet-whiteoncrimson.png
harvardhomepage/images/bullet.png
harvardhomepage/images/bullet.png
harvardhomepage/images/multimedia.png
harvardhomepage/images/multimedia.png
harvardhomepage/images/events.png
harvardhomepage/images/events.png
harvardhomepage/custom.css
harvardhomepage/reset-fonts-grids/reset-fonts-grids-min.css
harvardhomepage/reset-fonts-grids/reset-fonts-grids-min.css
Results on Many Browsers
Browser Tests, Services and Compatibility Test Suites
http://www.smashingmagazine.com/2007/10/02/browser-tests-services-and-compatibility-test-suites/
BrowserShots.org
http://browsershots.org/
SnagIt Capture
http://www.techsmith.com/screen-capture.asp
Pearl Crescent PageSaver
http://pearlcrescent.com/products/pagesaver/
browsershots
Screenshots for different browsers
harvardhomepage/gallery/index.html
BrowserShots.org
http://browsershots.org/
jquery.js
harvardhomepage/gallery/thickbox/jquery.js
thickbox.js
harvardhomepage/gallery/thickbox/thickboxjs
thickbox.css
harvardhomepage/gallery/thickbox/thickbox.css
JavaScript: Manipulate the Page
Exposing Additional Form Elements
Tabs with jQuery
Accessible, Unobtrusive Javascript Tabs wtih jQuery
http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/
Demos
http://stilbuero.de/jquery/tabs/
Example: tabs.html
A Calendar Widget
Example: date_picker.html
Slideshow: Thickbox
ThickBox
http://jquery.com/demo/thickbox/
gallery with no JavaScript
http://minerva.dce.harvard.edu/~dheitmey/gallery/?template=nojavascript.html
Example: Gallery with Thickbox
http://minerva.dce.harvard.edu/~dheitmey/gallery/?template=thickbox.html
Thickbox
http://jquery.com/demo/thickbox/
View example galleries
http://minerva.dce.harvard.edu/~dheitmey/gallery/

About Thumbshots thumbnails