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

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

23. #global{}
#header #mast{}
#navbar ul.site{}
div.outline{} div.main{} div.highlights{}

24. COLOR
HEX & RGB
HANDOUT CHEAT SHEET
TUFTS COMP 20 CHRIS TRAGANOS

25. COLOR
HEX
h1{color:#FF0000;}
RGB
h1{color:rgb(255,0,0);}
TUFTS COMP 20 CHRIS TRAGANOS

26. 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

27. THE END
QUESTIONS?
twitter: @ctraganos
chris@arlingtoninteractive.com