Post on 28-Jan-2015
description
CSS: Cascading Style SheetsTom Boone
Loyola Law School – Los Angelesthomas.boone@lls.edu
h=p://www.slideshare.net/tomboone
#sc_drag_crop { bottom: -‐25px; text-‐align: center; right: 10px; min-‐width: 30px; padding: 0 10px;}
Tuesday, July 26, 11
2
Without CSS, all content is already on the page.
Tuesday, July 26, 11
3
Without CSS, most content is unreadable.
Tuesday, July 26, 11
4
For example...
Tuesday, July 26, 11
CascadingStyleSheets
Tuesday, July 26, 11
CascadingStyleSheets
Tuesday, July 26, 11
BrowserStyleSheet
#1
SiteStyleSheet
#2
UserStyleSheet
#3
Tuesday, July 26, 11
BrowserStyleSheet
#1
SiteStyleSheet
#2
UserStyleSheet
#3
Default Styles
Tuesday, July 26, 11
BrowserStyleSheet
#1
SiteStyleSheet
#2
UserStyleSheet
#3
***Website Styles***
Tuesday, July 26, 11
BrowserStyleSheet
#1
SiteStyleSheet
#2
UserStyleSheet
#3
User Overrides
Tuesday, July 26, 11
CascadingStyleSheets
Tuesday, July 26, 11
CascadingStyleSheets
Tuesday, July 26, 11
Style
Tuesday, July 26, 11
Style100 pt
Tuesday, July 26, 11
StyleTuesday, July 26, 11
Style300 pt
Tuesday, July 26, 11
StyleTimes New Roman
Tuesday, July 26, 11
StyleTuesday, July 26, 11
StyleHelveAca
Tuesday, July 26, 11
StyleBlack
Tuesday, July 26, 11
StyleTuesday, July 26, 11
StyleBlue
Tuesday, July 26, 11
Style#0000FF
Tuesday, July 26, 11
StyleBold
Tuesday, July 26, 11
StyleItalic
Tuesday, July 26, 11
STYLEUppercase
Tuesday, July 26, 11
CascadingStyleSheets
Tuesday, July 26, 11
CascadingStyleSheets
Tuesday, July 26, 11
Three Kinds of Stylesheets
Linked
Embedded
Inline
Tuesday, July 26, 11
Three Kinds of Stylesheets
Linked
Embedded
Inline
Tuesday, July 26, 11
Inline Styles
<p style="font-‐weight: bold;"> Some text</p>
Tuesday, July 26, 11
Inline Styles
<p style="font-‐weight: bold;"> Some text</p>
Tuesday, July 26, 11
Inline Styles
<p style="font-‐weight: bold;"> Some text</p>
Tuesday, July 26, 11
Three Kinds of Stylesheets
Linked
Embedded
Inline
Tuesday, July 26, 11
Three Kinds of Stylesheets
Linked
Embedded
Inline
Tuesday, July 26, 11
<head> <title>A page title</title> <style type="text/css"> div#header { color: #ffffff; font-‐weight: bold; } </style></head>
Embedded Stylesheet
Tuesday, July 26, 11
<head> <title>A page title</title> <style type="text/css"> div#header { color: #ffffff; font-‐weight: bold; } </style></head>
Embedded Stylesheet
Tuesday, July 26, 11
<head> <title>A page title</title> <style type="text/css"> div#header { color: #ffffff; font-‐weight: bold; } </style></head>
Embedded Stylesheet
Tuesday, July 26, 11
<head> <title>A page title</title> <style type="text/css"> div#header { color: #ffffff; font-‐weight: bold; } </style></head>
Embedded Stylesheet
Tuesday, July 26, 11
Three Kinds of Stylesheets
Linked
Embedded
Inline
Tuesday, July 26, 11
Three Kinds of Stylesheets
Linked
Embedded
Inline
Tuesday, July 26, 11
<head> <title>A page title</title> <link rel="stylesheet" type="text/css" href="style.css"></head>
Linked Stylesheet
Tuesday, July 26, 11
<head> <title>A page title</title> <link rel="stylesheet" type="text/css" href="style.css"></head>
Linked Stylesheet
Tuesday, July 26, 11
<head> <title>A page title</title> <link rel="stylesheet" type="text/css" href="style.css"></head>
Linked Stylesheet
Tuesday, July 26, 11
div#header { background-‐color: #000000; color: #ffffff; border: 1px solid #ffffff; font-‐weight: bold;}
ul.menu { list-‐style-‐type: none;}
style.css
Tuesday, July 26, 11
div#header { background-‐color: #000000; color: #ffffff; border: 1px solid #ffffff; font-‐weight: bold;}
ul.menu { list-‐style-‐type: none;}
style.css
LinkedStylesheet
Tuesday, July 26, 11
<head> <title>A page title</title> <link rel="stylesheet" type="text/css" href="style.css"></head>
Linked Stylesheet
Tuesday, July 26, 11
Three Kinds of Stylesheets
Linked
Embedded
Inline
Tuesday, July 26, 11
Three Kinds of Stylesheets
Linked
Embedded
Inline
Tuesday, July 26, 11
CascadingStyleSheets
Tuesday, July 26, 11
CascadingStyleSheets
Tuesday, July 26, 11
52
Anatomy of a CSS Rule
p {color: red;}
Tuesday, July 26, 11
53
Anatomy of a CSS Rule
p {color: red;}
Selector
Tuesday, July 26, 11
54
p {color: red;}
DeclaraAon
Anatomy of a CSS Rule
Selector
Tuesday, July 26, 11
55
p {color: red;}
DeclaraAon
Anatomy of a CSS Rule
Property Value
Selector
Tuesday, July 26, 11
56
p {color: red;}
Anatomy of a CSS Rule
Selector
Tuesday, July 26, 11
57
<p>some text</p>
Anatomy of a CSS Rule
Selector
Tuesday, July 26, 11
58
p {color: red;}
Anatomy of a CSS Rule
Selector
Affects EVERY <p> tag on the page.
Tuesday, July 26, 11
59
<p>some text</p>
Anatomy of a CSS Rule
Selector
Tuesday, July 26, 11
60
li {color: red;}
Anatomy of a CSS Rule
Selector
Tuesday, July 26, 11
61
<li>some text</li>
Anatomy of a CSS Rule
Selector
Tuesday, July 26, 11
62
li {color: red;}
Anatomy of a CSS Rule
Selector
Affects EVERY <li> tag on the page.
Tuesday, July 26, 11
63
<li>some text</li>
Anatomy of a CSS Rule
Selector
Tuesday, July 26, 11
64
SelecAng more specific elements
Classes
IDs
Descendant Selectors
Tuesday, July 26, 11
65
SelecAng more specific elements
Classes
IDs
Descendant Selectors
Tuesday, July 26, 11
66
<p class="summary">some text</p>
Classes
Tuesday, July 26, 11
67
<p class="summary">some text</p>
Classes
Tuesday, July 26, 11
68
p.summary {color: red;}
Classes
Selector
Tuesday, July 26, 11
69
p.summary {color: red;}
Classes
Selector
Tuesday, July 26, 11
70
p.summary {color: red;}
Classes
Selector
Affects only <p> tags assigned a “summary” class.
Tuesday, July 26, 11
71
<p class="summary">some text</p>
Classes
Tuesday, July 26, 11
72
<p class="summary">some text</p><p>some text</p>
Classes
Tuesday, July 26, 11
73
<p class="summary">some text</p><p>some text</p>
<p class="body">some text</p>
Classes
Tuesday, July 26, 11
74
p.summary {color: red;}p.body {color: blue;}
Classes
Selector
Tuesday, July 26, 11
75
<p class="summary">some text</p><p>some text</p>
<p class="body">some text</p>
Classes
Tuesday, July 26, 11
76
SelecAng more specific elements
Classes
IDs
Descendant Selectors
Tuesday, July 26, 11
77
SelecAng more specific elements
Classes
IDs
Descendant Selectors
Tuesday, July 26, 11
78
<p id="summary">some text</p>
IDs
Tuesday, July 26, 11
79
<p id="summary">some text</p>
IDs
Tuesday, July 26, 11
80
<p id="summary">some text</p>
IDs
Each ID can only appear ONCE on a page.
Classes can repeat.
Tuesday, July 26, 11
81
p#summary {color: red;}
IDs
Selector
Tuesday, July 26, 11
82
p#summary {color: red;}
IDs
Selector
Tuesday, July 26, 11
83
p#summary {color: red;}
IDs
Selector
Affects only <p> tags assigned a “summary” id.
Tuesday, July 26, 11
84
<p id="summary">some text</p>
IDs
Tuesday, July 26, 11
85
<p id="summary">some text</p><p>some text</p>
IDs
Tuesday, July 26, 11
86
<p class="summary">some text</p><p>some text</p>
<p class="summary">some text</p>
IDs
Tuesday, July 26, 11
87
p#summary {color: red;}p.summary {color: blue;}
IDs
Selector
Tuesday, July 26, 11
88
<p id="summary">some text</p><p>some text</p>
<p class="summary">some text</p>
IDs
Tuesday, July 26, 11
89
SelecAng more specific elements
Classes
IDs
Descendant Selectors
Tuesday, July 26, 11
90
SelecAng more specific elements
Classes
IDs
Descendant Selectors
Tuesday, July 26, 11
91
<ul> <li>some text</li> <li>some more text</li></ul>
Descendant Selectors
Tuesday, July 26, 11
92
<ul> <li>some text</li> <li>some more text</li></ul>
Descendant Selectors
Tuesday, July 26, 11
93
ul li {color: red;}
Descendant Selectors
Selector
White space between selectors means the la=er must be a “descendant” of the former.
Tuesday, July 26, 11
94
<ul> <li>some text</li> <li>some more text</li></ul>
Descendant Selectors
Tuesday, July 26, 11
95
ul li {color: red;}
Descendant Selectors
Selector
<li> tags not descended from <ul> tags will NOT be affected.
Tuesday, July 26, 11
96
<ul> <li>some text</li> <li>some more text</li></ul><ol> <li>some numbered text</li> <li>more numbered text</li></ol>
Descendant Selectors
Tuesday, July 26, 11
97
ul li {color: red;}ol li {color: blue;}
Descendant Selectors
Selector
Tuesday, July 26, 11
98
<ul> <li>some text</li> <li>some more text</li></ul><ol> <li>some numbered text</li> <li>more numbered text</li></ol>
Descendant Selectors
Tuesday, July 26, 11
99
<ul> <li class="first">some text</li> <li>some more text</li></ul>
Descendant Selectors
Classes/IDs can be combined with descendant selectors
Tuesday, July 26, 11
100
ul li.first {color: red;}
Descendant Selectors
Selector
Classes/IDs can be combined with descendant selectors
Tuesday, July 26, 11
101
<ul> <li class="first">some text</li> <li>some more text</li></ul>
Descendant Selectors
Classes/IDs can be combined with descendant selectors
Tuesday, July 26, 11
102
SelecAng more specific elements
Classes
IDs
Descendant Selectors
Tuesday, July 26, 11
103
Types of ProperAes
Background
ColorsImagesPosihonSize
Tuesday, July 26, 11
104
Types of ProperAes
Background
Tuesday, July 26, 11
105
Types of ProperAes
Border
ColorWidth
Style (solid, dashed, do=ed)
Tuesday, July 26, 11
106
Types of ProperAes
Border
Tuesday, July 26, 11
107
Types of ProperAes
Font
FamilySize
Weight
Tuesday, July 26, 11
108
Types of ProperAes
Font
Tuesday, July 26, 11
109
Types of ProperAes
Posihoning
FloatClearDisplay
Tuesday, July 26, 11
110
Types of ProperAes
Posihoning
Tuesday, July 26, 11
111
Types of ProperAes
Text
ColorAlignmentLine HeightDecorahon
Tuesday, July 26, 11
112
Types of ProperAes
Text
Tuesday, July 26, 11
113
p { color: red; font-‐weight: bold;}
A DeclaraAon can contain Values for mulAple ProperAes.
Tuesday, July 26, 11
114
p, li, ul#menu { color: red; font-‐weight: bold;}
A CSS rule can contain mulAple *disAnct* selectors
Tuesday, July 26, 11
115
Latest Developments
Adaphve Web DesignA single web page with CSS that adapts
to any size screen.
CSS3Developing standard that includes animahon, rotahon, scaling, and
skewing
Tuesday, July 26, 11
116
CSS Resources
w3schools.com CSS Tutorialh=p://www.w3schools.com/css/
“CSS: The Missing Manual”by David Sawyer McFarland
“CSS: The Definihve Guide”by Eric A. Meyer
“Stylin’ with CSS: A Designer’s Guide”by Charles Wyke-‐Smith
Tuesday, July 26, 11
117
Sorware
Google Chrome/Safari“Inspect Element”
FirefoxFirebug -‐ Add-‐on
CSS Edit (Mac)
Tuesday, July 26, 11
118
Tom BooneLoyola Law School – Los Angeles
thomas.boone@lls.eduh=p://www.slideshare.net/tomboone
Tuesday, July 26, 11