Common CSS Examples of Web page learning

/**//* button Style * *
. Buttoncss {} {
font-family: "Tahoma", "Song Body";
font-size:9pt; Color: #003399;
border:1px #003399 Solid;
color:006699;
Border-bottom: #93bee2 1px solid;
Border-left: #93bee2 1px solid;
Border-right: #93bee2 1px solid;
Border-top: #93bee2 1px solid;
Background-image:url (.. /images/bluebuttonbg.gif);
Background-color: #e8f4ff;
Cursor:hand;
Font-style:normal;
width:60px;
height:22px;
}

/**//* blue button Style * *
. Bluebuttoncss {} {
font-family: "Tahoma", "Song Body";
font-size:9pt; Color: #003366;
border:0px #93bee2 Solid;
/**//* border-bottom: #93bee2 1px solid;
Border-left: #93bee2 1px solid;
Border-right: #93bee2 1px solid;
Border-top: #93bee2 1px solid;*/
Background-image:url (.. /images/blue_button_bg.gif);
Background-color: #ffffff;
Cursor:hand;
Font-style:normal;
}

/**//* red Button Style * *
. Redbuttoncss {} {
font-family: "Tahoma", "Song Body";
font-size:9pt; Color: #0066cc;
border:1px #93bee2 Solid;
Border-bottom: #93bee2 1px solid;
Border-left: #93bee2 1px solid;
Border-right: #93bee2 1px solid;
Border-top: #93bee2 1px solid;
Background-image:url (.. /images/redbuttonbg.gif);
Background-color: #ffffff;
Cursor:hand;
Font-style:normal;
}
/**//* Select button Style * *
. selectbuttoncss
{}{
font-family: "Tahoma", "Song Body";
font-size:9pt; Color: #0066cc;
border:1px #93bee2 Solid;
Border-bottom: #93bee2 1px solid;
Border-left: #93bee2 1px solid;
Border-right: #93bee2 1px solid;
Border-top: #93bee2 1px solid;
Background-image:url (.. /images/blue_button_bg.gif);
Background-color: #ffffff;
Cursor:hand;
Font-style:normal;
}

/**//* Green Button Style * *
. Greenbuttoncss {} {
font-family: "Tahoma", "Song Body";
font-size:9pt; Color: #0066cc;
border:1px #93bee2 Solid;
Border-bottom: #93bee2 1px solid;
Border-left: #93bee2 1px solid;
Border-right: #93bee2 1px solid;
Border-top: #93bee2 1px solid;
Background-image:url (.. /images/greenbuttonbg.gif);
Background-color: #ffffff;
Cursor:hand;
Font-style:normal;
}
/**//* Image Button * *
. ImageButton
{}{
Cursor:hand; /**//* Change Mouse Shape * *
}
/**//* page Body Style * *
Body
{}{
Scrollbar-face-color: #EDEDF3;
Scrollbar-highlight-color: #ffffff;
Scrollbar-shadow-color: #93949F;
Scrollbar-3dlight-color: #EDEDF3;
Scrollbar-arrow-color: #082468;
Scrollbar-track-color: #F7F7F9;
Scrollbar-darkshadow-color: #EDEDF3;

font-size:9pt;
Color: #003366;
Overflow:auto;
}
TD {} {font-size:12px}
TH
{}{
font-size:12px;
}
/**//*************************************
Dropdown selection box display style
*************************************/
SELECT
{}{
Border-right: #000000 1px solid;
Border-top: #FFFFFF 1px solid;
font-size:12px;
Border-left: #FFFFFF 1px solid;
COLOR: #003366;
Border-bottom: #000000 1px solid;
Background-color: #f4f4f4;
}

