CSS: An Introduction

Ted Roche

Ted Roche & Associates LLC

CSS: An Introduction - The Outline

Introduction: tell them what you're gonna tell them.

Scope

An hour or two at a LUG can't replace 60 hours of study, but can distill the important items.

Ted Roche

Visit tedroche.com for more information, papers, links and more.

Why bother with CSS?

A side conversation on Rich Internet Applications can break out here. Off-topic for this presentation.

Drama and Pragma - tic Examples

Drama-tic examples point out the beautiful things that can be done with CSS, a lot of graphic talent, time and resources. The pragmatic examples are intended to be the kinds of things the attendees can go home and try tonight.

The Basics: Selectors, Rules, Cascading

CSS in one page. Consider splitting into three.

Style Basics

[any material that should appear in print but not on the slide]

Rules and Declarations

  • A style rule has a selector and a declaration (name: value)
  • A simple selector is an element name ( a {color...})
  • A selector can refer to one element using ID or a group with CLASS
  • Complex selectors can specify containtainership, behavior, and more
[any material that should appear in print but not on the slide]

'C' is for Cascade

  • Rules 'cascade' - have an order of operations - based on:
  • Order of declaration: later declarations override earlier
  • "Inheritance:" outer elements 'contain' inner ones
  • Specificity: inline > id > class > element > generic
  • Remember: Closer beats more distant
[any material that should appear in print but not on the slide]

HTML and CSS are made out of Boxes!

All of HTML/CSS can be seen as boxes, inline and block. See FireBug.

The CSS Box Model

3D Box Model

source: www.hicksdesign.co.uk/boxmodel

Image released under a Creative Commons Attribution License by Hicks Design. Thanks~

Positioning: lining it all up

  • DIVs are boxes, flow with the HTML unless positioned
  • position:static positions in the flow (default)
  • position:absolute positions absolutely
  • position:relative positions relative to container
  • position:fixed positions fixed to the viewport
  • float:right or left detaches
  • z-index: +/- integer positions above/below others
[any material that should appear in print but not on the slide]

Enough Slides!!!

Let's write code!

[any material that should appear in print but not on the slide]

Resources: Web pages, books, tools

CSS book cover CSS book cover CSS book cover
  • You Are Not Alone.
  • NIH & DIY: Not Invented Here and Do It Yourself
  • Learn more at... web sites:
  • Cheatsheets! Google for them!
  • Learn more from books
    • Cascading Style Sheets: Separating Content from Presentation
    • O'Reilly "two fish" books: Reference and pocket book
CSS:SCfP is from "Friends of Ed" an imprint of Apress. The "two fish" books are from O'Reilly and Associates. Both should be available from fine booksellers everywhere.

Resources: Tools (continued)

  • Eclipse: Rich client editing, help, etc.
  • SciTE: Much lighter
  • KompoZer, formerly Nvu: nee Netscape Composer, WYSIWYG
  • FireBug: FireFox extension from Netscape developer Joe Hewitt
  • Web Developer: Toolbar, outlines, ruler and more!
Much discussion can be had on rich environments vs. lean IDEs. It can even be done in Emacs.

Summary

  • Use CSS to separate content and structure from style and presentation.
  • Master the Basics
  • Stand on the shoulders of giants: use the resources in the books and web sites.
  • Tools can make the job more efficient.
Here I tell them what I told them.

Thank you!

Questions?

  • Presentation at http://www.tedroche.com/papers.php

This document was edited with SciTE, http://www.scintilla.org/ on Linux (also available on Windows and other fine platforms. Interoperability is Good.

The templates for the document and instructions on their use are the Simple Standards-based Slide Show System, S5 developed by Eric Meyer and available at http://www.meyerweb.com/eric/tools/s5/ under a Creative Commons license. Thanks, Eric!

About the presenter:

Ted Roche learned to program BASIC on a PDP-4 at the age of 15. He was conferencing and IM'ing on the Dartmouth Time Sharing System in the late 1970s. (IM and chat rooms are old. So's Ted.) He shipped his first commercial app in 1978, which ran on a WANG 2200. His first public domain software was a quad-density Epson printer driver for the Commodore 64 GEOS operating system, hand-coded in 6502 assembler. Amigas were his favorite computers, although PCs are getting better. He ran the electrical plant on a nuclear-powered ballistic missile submarine until the Russians gave up, and then there wasn't any challenge in it any more. He has coded with "ohs."

Since 1987, Ted has worked fulltime as a software developer. He has worked for state agencies, insurance companies and consulting firms. He established Ted Roche & Associates on July 4, 2001 . Ted Roche & Associates, LLC develops Web, client-server and LAN-based applications using Python, PHP, Apache, Linux, MySQL, PostgreSQL, Microsoft Visual FoxPro, SQL Server and other best-of-breed tools. Based in New Hampshire, his company offers consulting, training and mentoring, on-site and long-distance, as well as software development services. Ted is author of Essential SourceSafe, co-author of the award-winning Hacker's Guide to Visual FoxPro series, and a contributor to five other FoxPro books. In addition to numerous magazine articles, he's a popular speaker at conferences worldwide. Ted is a Microsoft Certified Solution Developer, Microsoft Certified System Engineer, a nd nine-time winner of the Microsoft Support Most Valuable Professional award. He's working towards the MySQL Professional certification.

Ted has worked with Linux since 1999. The Ted Roche & Associates, LLC intranet and extranet run on Apache, TWiki (Perl), PHP, Python, WebMin, MySQL, PostgreSQL and other LAMP applications. Ted's office automation tools include OpenOffice.org, FireFox, Thunderbird, Camino, SciTE, Subversion, CygWin, PuTTY, WinSCP and OS X Tiger. He is one of the team teachers for the LAMP certificate at the New Hampshire Technical Institute's Center for Training and Business Development (http://www.nhti.edu/ctbd) and an activist in the Greater New Hampshire Linux User Group ( http://www.gnhlug.org).

The most current contact information for Ted can be found at http://www.tedroche.com

Valid CSS!

Valid XHTML 1.0!

Creative Commons License
This work is licensed under a Creative Commons Attribution 2.5 License.