1. daveandal.net Cascading Style Sheets 101 “How I learnt to love CSS and found my inner designer”

2. Agenda Why use CSS? First steps Styling content Styling sites

3. 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)

4. What is HTML? HMTL is content   Implied semantics HTML is NOT presentation

5. What is CSS? CSS is a styling language Presentation is separate from content

6. 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

7. The Problems of CSS

9. What's holding you back? You think CSS is hard Wrong   Simple CSS is easy   Complex CSS can be hard

10. What we do wrong Markup according to look   Using because is too big   Whitespace added with and   Embedd presentation...

11. First Steps Clean up your HTML Switch from presentational To semantic My heading Read some important news My heading Read some important news

12. 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...

13. Next Steps Apply styling   Create stylesheet   Add stylesheet rules   Don't overuse classes

14. Next Steps, with Server Controls Only use server controls when needed Be aware of the markup they generate Use CSS adapters

15. IDs and Classes # refers to element id. refers to class... #warning { color: #ff0000; }....warning { color: #ff0000; }

16. Don't overdo classes.menuLink { color:#fcfcfc; text-decoration: none; }

17. Don't overdo classes – the cure #menu > a { color:#fcfcfc; text-decoration: none; }

18. Simple CSS Demo Convert non-styled page to a styled page

19. Adding Stylesheets Use Use @import with stylesheets @import "modern.css";

20. Conditional Stylesheets Using conditional comments to avoid hacks Allows cleaner CSS

21. Images Images are presentation Images can reduce accessibility   Use empty alt attribute Better to use CSS <asp:Image AlternateText="" GenerateEmptyAlternateText="true" />

22. Images in CSS Welcome to our site #header { background: url(logo.gif) no-repeat left top; padding: 10px; border: 0; }

23. Data Entry Forms Often use tables Tables should be for tabular content Use CSS layout instead

24. Forms – Entry Fields Associate labels with entry fields First Name:

25. Forms - Layout Grouping related content Enter your details:...

26. 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; }

27. Forms Demo

28. Site Layout Table based designs CSS based designs

29. 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

30. Site Design without Tables CSS 101 Home Contact Obligatory copyright stuff

31. 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; }

32. Don't catch 'divitus' CSS 101 Home Contact Obligatory copyright stuff

33. Don't catch 'divitus' CSS 101 Home Contact Obligatory copyright stuff

34. Don't catch 'divitus' CSS 101 Home Contact Obligatory copyright stuff

35. Site Design Demo

36. Summary CSS can be easy Improve development   Reduced maintenance   Improved performance Feel good   Improving the web, one site at a time

37. Resources Books   Designing with web standards, Jeffrey Zeldman   Transcending CSS, Andy Clarke   Core CSS 2 nd Ed, Keith Schengili-Roberts

38. Resources Sites   http//:www.w3c.org/   http://www.w3schools.com/   http://www.csszengarden.com/   http://www.subcide.com/tutorials/csslayout/in dex.aspx

39. 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/

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

41. Me and My Stuff http://ipona.com/samples davids@ipona.com