css: an introduction
DESCRIPTION
Talk for the COMP 20: Web Programming class at Tufts University on 9/23/09 by web developer Chris Traganos.TRANSCRIPT
CSSCASCADING STYLE SHEETS
TUFTS COMP 20 CHRIS TRAGANOS
OVERVIEW• Intro to CSS
• Why use it?
• Terms
• Examples
• Questions & Answers
TUFTS COMP 20 CHRIS TRAGANOS
INTRODUCTION
UNDERSTANDING CASCADING STYLE SHEETS
CSS
TUFTS COMP 20 CHRIS TRAGANOS
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
WHY USE IT?
ADVANTAGES TO USING STYLE SHEETS.
CSS
TUFTS COMP 20 CHRIS TRAGANOS
• Separate the STRUCTURE & CONTENT
• Control multiple documents with one CSS
• Efficiency in load times for websites
• Makes document more accessible
Why CSS?
TUFTS COMP 20 CHRIS TRAGANOS
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
Why CSS?
• Separate the STRUCTURE & CONTENT
• Control multiple documents with one CSS
• Efficiency in load times for websites
• Makes document more accessible
6%13%
21% 60%
Images HTMLJavaScript CSS
TUFTS COMP 20 CHRIS TRAGANOS
• Separate the STRUCTURE & CONTENT
• Control multiple documents with one CSS
• Efficiency in load times for websites
• Makes document more accessible
Why CSS?
TUFTS COMP 20 CHRIS TRAGANOS
TERMS
THE INNARDS OF CSS
CSS
TUFTS COMP 20 CHRIS TRAGANOS
STYLEA rule that describes how to format a
particular portion of a web page
TUFTS COMP 20 CHRIS TRAGANOS
p{font‐size:14px;color:#FF0000;}
STYLE
TUFTS COMP 20 CHRIS TRAGANOS
p{font‐size:14px;color:#FF0000;}
STYLESelector
Declaration
Property: Value;
TUFTS COMP 20 CHRIS TRAGANOS
the
BOX MODELElements in a web page are rectangular
with many ways of being controlled.
TUFTS COMP 20 CHRIS TRAGANOS
the BOX MODEL
• Height & Width
• Background
• Color
• Padding
• Border
• Margin
• Position
TUFTS COMP 20 CHRIS TRAGANOS
the
CASCADEA sorting method that assigns
a weight to each style.
TUFTS COMP 20 CHRIS TRAGANOS
the CASCADEp{font‐family:Georgia,"TimesNewRoman",serif;font‐size:14px;font‐weight:bold;font‐style:italic;color:#009900;}
p{font‐style:normal;color:#990000;}
TUFTS COMP 20 CHRIS TRAGANOS
EXAMPLES
TEST DRIVE
CSS
TUFTS COMP 20 CHRIS TRAGANOS
p{font‐family:Georgia,"TimesNewRoman",serif;font‐size:14px;font‐weight:bold;font‐style:italic;color:#009900;}
The CSS
The HTML<p>HelloWorld!</p>
RESULT:
Hello World!
PARAGRAPHS
TUFTS COMP 20 CHRIS TRAGANOS
ul{border‐left:5px#990000solid;}
li{color:#333333;font‐size:12px;line‐height:1.4;}
The CSS
The HTML<ul><li>Apples</li><li>Oranges</li><li>Pears</li><li>Plums</li></ul>
RESULT:• Apples
• Oranges
• Pears
• Plums
LISTS
TUFTS COMP 20 CHRIS TRAGANOS
div.produce{background:#CCCCCC;}#fruit{font‐weight:bold;line‐height:1.8;}
The CSS
The HTML<divclass=”produce”><p>Today’sselection:</p><ulid=”fruit”><li>Apples</li><li>Oranges</li><li>Pears</li><li>Plums</li></ul></div>
RESULT:
DIVs
Today’s selection:
• Apples
• Oranges
• Pears
• Plums
TUFTS COMP 20 CHRIS TRAGANOS
div.outline{} div.main{} div.highlights{}
#header#mast{}
#global{}
#navbarul.site{}
HEX & RGB
HANDOUT CHEAT SHEET
COLOR
TUFTS COMP 20 CHRIS TRAGANOS
h1{color:rgb(255,0,0);}
COLOR
TUFTS COMP 20 CHRIS TRAGANOS
h1{color:#FF0000;}
HEX
RGB
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
