CSS: An Introduction

2,021 views

Published on

Talk for the COMP 20: Web Programming class at Tufts University on 9/23/09 by web developer Chris Traganos.

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

No Downloads
Views
Total views
2,021
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
72
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

CSS: An Introduction

  1. 1. CSS CASCADING STYLE SHEETS TUFTS COMP 20 CHRIS TRAGANOS
  2. 2. OVERVIEW • Intro to CSS • Why use it? • Terms • Examples • Questions & Answers TUFTS COMP 20 CHRIS TRAGANOS
  3. 3. CSS INTRODUCTION UNDERSTANDING CASCADING STYLE SHEETS TUFTS COMP 20 CHRIS TRAGANOS
  4. 4. Intro to CSS • Cascading Style Sheets (CSS) are documents that give creative control over HTML. • They contain a list of styles for specific portions of a web page. • Typically an external file (.css) that controls the presentation. TUFTS COMP 20 CHRIS TRAGANOS
  5. 5. CSS WHY USE IT? ADVANTAGES TO USING STYLE SHEETS. TUFTS COMP 20 CHRIS TRAGANOS
  6. 6. Why CSS? • Separate the STRUCTURE & CONTENT • Control multiple documents with one CSS • Efficiency in load times for websites • Makes document more accessible TUFTS COMP 20 CHRIS TRAGANOS
  7. 7. Why CSS? • Separate the STRUCTURE & CONTENT • Control multiple documents with one CSS • Efficiency in load times for websites • Makes document more accessible TUFTS COMP 20 CHRIS TRAGANOS
  8. 8. Why CSS? • Separate the 6% STRUCTURE & 13% CONTENT 21% 60% • Control multiple documents with one CSS • Efficiency in load times for websites Images JavaScript HTML CSS • Makes document more accessible TUFTS COMP 20 CHRIS TRAGANOS
  9. 9. Why CSS? • Separate the STRUCTURE & CONTENT • Control multiple documents with one CSS • Efficiency in load times for websites • Makes document more accessible TUFTS COMP 20 CHRIS TRAGANOS
  10. 10. CSS TERMS THE INNARDS OF CSS TUFTS COMP 20 CHRIS TRAGANOS
  11. 11. STYLE A rule that describes how to format a particular portion of a web page TUFTS COMP 20 CHRIS TRAGANOS
  12. 12. STYLE p{font‐size:14px;
color:#FF0000;} TUFTS COMP 20 CHRIS TRAGANOS
  13. 13. STYLE Selector Declaration p{font‐size:14px;
color:#FF0000;} Property: Value; TUFTS COMP 20 CHRIS TRAGANOS
  14. 14. the BOX MODEL Elements in a web page are rectangular with many ways of being controlled. TUFTS COMP 20 CHRIS TRAGANOS
  15. 15. the BOX MODEL • Height & Width • Background • Color • Padding • Border • Margin • Position TUFTS COMP 20 CHRIS TRAGANOS
  16. 16. the CASCADE A sorting method that assigns a weight to each style. TUFTS COMP 20 CHRIS TRAGANOS
  17. 17. the CASCADE p{ font‐family:Georgia,
"Times
 New
Roman",
serif;
 font‐size:14px; font‐weight:bold; font‐style:
italic; color:#009900;
 } p{font‐style:normal;
 color:#990000;} TUFTS COMP 20 CHRIS TRAGANOS
  18. 18. CSS EXAMPLES TEST DRIVE TUFTS COMP 20 CHRIS TRAGANOS
  19. 19. PARAGRAPHS The HTML RESULT: <p>Hello
World!</p> Hello World! The CSS p{ font‐family:Georgia,
"Times
New
Roman",
 serif;
 font‐size:14px; font‐weight:bold; font‐style:
italic; color:#009900;
 } TUFTS COMP 20 CHRIS TRAGANOS
  20. 20. LISTS The HTML RESULT: <ul> 

<li>Apples</li> • Apples 

<li>Oranges</li> • Oranges 

<li>Pears</li> • Pears 

<li>Plums</li> </ul> • Plums The CSS ul{border‐left:5px
#990000
solid;} li{ color:#333333; font‐size:12px; line‐height:1.4; } TUFTS COMP 20 CHRIS TRAGANOS
  21. 21. DIVs The HTML RESULT: <div
class=”produce”> 

<p>Today’s
selection:</p> 

<ul
id=”fruit”> Today’s selection: 



<li>Apples</li> 



<li>Oranges</li> • Apples • Oranges 



<li>Pears</li> 



<li>Plums</li> 

</ul> </div> • Pears • Plums The CSS div.produce{background:#CCCCCC;} #fruit{font‐weight:bold;
line‐height:1.8;} TUFTS COMP 20 CHRIS TRAGANOS
  22. 22. #global{} #header
#mast{} #navbar
ul.site{} div.outline{} div.main{} div.highlights{}
  23. 23. COLOR HEX & RGB HANDOUT CHEAT SHEET TUFTS COMP 20 CHRIS TRAGANOS
  24. 24. COLOR HEX h1{color:#FF0000;} RGB h1{color:rgb(255,0,0);} TUFTS COMP 20 CHRIS TRAGANOS
  25. 25. RESOURCES • Box Model Demo: http://bit.ly/13QxqE • CSS REMIX: http://cssremix.com/ • Opera Web Curriculum: http://bit.ly/tQlV3 • Intro to CSS 2.1 & CSS 3: http://bit.ly/tnrf4 • A List Apart: http://www.alistapart.com/ TUFTS COMP 20 CHRIS TRAGANOS
  26. 26. THE END QUESTIONS? twitter: @ctraganos chris@arlingtoninteractive.com

×