CSS for Your Web Site - Part I

Who should attend:

Web developers and designers who are unfamiliar with or would like to know more about the use of Cascading Style Sheets. Attendees should have some understanding of basic semantic markup prior to attending this presentation.

Session Overview:

Would you like to:

  • Reduce the size of your web pages by 20-40%?
  • Be able to change the font or background color of all of your site's web pages by editing just one file?
  • Ensure that all of your pages render properly no matter what browser is used?
  • Ensure that all of your pages print properly?
  • Increase the accessibility of your web site?

Learn how to control the look and feel of your web page using Cascading Style Sheets - CSS. CSS is an integral part of modern web sites, and is a world-wide standard for achieving an attractive, uniform look and feel. Done properly, one file can control the appearance of thousands of pages. The separation of content and presentation made possible by CSS is a key tool in creating accessible web content.

The first half of this class is a lecture-style presentation by one of the state's recognized experts in CSS, Jason Gleman from the Department of Civil Service. Jason will lead you through the theory behind CSS, explain how rules are applied, explore properties and selectors, the box model and positioning, and demonstrate some examples you can use in your own site.

Presentation and Sample Files:

Lab Session Example 1:

  1. Example 1 Lesson Plan, (Microsoft® Word Document)
  2. PhonePolicy.doc - Word version of the text of the first example; it's what the finished HTML document should look like.
  3. PhonePolicy.txt - Plain text version of the document.
  4. Example1.html - Blank HTML document into which #3 will be copied.
  5. cellphone.gif - Graphic for use in the optional exercises.
  6. bullet.gif - Graphic for use in the optional exercises.
  7. Example1A.html - Final HTML document.
  8. Example1A.css - Final CSS document.

Lab Session Example 2:

  1. ITPolicy.doc - Word version that shows what the final document should look like.
  2. Example2LessonPlan.doc - Outlines the exercises included in the second example. NOTE: At the end of the lesson plan, we go a bit further in styling the navigation than is written in the lesson plan....The additional markup is included in the final examples of the HTML document and the CSS document.
  3. Example2.html - HTML version of #1 with bare-bones markup -- aside from two lists contained in the document and appropriately marked up, everything is marked up with paragraphs.
  4. Example2a.css - Final CSS document.
  5. Example2Final.html - Final HTML document.

Time & Place:

  • Tuesday, September 9, 2008
  • 9:00 - 12:00 (sign-in begins at 8:30)
  • Empire State Plaza, Concourse Level, Meeting Rooms 3 & 4, Albany NY