Your SlideShare is downloading. ×
0
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css

1,403

Published on

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,403
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
85
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS: Separating Design and Content
  • 2. Assumptions <ul><li>You know HTML </li></ul><ul><li>You do not know CSS </li></ul><ul><li>You care about aesthetics and function </li></ul><ul><li>You have 50 minutes to kill </li></ul>
  • 3. What We’ll Do <ul><li>What is CSS? </li></ul><ul><li>View some code and talk basics </li></ul><ul><li>Why use CSS? </li></ul><ul><ul><li>Advantages to Workflow </li></ul></ul><ul><ul><li>Cost Savings </li></ul></ul><ul><li>Implementations </li></ul><ul><li>Resources </li></ul>
  • 4. What are Cascading Style Sheets? <ul><li>Created by Hakon Wium Lie of MIT in 1994 </li></ul><ul><li>Has become the W3C standard for controlling visual presentation of web pages </li></ul><ul><li>Separates design elements from structural logic </li></ul><ul><li>You get control and maintain the integrity of your data </li></ul>
  • 5. Let’s See Some Code <ul><li>Sample Style sheet </li></ul><ul><li>Rule Structure </li></ul>
  • 6. Selectors <ul><li>Element Selectors – (refer to HTML tags)‏ </li></ul><ul><ul><li>H1 {color: purple;} </li></ul></ul><ul><ul><li>H1, H2, P {color: purple;} </li></ul></ul><ul><li>Contextual – (refer to HTML, but in context)‏ </li></ul><ul><ul><li>LI B {color: purple;} </li></ul></ul>
  • 7. Selectors <ul><li>Class Selectors </li></ul><ul><ul><li>&lt;H1 CLASS=“warning”&gt;Danger!&lt;/H1&gt; </li></ul></ul><ul><ul><li>&lt;P CLASS=“warning”&gt;Be careful…&lt;/P&gt; </li></ul></ul><ul><ul><li>…… . </li></ul></ul><ul><ul><li>In your HTML code - </li></ul></ul><ul><ul><li>H1.warning {color: red;} </li></ul></ul><ul><ul><li>OR to an entire class… </li></ul></ul><ul><ul><li>.warning {color:red;} </li></ul></ul>
  • 8. Applying CSS to HTML <ul><li>Style rules can be applied in 3 ways: </li></ul>Inline Styles : &lt;H1 STYLE=“color: blue; font-size: 20pt;”&gt;A large purple Heading&lt;/H1&gt; For individual elements using the STYLE attribute Embedded style sheets : &lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;Stylin’!&lt;/TITLE&gt; &lt;STYLE TYPE=“text/css”&gt; H1 {color: purple;} P {font-size: 10pt; color: gray;} &lt;/STYLE&gt; &lt;/HEAD&gt; … &lt;/HTML&gt; External style sheets : &lt;HEAD&gt; &lt;LINK REL=stylesheet” TYPE=“text/css” HREF=“styles/ mystyles.css ”&gt; &lt;/HEAD&gt; This is true “separation” of style and content. Keeping all your styles in an external document is simpler
  • 9. Why CSS? <ul><li>Advantages to Workflow </li></ul><ul><li>Cost Savings </li></ul><ul><li>You WILL Be Cooler </li></ul>
  • 10. Advantages of CSS <ul><li>Workflow </li></ul><ul><ul><li>Faster downloads </li></ul></ul><ul><ul><li>Streamlined site maintenance </li></ul></ul><ul><ul><li>Global control of design attributes </li></ul></ul><ul><ul><li>Precise control (Advanced)‏ </li></ul></ul><ul><ul><ul><li>Positioning </li></ul></ul></ul><ul><ul><ul><li>Fluid layouts </li></ul></ul></ul>
  • 11. Advantages of CSS - Cost Savings <ul><li>Cost Savings </li></ul><ul><ul><li>Reduced Bandwidth Costs </li></ul></ul><ul><ul><ul><li>One style sheet called and cached </li></ul></ul></ul><ul><ul><li>Higher Search Engine Rankings </li></ul></ul><ul><ul><ul><li>Cleaner code is easier for search engines to index </li></ul></ul></ul><ul><ul><ul><li>Greater density of indexable content </li></ul></ul></ul>
  • 12. Advantages of CSS - Cost Savings <ul><li>Faster download = better usability </li></ul><ul><ul><li>Web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson ) </li></ul></ul><ul><ul><li>CSS requires less code </li></ul></ul><ul><ul><li>Tables require spacer images </li></ul></ul><ul><ul><li>Entire table has to render before content </li></ul></ul><ul><ul><li>CSS can control the order that elements download (content before images)‏ </li></ul></ul>
  • 13. Advantages of CSS - Cost Savings <ul><li>Increased Reach </li></ul><ul><ul><li>CSS website is compatible w/ many different devices </li></ul></ul><ul><ul><li>In 2008 an est. 58 Million PDA’s will be sold (Source: eTForecast.com)‏ </li></ul></ul><ul><ul><li>1/3 of the world’s population will own a wireless device by 2010 </li></ul></ul>
  • 14. Implementations <ul><li>Apply to HTML pages </li></ul><ul><li>Apply to dynamic data </li></ul><ul><ul><li>Format or style XML </li></ul></ul><ul><li>Use for layout (this is cool)‏ </li></ul><ul><ul><li>See http://www.csszengarden.com </li></ul></ul>
  • 15. CSS isn’t perfect (yet)‏ <ul><li>CSS support in browsers is still uneven </li></ul><ul><li>Make sure your CSS properties are supported </li></ul>
  • 16. Resources <ul><li>http://www.csszengarden.com </li></ul><ul><ul><li>This is CSS at its finest </li></ul></ul><ul><li>http://www.w3.org/Style/CSS/ </li></ul><ul><ul><li>The Official CSS Site </li></ul></ul><ul><li>http://css.maxdesign.com.au/ </li></ul><ul><ul><li>Australian firm, very professional </li></ul></ul><ul><li>http://webmonkey.wired.com/webmonkey/reference/stylesheet_guide </li></ul><ul><ul><li>Where I learned CSS and Web Design </li></ul></ul>
  • 17. Come and see me at 3:30pm! <ul><li>“ Making Your Web Site More Appealing” </li></ul>

×