CSS: An Introduction
Introduction ◊
Cascading Style Sheets, or CSS, is the presentation component of what is typically understood to be the three–component makeup of a web document. (The other two being HTML and JavaScript.) This course covers the major aspects of CSS, focusing on its more difficult concepts, such as floating elements, specificity, numerical units, and inheritance.
⇑Prerequisite ◊
You should understand, or be very familiar with, HTML. Additionally, you should have a firm grasp on the concept of HTML's inheritance structure. (A review takes place on the first day of class.)
If you don't know HTML, look at the tutorials at w3schools.com. Also, Hunter offers a six–week class.
⇑Topics Covered ◊
- General syntax and nomenclature
- The cascade
- Specificity
- Inheritance
- Selectors
- Basic visual formatting
- Values and units
- Fonts and text properties
- Floating and positioning
- Padding, borders, and margins
Assignments ◊
There will be two homework assignments—one every two weeks—and a project, due on the last day of class.
⇑Development Environment ◊
You can write your source code in any text editor, but it must validate at the online CSS validator.
⇑Announcements ◊
- 6 November 2009:
-
- We're meeting at Tisch tomorrow at 12:45 PM.
- Also, we have a closed Google group for this course.
Time and Place ◊
- Saturdays
- 1:00 PM — 3:00 PM
- Hunter College, 1025 E, 695 Park Avenue, New York, NY
There'll be a 15–minute break at about 2:00 PM
⇑Dates ◊
Saturday, 7 November 2009
- What is CSS?
- CSS Versions.
- Linking CSS to a Web Document.
- Standards Mode, Quirks Mode, and Doctype Sniffing.
Saturday, 14 November 2009
- Statements
- At–rules
- Rule sets
- Intro to selectors
Saturday, 21 November 2009
- Declaration blocks
- Declarations, properties, and values
- Lengths, units, and percentages
- Colors and numbers
Saturday, 5 December 2009
- Shorthand properties
- The CSS box model
- CSS comments
- CSS identifiers
Saturday, 12 December 2009
- Selectors: universal selector, element type selector, class selector, ID selector, attribute selector
- Selector grouping
- Combinators: descendant selector, child selector, adjacent sibling
- Pseudo–classes: :link, :visited, :focus, :hover, :active
Wednesday, 6 December 2009
- The cascade and inheritance
- !important declarations
- Specificity
- Floating
Textbook ◊
There is no textbook for the course. Instead, there are a pair of free online tutorials that will support class lectures. Refer to the Assigned Readings section below for more.
⇑Assigned Readings ◊
- Adding a Touch of Style
- http://www.w3.org/MarkUp/Guide/Style
- The CSS Tutorial
- http://www.csstutorial.net/
Suggested Readings ◊
The Ultimate CSS Reference discusses which browsers support which tags, and explains in scant detail how all the tags work. The second book, CSS: The Definitive Guide, goes into exhaustive detail about concepts such as floating elements, the specificity, and all the CSS tags.
The former is appropriate for those with a good grasp on CSS, while the latter is more suited to those learning. If you can afford it, purchase both.
| Title | Author | Edition | ISBN | Book cover |
| The Ultimate CSS Reference | Tommy Olson and Paul O'Brien | First | 0980285852 |
![[Cover of CSS: The Ultimate CSS Reference]](../images/the_ultimate_css_reference.gif "[Cover of CSS: The Ultimate CSS Reference]")
|
| CSS: The Definitive Guide | Eric A Meyer | Third | 0596527330 |
![[Cover of CSS: The Definitive Guide]](../images/css-the_definitive_guide.jpg "[Cover of CSS: The Definitive Guide]")
|
Homework ◊
- Homework 1: due Friday, 20 November 2009, by 11:59 PM
- Project 1: due Friday, 4 December 2009, by 11:59 PM
Project ◊
TBA
⇑Resources ◊
-
The CSS Float Rules
⌊ http://roy.vanegas.org/teaching/css/the_float_rules -
Cascading Style Sheets Level 2 Revision 1 (CSS
2.1) Specification
⌊ http://www.w3.org/TR/CSS21/ -
The CSS 2.1
Properties Reference from culturedcode.com
⌊ http://www.culturedcode.com/css/ -
CSS Zen Garden:
The Beauty of CSS Design
⌊ http://www.csszengarden.com
Software ◊
As mentioned in the Development Environment section above, you're welcome to write your code in any text editor. A good, cross platform editor is Amaya, which is developed by the W3. You're also advised to download a few extra browsers, so you can get multiple perspectives on your web documents.
- Amaya
-
I advise you to use the W3's Amaya, which is free
and available for Mac
OS X,
Windows, Linux.
- Windows NT/2000/XP: 7.8MB
- Mac™ (PPC version): 11.8MB
- Mac (Intel): 11.2MB
- Any Browser
- I encourage you to visit Kelson Vibber's Alternative Browser Alliance. Links to many free alternative web browsers are listed there, and the information contained on its pages will prove very useful as you learn HTML.
Contact ◊
Email: rvanegas at
hunter dot cuny
dot edu
Office Hours: by appointment (via
email) at NYU during the weekday.
![[valid html 4.01!]](http://www.noisefloormusic.org/images/banners/html.png)
![[valid css 2.1!]](http://www.noisefloormusic.org/images/banners/css.png)
![[alternatives browsers!]](http://roy.vanegas.org/teaching/images/alternative_browser_alliance.png)
![[accessible by all!]](http://roy.vanegas.org/teaching/images/any_browser.png)
![[wai – wcag 1.0!]](http://roy.vanegas.org/teaching/c/images/wcag.png)
Roy Vanegas
Last modified: Thu Jan 16 12:48:34 EST 2010