CSS: An Introduction
-
Upload
chris-traganos -
Category
Design
-
view
1.839 -
download
0
description
Transcript of CSS: An Introduction
![Page 1: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/1.jpg)
CSSCASCADING STYLE SHEETS
TUFTS COMP 20 CHRIS TRAGANOS
![Page 2: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/2.jpg)
OVERVIEW• Intro to CSS
• Why use it?
• Terms
• Examples
• Questions & Answers
TUFTS COMP 20 CHRIS TRAGANOS
![Page 3: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/3.jpg)
INTRODUCTION
UNDERSTANDING CASCADING STYLE SHEETS
CSS
TUFTS COMP 20 CHRIS TRAGANOS
![Page 4: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/4.jpg)
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
![Page 5: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/5.jpg)
WHY USE IT?
ADVANTAGES TO USING STYLE SHEETS.
CSS
TUFTS COMP 20 CHRIS TRAGANOS
![Page 6: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/6.jpg)
• 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
![Page 7: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/7.jpg)
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
![Page 8: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/8.jpg)
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
![Page 9: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/9.jpg)
• 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
![Page 10: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/10.jpg)
TERMS
THE INNARDS OF CSS
CSS
TUFTS COMP 20 CHRIS TRAGANOS
![Page 11: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/11.jpg)
STYLEA rule that describes how to format a
particular portion of a web page
TUFTS COMP 20 CHRIS TRAGANOS
![Page 12: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/12.jpg)
p{font‐size:14px;color:#FF0000;}
STYLE
TUFTS COMP 20 CHRIS TRAGANOS
![Page 13: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/13.jpg)
p{font‐size:14px;color:#FF0000;}
STYLESelector
Declaration
Property: Value;
TUFTS COMP 20 CHRIS TRAGANOS
![Page 14: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/14.jpg)
the
BOX MODELElements in a web page are rectangular
with many ways of being controlled.
TUFTS COMP 20 CHRIS TRAGANOS
![Page 15: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/15.jpg)
the BOX MODEL
• Height & Width
• Background
• Color
• Padding
• Border
• Margin
• Position
TUFTS COMP 20 CHRIS TRAGANOS
![Page 16: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/16.jpg)
the
CASCADEA sorting method that assigns
a weight to each style.
TUFTS COMP 20 CHRIS TRAGANOS
![Page 17: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/17.jpg)
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
![Page 18: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/18.jpg)
EXAMPLES
TEST DRIVE
CSS
TUFTS COMP 20 CHRIS TRAGANOS
![Page 19: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/19.jpg)
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
![Page 20: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/20.jpg)
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
![Page 21: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/21.jpg)
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
![Page 22: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/22.jpg)
![Page 23: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/23.jpg)
div.outline{} div.main{} div.highlights{}
#header#mast{}
#global{}
#navbarul.site{}
![Page 24: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/24.jpg)
HEX & RGB
HANDOUT CHEAT SHEET
COLOR
TUFTS COMP 20 CHRIS TRAGANOS
![Page 25: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/25.jpg)
h1{color:rgb(255,0,0);}
COLOR
TUFTS COMP 20 CHRIS TRAGANOS
h1{color:#FF0000;}
HEX
RGB
![Page 26: CSS: An Introduction](https://reader034.fdocuments.net/reader034/viewer/2022051513/547de0afb4795998508b4a06/html5/thumbnails/26.jpg)
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