Your SlideShare is downloading. ×
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
CSS: An Introduction
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: An Introduction

1,290

Published on

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

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
1,290
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
52
Comments
0
Likes
7
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 CASCADING STYLE SHEETS TUFTS COMP 20 CHRIS TRAGANOS
  • 2. OVERVIEW • Intro to CSS • Why use it? • Terms • Examples • Questions & Answers TUFTS COMP 20 CHRIS TRAGANOS
  • 3. CSS INTRODUCTION UNDERSTANDING CASCADING STYLE SHEETS TUFTS COMP 20 CHRIS TRAGANOS
  • 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. CSS WHY USE IT? ADVANTAGES TO USING STYLE SHEETS. TUFTS COMP 20 CHRIS TRAGANOS
  • 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. 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. 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. 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. CSS TERMS THE INNARDS OF CSS TUFTS COMP 20 CHRIS TRAGANOS
  • 11. STYLE A rule that describes how to format a particular portion of a web page TUFTS COMP 20 CHRIS TRAGANOS
  • 12. STYLE p{font‐size:14px;
color:#FF0000;} TUFTS COMP 20 CHRIS TRAGANOS
  • 13. STYLE Selector Declaration p{font‐size:14px;
color:#FF0000;} Property: Value; TUFTS COMP 20 CHRIS TRAGANOS
  • 14. the BOX MODEL Elements in a web page are rectangular with many ways of being controlled. TUFTS COMP 20 CHRIS TRAGANOS
  • 15. the BOX MODEL • Height & Width • Background • Color • Padding • Border • Margin • Position TUFTS COMP 20 CHRIS TRAGANOS
  • 16. the CASCADE A sorting method that assigns a weight to each style. TUFTS COMP 20 CHRIS TRAGANOS
  • 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. CSS EXAMPLES TEST DRIVE TUFTS COMP 20 CHRIS TRAGANOS
  • 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. 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. 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. #global{} #header
#mast{} #navbar
ul.site{} div.outline{} div.main{} div.highlights{}
  • 23. COLOR HEX & RGB HANDOUT CHEAT SHEET TUFTS COMP 20 CHRIS TRAGANOS
  • 24. COLOR HEX h1{color:#FF0000;} RGB h1{color:rgb(255,0,0);} TUFTS COMP 20 CHRIS TRAGANOS
  • 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. THE END QUESTIONS? twitter: @ctraganos chris@arlingtoninteractive.com

×