0
CSS: Separating Design and Content
Assumptions <ul><li>You know HTML </li></ul><ul><li>You do not know CSS </li></ul><ul><li>You care about aesthetics and fu...
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></...
What are Cascading Style Sheets? <ul><li>Created by Hakon Wium Lie of MIT in 1994 </li></ul><ul><li>Has become the W3C sta...
Let’s See Some Code <ul><li>Sample Style sheet </li></ul><ul><li>Rule Structure </li></ul>
Selectors <ul><li>Element Selectors  – (refer to HTML tags)‏ </li></ul><ul><ul><li>H1 {color: purple;} </li></ul></ul><ul>...
Selectors <ul><li>Class Selectors </li></ul><ul><ul><li><H1 CLASS=“warning”>Danger!</H1> </li></ul></ul><ul><ul><li><P CLA...
Applying CSS to HTML <ul><li>Style rules can be applied in 3 ways: </li></ul>Inline Styles : <H1 STYLE=“color: blue; font-...
Why CSS? <ul><li>Advantages to Workflow </li></ul><ul><li>Cost Savings </li></ul><ul><li>You WILL Be Cooler </li></ul>
Advantages of CSS <ul><li>Workflow </li></ul><ul><ul><li>Faster downloads </li></ul></ul><ul><ul><li>Streamlined site main...
Advantages of CSS - Cost Savings <ul><li>Cost Savings </li></ul><ul><ul><li>Reduced Bandwidth Costs </li></ul></ul><ul><ul...
Advantages of CSS - Cost Savings <ul><li>Faster download = better usability </li></ul><ul><ul><li>Web usability redesign c...
Advantages of CSS - Cost Savings <ul><li>Increased Reach </li></ul><ul><ul><li>CSS website is compatible w/ many different...
Implementations <ul><li>Apply to HTML pages </li></ul><ul><li>Apply to dynamic data </li></ul><ul><ul><li>Format or style ...
CSS isn’t perfect (yet)‏ <ul><li>CSS support in browsers is still uneven </li></ul><ul><li>Make sure your CSS properties a...
Resources <ul><li>http://www.csszengarden.com </li></ul><ul><ul><li>This is CSS at its finest </li></ul></ul><ul><li>http:...
Come and see me at 3:30pm! <ul><li>“ Making Your Web Site More Appealing” </li></ul>
Upcoming SlideShare
Loading in...5
×

Css

1,411

Published on

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

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

No notes for slide

Transcript of "Css"

  1. 1. CSS: Separating Design and Content
  2. 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. 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. 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. 5. Let’s See Some Code <ul><li>Sample Style sheet </li></ul><ul><li>Rule Structure </li></ul>
  6. 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. 7. Selectors <ul><li>Class Selectors </li></ul><ul><ul><li><H1 CLASS=“warning”>Danger!</H1> </li></ul></ul><ul><ul><li><P CLASS=“warning”>Be careful…</P> </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. 8. Applying CSS to HTML <ul><li>Style rules can be applied in 3 ways: </li></ul>Inline Styles : <H1 STYLE=“color: blue; font-size: 20pt;”>A large purple Heading</H1> For individual elements using the STYLE attribute Embedded style sheets : <HTML><HEAD><TITLE>Stylin’!</TITLE> <STYLE TYPE=“text/css”> H1 {color: purple;} P {font-size: 10pt; color: gray;} </STYLE> </HEAD> … </HTML> External style sheets : <HEAD> <LINK REL=stylesheet” TYPE=“text/css” HREF=“styles/ mystyles.css ”> </HEAD> This is true “separation” of style and content. Keeping all your styles in an external document is simpler
  9. 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. 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. 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. 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. 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. 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. 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. 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. 17. Come and see me at 3:30pm! <ul><li>“ Making Your Web Site More Appealing” </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×