About Global Documents
Global Documents provides you with documents from around the globe on a variety of topics for your enjoyment.
Global Documents utilizes edocr for all its document needs due to edocr's wonderful content features. Thousands of professionals and businesses around the globe publish marketing, sales, operations, customer service and financial documents making it easier for prospects and customers to find content.
Tag Cloud
Copyright © 2007 R.M. Laurie
1
CS222: Slide Set 9: CSS Classes
Copyright © 2007 R.M. Laurie
1
CSS Classes
Class = custom style specification that can be
associated with any qualifying xhtml element
Style Sheet Rule Class Identifier is preceded
with dot
.important { text-decoration: underline; }
.Passing { color: #00FF00; font-style: italic }
.MakeRedAndBold { color: #FF0000;
font-weight: 800; }
A Style Sheet Class can be selected for an
element using the element's class attribute
Grade = Pass
Quiz Results
Henry:
Style Sheet Classes Example
Copyright © 2007 R.M. Laurie
3
CSS pseudo-class selector for
Turns off underline for hyperlinks
a { text-decoration: none; }
[ none | underline | overline ]
pseudo-classes are available
a:link { text-decoration: none; color: #CC0000; }
a:visited { text-decoration: none; color: #3300CC; }
a:focus { text-decoration: underline; }
a:hover { text-decoration: underline; color: #FF3300;
background-color: #CCFFCC; }
a:active { text-decoration: none; color: #FF9966; }
A hyperlink can have only one state at a time so best to
use above order
Copyright © 2007 R.M. Laurie
4
Resume Example without CSS
Copyright © 2007 R.M. Laurie
2
CS222: Slide Set 9: CSS Classes
Copyright © 2007 R.M. Laurie
5
Margin and List-Style Properties
See Appendix B for details
Margin is transparent space between elements
margin-top: 0;
/* removes top margin */
margin-right: 10px;
margin-bottom: 6pt; /* only ½ line if 12pt font */
margin-left: 20px;
/* similar to blockquote */
Combined form font properties
margin: 0 12pt 15px 0;
List-Style Properties
list-style-image: url(filename); /* For bullet lists */
list-style-position: inside;
/* default outside */
list-style-type: upper-alpha; /* for ordered lists */
top
right bottom
left
/* External CSS Fill 03_Experience.css */
body { background-color:#FFFFCC; color:#000033; }
h2 {margin-top:8pt; margin-bottom:4pt;
font-weight:900; letter-spacing:2pt; font-size: 16pt;
font-family:"Verdana";
color:#003399; }
h3 {margin-top:4pt; margin-bottom:2pt; margin-left:10pt;
font-weight:700; letter-spacing:1pt; font-size:14pt;
font-family:"Verdana"; color:#996600; }
h4 {margin-top:2pt; margin-bottom:2pt; font-weight:400;
margin-left:20pt; font-size:12pt;
font-family:"Georgia"; }
ul {font-size:12pt; font-family:"Georgia"; margin-top:4pt; margin-
bottom:2pt;}
li { list-style-image:url(bltDiamond.gif); list-style-position:outside;
margin-left:40pt;}
/* External CSS Fill 03_Experience.css */
body { background-color:#FFFFCC; color:#000033; }
h2 {margin-top:8pt; margin-bottom:4pt;
font-weight:900; letter-spacing:2pt; font-size: 16pt;
font-family:"Verdana";
color:#003399; }
h3 {margin-top:4pt; margin-bottom:2pt; margin-left:10pt;
font-weight:700; letter-spacing:1pt; font-size:14pt;
font-family:"Verdana"; color:#996600; }
h4 {margin-top:2pt; margin-bottom:2pt; font-weight:400;
margin-left:20pt; font-size:12pt;
font-family:"Georgia"; }
ul {font-size:12pt; font-family:"Georgia"; margin-top:4pt; margin-
bottom:2pt;}
li { list-style-image:url(bltDiamond.gif); list-style-position:outside;
margin-left:40pt;}
Copyright © 2007 R.M. Laurie
7
Style Sheet Selectors
Context Selector (Occurrences of em in h1)
h1 em { color:#FF0000; font-weight: 800; }
Class Selector
.important { text-decoration: underline; }
em.important { text-decoration: #CC0000; }
Occurances of em with class important
Nested List Item Context Selectors
ol ol li { list-style-type: decimal }
ol ol ol li { list-style-type: lower-alpha }
ol ol ol ol li { list-style-type: lower-roman }
Element
Property
Value
Context
Property
Value
Class
Context
Copyright © 2007 R.M. Laurie
8
CSS Body background Specifications
background-color
body { background-color: #FF99CC; }
background-image (tiled x and y directions)
body { background-image: url(wpBubbles.jpg); }
background-repeat [repeat-x | repeat-y | no-repeat]
body { background-repeat: repeat- y; }
background-attachment [fixed, scroll]
body { background-attachment: fixed; }
background-position[ % ||
[top | center | bottom] | [left | center | right] ]
body { background-position: 10px 20px; }
Combined background property
body { background: #FF99CC url(wpBubbles.jpg)
repeat-y bottom left fixed; }
Copyright © 2007 R.M. Laurie
3
CS222: Slide Set 9: CSS Classes
Copyright © 2007 R.M. Laurie
9
CSS Body background Example
Selector Test
This is a test of CSS
Copyright © 2007 R.M. Laurie
10
Specificity Precedence - Cascade Rules
Determines element appearance if more then
one style property is specified for element
The strongest selector is the most specific
If the same property in inherited elements
1.
Inner Nested Inline (Strongest)
2. Block Level
3. Document Elements (Weakest)
If the same selector and property
1. Element style attributes Inline Styles (Strongest)
2. Element id attributes applied from CSS rules
3. Element class attributes applied from CSS rules
4. Element has no attributes applied from CSS rules
User Agent
1. Author (Strongest)
2. User = Browser defined
3. Browser default (Lowest)
Copyright © 2007 R.M. Laurie
11
Location Precedence - Cascade Rules
If highest two style rules have the
same level of specificity,
then the last style specified determines
the appearance of the html document
Keep in mind the head of the html
document is processed first by the
browser followed by the body
1. Inline Styles (Strongest)
2. The last style specified has priority for the
External and Embedded Specifications
Embedded CSS (Last has priority)
External CSS (Last has priority)
1
CS222: Slide Set 9: CSS Classes
Copyright © 2007 R.M. Laurie
1
CSS Classes
Class = custom style specification that can be
associated with any qualifying xhtml element
Style Sheet Rule Class Identifier is preceded
with dot
.important { text-decoration: underline; }
.Passing { color: #00FF00; font-style: italic }
.MakeRedAndBold { color: #FF0000;
font-weight: 800; }
A Style Sheet Class can be selected for an
element using the element's class attribute
Grade = Pass
For Score < 60 then F
Grade = Fail
Bob:
Grade = Pass
For Score < 60 then F
Henry:
Grade = Fail
Style Sheet Classes Example
Copyright © 2007 R.M. Laurie
3
CSS pseudo-class selector for
Turns off underline for hyperlinks
a { text-decoration: none; }
[ none | underline | overline ]
pseudo-classes are available
a:link { text-decoration: none; color: #CC0000; }
a:visited { text-decoration: none; color: #3300CC; }
a:focus { text-decoration: underline; }
a:hover { text-decoration: underline; color: #FF3300;
background-color: #CCFFCC; }
a:active { text-decoration: none; color: #FF9966; }
A hyperlink can have only one state at a time so best to
use above order
Copyright © 2007 R.M. Laurie
4
Academic Employment Experience:
University of Guam
Taught courses with the following content:
- Web Site Design: XHTML, CSS, Web Graphics
- Introduction to Programming: JavaScript, DOM
- Database Management Systems: MS Access, ERD
- Developmental Mathematics: Arithmetic to Algebra
Resume Example without CSS
Copyright © 2007 R.M. Laurie
2
CS222: Slide Set 9: CSS Classes
Copyright © 2007 R.M. Laurie
5
Margin and List-Style Properties
See Appendix B for details
Margin is transparent space between elements
margin-top: 0;
/* removes top margin */
margin-right: 10px;
margin-bottom: 6pt; /* only ½ line if 12pt font */
margin-left: 20px;
/* similar to blockquote */
Combined form font properties
margin: 0 12pt 15px 0;
List-Style Properties
list-style-image: url(filename); /* For bullet lists */
list-style-position: inside;
/* default outside */
list-style-type: upper-alpha; /* for ordered lists */
top
right bottom
left
/* External CSS Fill 03_Experience.css */
body { background-color:#FFFFCC; color:#000033; }
h2 {margin-top:8pt; margin-bottom:4pt;
font-weight:900; letter-spacing:2pt; font-size: 16pt;
font-family:"Verdana";
color:#003399; }
h3 {margin-top:4pt; margin-bottom:2pt; margin-left:10pt;
font-weight:700; letter-spacing:1pt; font-size:14pt;
font-family:"Verdana"; color:#996600; }
h4 {margin-top:2pt; margin-bottom:2pt; font-weight:400;
margin-left:20pt; font-size:12pt;
font-family:"Georgia"; }
ul {font-size:12pt; font-family:"Georgia"; margin-top:4pt; margin-
bottom:2pt;}
li { list-style-image:url(bltDiamond.gif); list-style-position:outside;
margin-left:40pt;}
/* External CSS Fill 03_Experience.css */
body { background-color:#FFFFCC; color:#000033; }
h2 {margin-top:8pt; margin-bottom:4pt;
font-weight:900; letter-spacing:2pt; font-size: 16pt;
font-family:"Verdana";
color:#003399; }
h3 {margin-top:4pt; margin-bottom:2pt; margin-left:10pt;
font-weight:700; letter-spacing:1pt; font-size:14pt;
font-family:"Verdana"; color:#996600; }
h4 {margin-top:2pt; margin-bottom:2pt; font-weight:400;
margin-left:20pt; font-size:12pt;
font-family:"Georgia"; }
ul {font-size:12pt; font-family:"Georgia"; margin-top:4pt; margin-
bottom:2pt;}
li { list-style-image:url(bltDiamond.gif); list-style-position:outside;
margin-left:40pt;}
Copyright © 2007 R.M. Laurie
7
Style Sheet Selectors
Context Selector (Occurrences of em in h1)
h1 em { color:#FF0000; font-weight: 800; }
Class Selector
.important { text-decoration: underline; }
em.important { text-decoration: #CC0000; }
Occurances of em with class important
Nested List Item Context Selectors
ol ol li { list-style-type: decimal }
ol ol ol li { list-style-type: lower-alpha }
ol ol ol ol li { list-style-type: lower-roman }
Element
Property
Value
Context
Property
Value
Class
Context
Copyright © 2007 R.M. Laurie
8
CSS Body background Specifications
background-color
body { background-color: #FF99CC; }
background-image (tiled x and y directions)
body { background-image: url(wpBubbles.jpg); }
background-repeat [repeat-x | repeat-y | no-repeat]
body { background-repeat: repeat- y; }
background-attachment [fixed, scroll]
body { background-attachment: fixed; }
background-position[ % |
[top | center | bottom] | [left | center | right] ]
body { background-position: 10px 20px; }
Combined background property
body { background: #FF99CC url(wpBubbles.jpg)
repeat-y bottom left fixed; }
Copyright © 2007 R.M. Laurie
3
CS222: Slide Set 9: CSS Classes
Copyright © 2007 R.M. Laurie
9
CSS Body background Example
This is a test of CSS
selectors
It is an important
issue
if styles will combine.
Copyright © 2007 R.M. Laurie
10
Specificity Precedence - Cascade Rules
Determines element appearance if more then
one style property is specified for element
The strongest selector is the most specific
If the same property in inherited elements
1.
Inner Nested Inline (Strongest)
2. Block Level
3. Document Elements (Weakest)
If the same selector and property
1. Element style attributes Inline Styles (Strongest)
2. Element id attributes applied from CSS rules
3. Element class attributes applied from CSS rules
4. Element has no attributes applied from CSS rules
User Agent
1. Author (Strongest)
2. User = Browser defined
3. Browser default (Lowest)
Copyright © 2007 R.M. Laurie
11
Location Precedence - Cascade Rules
If highest two style rules have the
same level of specificity,
then the last style specified determines
the appearance of the html document
Keep in mind the head of the html
document is processed first by the
browser followed by the body
1. Inline Styles (Strongest)
2. The last style specified has priority for the
External and Embedded Specifications
Embedded CSS (Last has priority)
External CSS (Last has priority)