CSS: An Introduction

Ted Roche

Ted Roche & Associates LLC

Ted Roche

Principal, Ted Roche & Associates, LLC www.tedroche.com
Development: FOSS Data-Centric Business Apps
- PHP, Ruby/Rails, MySQL, PostgreSQL on Apache, Linux, BSD
ACM Senior Member
MySQL5 Certified Developer
Former Fearless Leader of GNHLUG, CentraLUG
Author/editor: 10 tech books, 60 magazine articles
MCSD, MCSE, 9x MVP, 30 conferences

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

Using FoxPro 2.5 DOS
Using FoxPro 2.5 Windows
FoxPro Advanced Developers Handbook
FoxPro Windows Multi-User Developer's Guide
Hacker's Guide for Visual FoxPro 3
Hacker's Guide to Visual FoxPro 6
Essential SourceSafe
Hacker's Guide to Visual FoxPro 7
Office Automation with Visual FoxPro
MySQL Client-Server Applications with Visual FoxPro

CSS: An Introduction - The Outline

Why Use CSS?
Dramatic Examples, Pragmatic Examples
The Basics: selectors & rules, Cascading, box model, positioning
When to apply? How to implement?
Where to go from here: references, books, tools
BONUS: Where's web going (in that handbasket)? HTML5/CSS3 Preview
Slides: http://www.tedroche.com/papers.html

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

Why bother with CSS?

Web pages made of HyperText Markup Language are not designed for today's WWW!
- Text, not page description language
CSS separates content/structure from presentation
More accessible content
- Visually impaired, machine readable processing
Better search engine parsing and ranking
More easily manipulated
- Switch CSS for mobile, or customize or for print

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

Drama and Pragma - tic Examples

Drama:
- http://www.csszengarden.com/
- http://store.apple.com
Pragma:
- http://www.tedroche.com/
- Slony

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

Style Rules and Declarations
Style Basics: inline, embedded, separated
Cascading Rules: What's the 'C' for?
CSS Box Model: what contains what?
Positioning: lining it all up

CSS in one page. Consider splitting into three.

Rules and Declarations

div#centercontent a:link, a.TextLink:link {color: #000080; text-decoration: none;}
A style rule has selector(s) and declaration(s)
A simple selector is an element name
A selector can refer to one element using ID or a group with CLASS
Complex selectors can specify containership, behavior, and more
Example: div.textbody p#summary ul>li em {color:blue}

All styles, inline, embedded or referenced are sets of rules which contain selectors and declarations.

Style Basics

Style is inline, embedded or referenced separately
Inline: <a style="font..">
Embedded: In <head> declare <style> block, the selectors point to the effected elements
Referenced (recommended): separate css stylesheet, use with <link> tag in <head>
Ex:<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />

Inline is the most local and sure to affect element, but the least portable and hardest to maintain. Embedded is still limited to the page it is placed on, or the header template it comes from. A separate referenced stylesheet is the most flexible and easiest to maintain.

'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: inherited < element < class < id < inline
My Mnemonic: Closer beats more distant

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

The CSS Box Model

HTML is made out of Boxes!

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 on document
position:relative positions relative to container
position:fixed positions fixed to the viewport
float:right or left detaches
z-index: +/- integer positions above/below other layers

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

How to apply CSS?

Top-down or bottom-up? Use a framework if you can.
- See http://960.gs for example
- Partition (corporate, application, module) or (structure, font, color)
Working the page; tweak locally (use FireBug!!!)
As it's working, move inline to <style> block
Generalize specific style from id to classes, to shared CSS files
Test, test, test! Validate and cross-browser tests

This might work well as a demo, too.

Resources: Web pages, books, tools

There are great references and well-established best practices:
Learn more at... web sites:
- http://www.w3schools.com, SitePoint Reference, Google
- Visibone and other cheatsheets
- A List Apart, Eric Meyer in-depth articles
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.

Summary

Separate content and structure in HTML from style and presentation in CSS.
Master the Basics: learn selectors, cascade rules, box model, positioning
Stand on the shoulders of giants: use the resources in the books and web sites.
Dykstra: Good programmers borrow, great programmers steal.

Here I tell them what I told them.

Up-and-coming features: HTML 5

Sneak
peek!

HTML 5 compatibility will be introduced incrementally into browsers
Try <!DOCTYPE HTML> and validate at validator.w3.org
New HTML 5 elements: <header>, <nav>, <section>, <article>, <aside>
HTML 5 input extended with MIN, MAX, type and pattern={RegEx}
HTML 5 controversy: <video>, <canvas>, <svg>
see http://www.tedroche.com vs. HTML 5 version

Up-and-coming features: CSS 2.1, 3

Sneak
peek!

IE 8 FINALLY, finally, finally supports CSS 2.1: http://www.w3.org/TR/CSS21/tables.html
display: table, table-row, table-column, table-caption & more
CSS3: opacity and rgba()
CSS3: drop-shadows, rounded corners
some available now with -moz-property (or -o- or -webkit-)
see http://www.tedroche.com and /css/traa2.css vs. IE7

Thank you!

Questions?

Presentation at http://www.tedroche.com/papers.html

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, S⁵ 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." (requisite obscure Dilbert reference)

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 Ruby on Rails, Python, PHP, Apache, Linux, MySQL, PostgreSQL, Microsoft Visual FoxPro, 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 six other FoxPro books and author of numerous magazine articles. He's a popular speaker at conferences worldwide. Ted is a Microsoft Certified Solution Developer, Microsoft Certified System Engineer, and nine-time winner of the Microsoft Support Most Valuable Professional award. He's earned MySQL certification twice: the Core certification for MySQL 4.x and the Certified Developer certification for 5.x. He was recently recognized by the ACM and inducted as Senior Member.

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. In 2005 and 2006, he was 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) along with Bruce Dawson, Bill Sconce and David Berube. He is the former Fearless Leader and chair of the board (2006-9) of the Greater New Hampshire Linux User Group (http://www.gnhlug.org) and continues to be a LAMP activist with the Central New Hampshire Linux User Group (http://www.centralug.org).

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

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

GNHLUG Python SIG, February 2010