Cascading Style Sheet Examples (Advanced)

by Yukong Zhang

Computer Science Program

In this tutorial, additional styles will be illustrated.

There are three ways of specifying styles on web contents:

• External style sheet (a separate file)
• Internal style sheet (specify styles inside the head section of a html page)
• Inline style (inside html elements)

The examples can be found at www.w3schools.com

1. You can define the behavior of hyperlinks such as hover on a hyperlink. For example, if you move mouse over this hyperlink The Computer Science Program at Texas Wesleyan, the color and font size of the link change.

   a:hover
   {
       color:green;
       font-size:14px;
   }
   

2. Make a box with specification of margin, border, and padding
   

   If I don't know I don't know
       I think I know
   If I don't know I know
       I think I don't know
   Laing R D (1970) Knots Harmondsworth; Penguin (p.55)

   div
   {
   	background-color:Yellow;
   	margin-top:20px;
   	margin-left:50px;
   	border:solid black 1px;
   	border-top:dashed 3px red;
   	border-bottom:solid 3px green;
   	padding-top:5px;
   	padding-bottom:10px;
   	width:75%;
   }
   

3. Change the style of lists
   

   • Chapter 1
   • Chapter 2
   • Chapter 3

   ul
   {
   	list-style-type:square;
   }
   

   1. Chapter 1
   2. Chapter 2
   3. Chapter 3

   ol
   {
   	list-style-type:upper-roman;
   }
   

4. The Longest Journey Begins with the First Step
   --Chinese Proverb.

   If I don't know I don't know
       I think I know
   If I don't know I know
       I think I don't know
   Laing R D (1970) Knots Harmondsworth; Penguin (p.55)

5. Make decoration of text
   

   1201 Wesleyan St
   McFadden 103
   Fort Worth, Texas 76105
   

   
   address
   {
   	text-decoration:line-through;
   }
   

6. Change transparency of images
   

   

   <img src="http://www.txwes.edu/provost/images/provosthome.JPG"
   onmouseover="this.filters.alpha.opacity=100"
   onmouseout="this.filters.alpha.opacity=40" />
   

The complete list of styles used in this page is below:

body 
{
background-color:#b0c4de;
background-image:url('Seal-Color.gif');
background-repeat:no-repeat;
background-position:right bottom;
} 

h1, h2, h3, h4, h5, h6
{
text-align:center;
}

pre
{
        background-color:#ccccff;
}

table
{
border-collapse:collapse;
width:75%;
}

table, th, td
{
border: 1px solid green;
padding:6px;
background-color:blue;
color:white;
}

td
{
text-align:left;
vertical-align:center;
height:50px;
}

th
{
background-color:green;
color:white;
}

caption
{
color:Yellow;
font-size:16px;
font-weight:bold;
}

blockquote
{
	border:solid 1px red;
	width:500px;
}

#firstquote
{
        background-color:white;
}

#secondquote
{
        background-color:aqua;
}



ol
{
	list-style-type:upper-roman;
}
ul
{
	list-style-type:square;
        font-weight:bold;
        color:red;
}

address
{
	text-decoration:line-through;
}
	
div
{
	background-color:Yellow;
	margin-top:20px;
	margin-left:50px;
	border:solid black 1px;
	border-top:dashed 3px red;
	border-bottom:solid 3px green;
	padding-top:5px;
	padding-bottom:10px;
	width:75%;
}

a:hover
{
    color:Aqua;
    font-size:small;
    font-weight:bold;
    font-family:Palatino Linotype;
}

img
{
filter:alpha(opacity=20);
}