/**//*****************************************************
Hyperlink display Style
*****************************************************/
A:link, A:visited{}{color: #223355; Text-decoration:none}
A:hover{}{color:red;text-decoration:none;}

A.highlight:link, a.highlight:visited {} {color:red; Text-decoration:none}
A.highlight:hover {} {color:red; Text-decoration:underline}

A.thisclass:link, a.thisclass:visited {} {color: #D9EBFD; font-weight:bold; Text-decoration:none}
A.thisclass:hover {} {color: #FFFFFF; font-weight:bold;}

A.navlink:link, a.navlink:visited {}{color: #D9EBFD; Text-decoration:none}
A.navlink:hover {}{color: #FFFFFF; Text-decoration:none}

/**//*****************************************************
Line text edit box display style
*****************************************************/
. EditBox
{}{
Background: #ffffff;
border:1px solid #B7B7B7;
Color: #003366;
Cursor:text;
font-family: "Arial";
font-size:9pt;
height:18px;
padding:1px;
}
/**//****************************************************
Multi-line text box style
*****************************************************/
. Multieditbox
{}{
Background: #f8f8f8;
Border-bottom: #B7B7B7 1px solid;
Border-left: #B7B7B7 1px solid;
Border-right: #B7B7B7 1px solid;
Border-top: #B7B7B7 1px solid;
Color: #000000;
Cursor:text;
font-family: "Arial";
font-size:9pt;
padding:1px;
}

/**//*****************************************************
Shaded-style forms
*****************************************************/
. Shadow
{}{
Position:absolute;
z-index:1000;
top:0px;
left:0px;
Background:gray;
Background-color: #FFCC00;
Filter:progid:DXImageTransform.Microsoft.DropShadow (color= #FF404040, offx=2,offy=2,positives=true);
}
/**//*****************************************************
A style that shows only the text of a horizontal line.
*****************************************************/
. logintxt
{}{
Border-right: #ffffff 0px solid;
Border-top: #ffffff 0px solid;
font-size:9pt;
Border-left: #ffffff 0px solid;
Border-bottom: #c0c0c0 1px solid;
Background-color: #ffffff
}
/**//*****************************************************
DataGrid header Style
*****************************************************/
. dgtitle
{}{
height:25px;
Color: #ffffff;
Font-size:large;
Text-align:center;
Vertical-align:middle;
Background-image:url (.. /images/tabletitle2.gif); height:25px

}

/**//*****************************************************
DataGrid Data Display Style
*****************************************************/
. Dgitem
{}{
height:15px;
Text-align:center;
Vertical-align:middle;
}
/**//*****************************************************
text box display style
*****************************************************/
. Clarity
{}{
Border-right: #ffffff 0px solid;
Border-top: #ffffff 0px solid;
font-size:9pt;
Border-left: #ffffff 0px solid;
Border-bottom: #ffffff 0px solid;
}
TABLE. List {} {border-top:1px solid #000000; border-bottom:1px solid #000000;}
TABLE. List th,table. List TD {} {padding:4px;background-color: #eeeeee; border-bottom:2px solid #ffffff; border-right:1px solid #ffffff; border-left:1px solid #ffffff; color: #000000}
TABLE. List TH {} {background-color: #0064a8; border-top:2px solid #ffffff; color: #ffffff; font-weight:normal;}
TABLE. List TH a:link {}{color: #ffffff; Text-decoration:none}
TABLE. List TH a:visited {}{color: #ffffff; Text-decoration:none}
TABLE. List TH a:hover {}{color: #ffffff; Text-decoration:underline}

TABLE. Form th,table. Form TD {} {padding:4px;background-color: #f6f6f6; border-bottom:1px solid #F6F6F6; border-right:1px solid #ffffff; border-left:1px solid #ffffff; color: #000000}
TABLE. Form TH {} {background-color: #E8E8E8; border-top:1px solid #ffffff; color: #006699; font-size:12px;font-weight:normal; border-bottom:1px;}
TABLE. Form TH a:link {}{color: #ffffff; Text-decoration:none}
TABLE. Form TH a:visited {}{color: #ffffff; Text-decoration:none}
TABLE. Form TH a:hover {}{color: #ffffff; Text-decoration:underline}

TABLE. Sample TD {{padding:2px;background-color: #f6f6f6; border-bottom:1px solid #000000; border-top:1px solid #000000; border-right:1px solid #000000; border-left:1px solid #000000; color: #000000}
TABLE. Sample TH {{background-color: #AEC1D7; border-bottom:1px solid #000000; border-top:1px solid #000000; border-right:1px Solid #000000; border-left:1px solid #000000; color: #000000; font-weight:normal;}

TABLE. Sampled TD {} {padding:2px;border-bottom:1px solid #000000; border-top:1px solid #000000; border-right:1px solid #000000; border-left:1px solid #000000; color: #000000}
TABLE. Sampled TH {} {border-bottom:1px solid #000000; border-top:1px solid #000000; border-right:1px solid #000000; border-left : 1px solid #000000; color: #000000; font-weight:normal;}

TABLE. Form1st,table. Form1 TD {} {padding:4px;background-color: #BED8F3; border-bottom:1px solid #ffffff; border-right:1px solid #ffffff; border-left:1px solid #ffffff; color: #000000}
/**//*****************************************************
An input box without a border
*****************************************************/
. Noneinput
{}{
Text-align:center;
width:99%;height:99%;
Border-top-style:none;
Border-right-style:none;
Border-left-style:none;
Background-color: #f6f6f6;
Border-bottom-style:none;
}

/**//*****************************************************
Flat style style of form
*****************************************************/

/**//*****************************************************/
TABLE
{}{
Border-collapse:collapse;
}

/**//*
progress bar Style
*/
. Bi-loading-status {} {
/**//*position:absolute;*/
width:150px;
padding:1px;
Overflow:hidden;
Background-color:gray;
}

. bi-loading-status. Text {}
White-space:nowrap;
Overflow:hidden;
width:100%;
Text-overflow:ellipsis;
padding:1px;
}

. Bi-loading-status. Progress-bar {} {
border:1px solid Threedshadow;
Background:window;
height:10px;
width:100%;
padding:1px;
Overflow:hidden;
}

. bi-loading-status. Progress-bar Div {} {
Background:highlight;
Overflow:hidden;
height:100%;
Filter:alpha (opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=100, finishy=0);
}
/**//*****************************************************
Table Header Background
*****************************************************/
. Tabletop {} {
Background-image:url (.. /images/tabletitle2.gif); height:25px;
}
/**//*****************************************************
Big title
*****************************************************/
. tabletitle{}{
font-family: "Arial"; font-size:12pt; COLOR: #0066cc; Font-weight:bolder;filter:progid:dximagetransform.microsoft.dropshadow (color= #CCFFFF, OffX=1,offY =1,positives=true);
}
/**//*****************************************************
Small title
*****************************************************/
. smalltitle{}{
Background-color: #E8E8E8; Font-size:12px;font-weight:normal;color: #006699;
}
. calendarborder{}{
border:1px #B7B7B7 Solid;
}