daveandal.net cascading style sheets 101 “how i learnt to love css and found my inner designer”
TRANSCRIPT
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