How To:Bluff Your Way In CSS
by Andy Budd & Jeremy Keith
Why CSS?
What is CSS?
Cascading Style Sheets
A way of specifying how a page should look.
So what else is new?
CSS > tag soup
- External stylesheets = centralised control
- Separation of structure and style
- Graceful degradation
CSS < tag soup
Less page weight
Savings in page weight = savings in bandwidth = savings in money
Reasons to be cheerful
- Separation of content and design
- Easy to make changes
- Smaller downloads
- Faster loading times
but mostly...
It's cool!
Any Questions?
How to sound like one of the cool kids
To be seen as an expert you need to have the correct patter.
Express an irrational hatred of tables.
Some CSS experts have even been known to recode other peoples sites.
Here are a few tips.
If tables come up in conversation...
- Tutt or huff, roll your eyes and generally sound irritated.
- Say that you stopped using tables years ago and all your sites are now tableless.
- Say that it’s been so long since you created a site using tables, you wouldn’t know how to do it any more
Criticise Table Based Sites
Try this at the SXSW awards.
Remember. Data Tables are OK
Know your CSS development tools.
- WYSIWYG Editors like Dreamweaver MX 2004
- CSS Editors like CSSEdit, Style Master or TopStyle
- BBEdit or Notepad
- Emacs
Browsers
- Internet Explorer 5.x is buggy
- Develop using FireFox or Safari instead
- Thinking about dropping support for IE5
Any Questions?
What's hot and what's not
Showcase sites
High-Profile Makeovers
Any Questions?
Bluff Your Way Out Of Tricky Situations
What to do if your CSS doesn't work.
- Blame it on a browser bug.
What to tell people looking for CSS help
- Validate your code
- Create a minimal text case
- Try Position is Everything, the CSS-Discuss wiki or Google
- Post a question to the CSS-discuss mailing list
Use Misdirection
- I’m thinking about buying a Mac
- CSS is so last year anyway. I’m
spending most of my time DOM scripting
Any Questions?
Advanced CSS Subjects
Image Replacement Techniques
Substituting images for text
- Fahrner Image Replacement (FIR)
- scalable Inman Flash Replacement (sIFR)
- The Leahy/Langridge Technique
What about accessibility?
Hacks/Filters
Combat browser bugs with browser-specific CSS rules
- Tantek Box Model Hack
- Commented Backslash Hack
- Star
html Selector
Hack Example
Visible to all:
#myelement { color: red; }
Only visible to Internet Explorer:
* html #myelement { color: green; }
CSS3
The next stage in CSS evolution
Structural pseudo classes
:first-child:last-child:only-child
Any Questions?
Show that you're part of the community
