daveandal.netdaveandal.net

Cascading Style Sheets 101Cascading Style Sheets 101

““How I learnt to love CSS and found my How I learnt to love CSS and found my inner designer”inner designer”

AgendaAgenda

Why use CSS? First steps Styling content Styling sites

Obligatory QuoteObligatory 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?What is HTML?

HMTL is content Implied semantics

HTML is NOT presentation

What is CSS?What is CSS?

CSS is a styling language Presentation is separate from content

What does CSS Enable?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 CSSThe Problems of CSS

The Problems of CSSThe Problems of CSS

What's holding you back?What's holding you back?

You think CSS is hard Wrong

Simple CSS is easy Complex CSS can be hard

What we do wrongWhat we do wrong

Markup according to look Using <h4> because <h1> is too big Whitespace added with <br/> and <p/> Embedd presentation

<p> <font size="3" color="ff0000">...</font></p>

First StepsFirst Steps

Clean up your HTML Switch from presentational

To semantic

<p class="heading">My heading</p><p>Read some <span class="bold">important</span> news</p>

<h1>My heading</h1><p>Read some <strong>important</strong> news</p>

First StepsFirst Steps

Remove deprecated elements and attributes http://www.w3.org/TR/html401/appendix/

changes.html#h-A.3.1.2 Remove inline styles

<p style="font-size:..."> ... </p>

Next StepsNext Steps

Apply styling Create stylesheet Add stylesheet rules Don't overuse classes

Next Steps, with Server ControlsNext Steps, with Server Controls

Only use server controls when needed Be aware of the markup they generate Use CSS adapters

IDs and ClassesIDs and Classes

# refers to element id

. refers to class

<p id="warning"> ... </p>

#warning { color: #ff0000;}

<p class="warning"> ... </p>

.warning { color: #ff0000;}

Don't overdo classesDon't overdo classes

<ul> <li><a href="page1.htm" class="menuLink" /></li> <li><a href="page2.htm" class="menuLink" /></li> <li><a href="page3.htm" class="menuLink" /></li></ul>

.menuLink { color:#fcfcfc; text-decoration: none;}

Don't overdo classes – the cureDon't overdo classes – the cure

<ul id="menu"> <li><a href="page1.htm" /></li> <li><a href="page1.htm" /></li> <li><a href="page1.htm" /></li></ul>

#menu > a { color:#fcfcfc; text-decoration: none;}

Simple CSS DemoSimple CSS Demo

Convert non-styled page to a styled page

Adding StylesheetsAdding Stylesheets

Use <link>

Use @import with stylesheets

<link rel="stylesheet" href="styles.css" />

@import "modern.css";

Conditional StylesheetsConditional Stylesheets

Using conditional comments to avoid hacks

Allows cleaner CSS

<link rel="stylesheet" href="styles.css" /><!--[if lt IE 7]> <link rel="stylesheet" href="ie6.css" /><![endif]-->

ImagesImages

Images are presentation Images can reduce accessibility

Use empty alt attribute

Better to use CSS

<img src="..." alt="" />

<asp:Image AlternateText="" GenerateEmptyAlternateText="true" />

Images in CSSImages in CSS

<div id="header"> <p>Welcome to our site</p></div>

#header { background: url(logo.gif) no-repeat left top; padding: 10px; border: 0;}

Data Entry FormsData Entry Forms

Often use tables Tables should be for tabular content Use CSS layout instead

Forms – Entry FieldsForms – Entry Fields

Associate labels with entry fields

<label for="FirstName">First Name:</label><input type="text" id="FirstName" />

<asp:Label AssociateControlID="FirstName" Text="First Name:" /><asp:TextBox id="FirstName" />

Forms - LayoutForms - Layout

Grouping related content

<fieldset> <legend>Enter your details:</legend>

...

</fieldset>

Forms - LayoutForms - Layout

<div> <asp:Label ID="label1" runat="server" AssociatedControlID="FirstName" Text="First Name:" /> <asp:TextBox ID="FirstName" runat="server" /></div>

div { height: 1.3em; position: relative;}div input, div select { position: absolute; left: 7em;}

Forms DemoForms Demo

Site LayoutSite Layout

Table based designs CSS based designs

Don’t Abandon Proven DesignDon’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 TablesSite Design without Tables

<div id="header"> <h1>CSS 101</h1></div>

<div id="nav"> <ul> <li><a href="default.aspx">Home</a></li> <li><a href="Contact.aspx">Contact</a></li> </ul></div>

<div id="content"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder></div>

<div id="footer"> <p>Obligatory copyright stuff</p></div>

Site Design without TablesSite 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'Don't catch 'divitus'

<div id="header"> <h1>CSS 101</h1></div>

<div id="nav"> <ul> <li><a href="default.aspx">Home</a></li> <li><a href="Contact.aspx">Contact</a></li> </ul></div>

<div id="content"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder></div>

<div id="footer"> <p>Obligatory copyright stuff</p></div>

Don't catch 'divitus'Don't catch 'divitus'

<h1>CSS 101</h1>

<div id="nav"> <ul> <li><a href="default.aspx">Home</a></li> <li><a href="Contact.aspx">Contact</a></li> </ul></div>

<div id="content"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder></div>

<div id="footer"> <p>Obligatory copyright stuff</p></div>

Don't catch 'divitus'Don't catch 'divitus'

<h1>CSS 101</h1>

<ul id="nav"> <li><a href="default.aspx">Home</a></li> <li><a href="Contact.aspx">Contact</a></li> </ul>

<div id="content"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder></div>

<div id="footer"> <p>Obligatory copyright stuff</p></div>

Site Design DemoSite Design Demo

SummarySummary

CSS can be easy Improve development

Reduced maintenance Improved performance

Feel good Improving the web, one site at a time

ResourcesResources

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

ResourcesResources

Sites http//:www.w3c.org/ http://www.w3schools.com/ http://www.csszengarden.com/ http://www.subcide.com/tutorials/csslayout/

index.aspx

ResourcesResources

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 ToolsBrowser Tools

IE IE Developer Toolbar

Firefox CSS Viewer Edit CSS Firebug Web Developer

Me and My StuffMe and My Stuff

http://ipona.com/samples

davids@ipona.com