CSS Classes Tutorial.pdf

Loading ...
Global Do...
News & Politics
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 
<strong class="Passing">Grade = Pass</strong>
<p class="important">For Score &lt; 60 then F</p>
<h2 class="MakeRedAndBold">Grade = Fail</h2>
<head>
<title>Quiz Results</title>
<style type="text/css">
/*<![CDATA[*/
p { font-family: Verdana, Arial; font-size: 12pt }
.important { text-decoration: underline; }
.Passing  {  color: #00FF00; font-style: italic }
.MakeRedAndBold { color: #FF0000; font-weight: 800 }
/*]]>*/
</style>
</head>
<body>
<p>Bob:
<strong class="Passing">Grade = Pass</strong></p>
<p class="important">For Score &lt; 60 then F</p>
Henry: <h2 class="MakeRedAndBold">Grade = Fail</h2>
</body>
Style Sheet Classes Example
Copyright © 2007 R.M. Laurie
3
CSS pseudo-class selector for <a>
Turns off underline for hyperlinks
a { text-decoration: none; }
[ none | underline | overline ]
 <a> 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
<body>
<h2>Academic Employment Experience:</h2>
<h3>University of Guam</h3>
<h4>Taught courses with the following content:</h4>
<ul>
<li>Web Site Design: XHTML, CSS, Web Graphics</li>
<li>Introduction to Programming: JavaScript, DOM</li>
<li>Database Management Systems: MS Access, ERD</li>
<li>Developmental Mathematics: Arithmetic to Algebra</li>
</ul>
</body>
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[ % | <length>|
[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
<head>  
<title>Selector Test</title>
<style type="text/css">
/*<![CDATA[*/
body {
background-image: url(wpBubbles.jpg);
background-color: #990000;
color: #009900;
} 
.important { text-decoration: underline; }
em.important { color: #FF0000; }
/*]]>*/ 
</style> 
</head>
<body>
<h2 class="important">This is a test of CSS 
selectors</h2>
<p>It is an <em class="important">important 
issue</em>
if styles will combine.</p> </body>
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)