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

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 To semantic My heading Read some important news My heading Read some important news

First Steps Remove deprecated elements and attributes   nges.html#h-A 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. refers to class... #warning { color: #ff0000; }....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 with "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 <asp:Image AlternateText="" GenerateEmptyAlternateText="true" />

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 <asp:Label ID="label1" runat="server" AssociatedControlID="FirstName" Text="First Name:" /> 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 2 nd Ed, Keith Schengili-Roberts

Resources Sites   http//:       dex.aspx

Resources Tools   HTML Validator     HTML Tidy     CSS Validator  

Browser Tools IE   IE Developer Toolbar Firefox   CSS Viewer   Edit CSS   Firebug   Web Developer

Me and My Stuff