daveandal.net
Cascading Style Sheets 101
“How I learnt to love CSS and found my
inner designer”
Agenda
Why use CSS?
First steps
Styling content
Styling sites
Obligatory Quote
If style sheets or similar information are not added to HTML,
the inevitable price will be documents that only look good on a
particular browser, at a particular window size with the default
fonts, etc
Chris Lilley (former chair of CSS Working Group)
What is HTML?
HMTL is content
Implied semantics
HTML is NOT presentation
What is CSS?
CSS is a styling language
Presentation is separate from content
What does CSS Enable?
Separates style from structure
Cleaner code
Cross browser & device layout
Increased Accessibility
Multiple designs and easy redesign
Reduces page size
Reduce cost, Improved performance
The Problems of CSS
The Problems of CSS
What's holding you back?
You think CSS is hard
Wrong
Simple CSS is easy
Complex CSS can be hard
What we do wrong
Markup according to look
Using because is too big
Whitespace added with and
Embedd presentation
...
First Steps
Clean up your HTML
Switch from presentational
My heading
Read some important news
To semantic
My heading
Read some important news
First Steps
Remove deprecated elements and attributes
http://www.w3.org/TR/html401/appendix/cha
nges.html#h-A.3.1.2
Remove inline styles
...
Next Steps
Apply styling
Create stylesheet
Add stylesheet rules
Don't overuse classes
Next Steps, with Server Controls
Only use server controls when needed
Be aware of the markup they generate
Use CSS adapters
IDs and Classes
# refers to element id
...
#warning {
color: #ff0000;
}
. refers to class
...
.warning {
color: #ff0000;
}
Don't overdo classes
.menuLink {
color:#fcfcfc;
text-decoration: none;
}
Don't overdo classes – the cure
#menu > a {
color:#fcfcfc;
text-decoration: none;
}
Simple CSS Demo
Convert non-styled page to a styled page
Adding Stylesheets
Use
Use @import with stylesheets
@import "modern.css";
Conditional Stylesheets
Using conditional comments to avoid hacks
Allows cleaner CSS
Images
Images are presentation
Images can reduce accessibility
Use empty alt attribute
Better to use CSS
Images in CSS
Welcome to our site
#header {
background: url(logo.gif) no-repeat left top;
padding: 10px;
border: 0;
}
Data Entry Forms
Often use tables
Tables should be for tabular content
Use CSS layout instead
Forms – Entry Fields
Associate labels with entry fields
First Name:
Forms - Layout
Grouping related content
Enter your details:
...
Forms - Layout
div {
height: 1.3em;
position: relative;
}
div input, div select {
position: absolute;
left: 7em;
}
Forms Demo
Site Layout
Table based designs
CSS based designs
Don’t Abandon Proven Design
Tables are dead, long live tables
Easy to implement
No CSS knowledge required
But
Table based designs can be
Less accessible
Less flexible
Less maintainable
Site Design without Tables
CSS 101
Home
Contact
Obligatory copyright stuff
Site Design without Tables
#header {
background: url(../images/logo.jpg);
background-position: 0 0;
background-repeat: no-repeat;
height: 72px;
}
#nav {
left: 0;
width: 20%;
padding: 1em 0;
position: absolute;
}
#content {
left: 20%;
width: 80%;
padding: 1em 0;
position: relative;
}
Don't catch 'divitus'
CSS 101
Home
Contact
Obligatory copyright stuff
Don't catch 'divitus'
CSS 101
Home
Contact
Obligatory copyright stuff
Don't catch 'divitus'
CSS 101
Home
Contact
Obligatory copyright stuff
Site Design Demo
Summary
CSS can be easy
Improve development
Reduced maintenance
Improved performance
Feel good
Improving the web, one site at a time
Resources
Books
Designing with web standards, Jeffrey Zeldman
Transcending CSS, Andy Clarke
Core CSS 2nd Ed, Keith Schengili-Roberts
Resources
Sites
http//:www.w3c.org/
http://www.w3schools.com/
http://www.csszengarden.com/
http://www.subcide.com/tutorials/csslayout/in
dex.aspx
Resources
Tools
HTML Validator
http://www.w3.org/People/Raggett/tidy/
HTML Tidy
http://www.w3.org/MarkUp/#tidy
CSS Validator
http://jigsaw.w3.org/css-validator/
Browser Tools
IE
IE Developer Toolbar
Firefox
CSS Viewer
Edit CSS
Firebug
Web Developer
Me and My Stuff
http://ipona.com/samples
davids@ipona.com