Friday, June 29, 2018

Style Sheet (CSS)


CSS (Cascade Style Sheet) is use to decorate a web page. It is the look and feel of a website or web application. In this application we use very simple set of styles defined in style.css file. This is mostly CSS 2.0 standard and the latest one is CSS 3.0 standard.

/* CSS Document */
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}
div.main-wrapper{
width:980px;
padding:5px;
margin:0 auto;
background-color:#FFFFFF;
}
div.top-banner{
width:100%;
border-bottom:4px double #006699;
margin-bottom:20px;
}
div.top-banner p{
font-size:9px;
margin-top:-15px;
}
div.top-banner h2{
margin-top:-10px;
color:#006699;
}
div.top-banner-1{
float:left;
width:70%;
}
div.top-banner-2{
float:left;
width:29.8%;
text-align:right;
font-size:10px;
}
div.clear{
clear:both;
}
span.small-btn{
background-color:#FFCC00;
color:#FF3300;
border:1px solid #FF3300;
padding:2px 3px;
}
span.small-btn a:link{color:#FF3300; text-decoration:none}
span.small-btn a:visited{color:#FF3300; text-decoration:none}
span.small-btn a:hover{color:#FF3300; text-decoration:none}
span.small-btn a:active{color:#FF3300; text-decoration:none}
span.main-btn{
background-color:#0099CC;
color:#FFFFFF;
border:1px solid #000099;
padding:2px 3px;
font-size:12px;
}
span.main-btn a:link{color:#FFFFFF; text-decoration:none}
span.main-btn a:visited{color:#FFFFFF; text-decoration:none}
span.main-btn a:hover{color:#FFFFFF; text-decoration:none}
span.main-btn a:active{color:#FFFFFF; text-decoration:none}
div.links-set{
width:100%;
}
p.small-text{
font-size:9px;
text-align:center;
color:#666666;
}
form{
padding:5px;
background-color:#F9F7C6;
border:1px solid #F2E482;
}
input.btn{
width:auto;
}
a.wht:link{color:#FFFFFF; text-decoration:none}
a.wht:visited{color:#FFFFFF; text-decoration:none}
a.wht:hover{color:#FFFFFF; text-decoration:none}
a.wht:active{color:#FFFFFF; text-decoration:none}


h1{
text-align:center;
color:#006699;
text-decoration:underline;
}
h2{
text-align:left;
font-style:italic;
color:#009966;
}
h3{
text-align:left;
font-style:italic;
color:#009966;
border-bottom:1px dashed #009966;
}
p.red{
color:#FF0000;
}
p.green{
color:#009900;
}
span{
color:#FF0000;
font-size:10px;
}
table.ledger{
border-collapse:collapse;
}
tr.header{
font-weight:bold;
color:#FFFFFF;
background-color:#FF6600;
font-size:12px;
}
tr.wht{
background-color:#FFFFFF;
}
tr.lred{
background-color:#FFCBCA;
}
tr.lgreen{
background-color:#AFFCAB;
}
tr.lblack{
background-color:#DFDFDF;
}
div.error{
width:90%;
min-height:20px;
background-color:#FEC6BC;
border:1px solid #FF0000;
padding:5px;
margin:5px auto 5px auto;
color:#990000;
text-align:center;
}
div.noerror{
width:90%;
min-height:20px;
background-color:#B7F2BA;
border:1px solid #009933;
padding:5px;
margin:5px auto 5px auto;
color:#006600;
text-align:center;
}
div.header-1{
border-bottom:2px solid #666;
border-top:2px solid #666;
border-left:2px solid #666;
padding:2px 3px;
}
div.header-2{
border-bottom:2px solid #666;
border-left:1px solid #666;
border-top:2px solid #666;
padding:2px 5px;
}
div.header-3{
border-bottom:2px solid #666;
border-left:1px solid #666;
border-right:3px double #666;
border-top:2px solid #666;
padding:2px 5px;
}
div.header-4{
border-bottom:2px solid #666;
border-left:1px solid #666;
border-top:2px solid #666;
border-right:2px solid #666;
padding:2px 5px;
}

div.line-1{
border-left:2px solid #666;
padding:2px 3px;
}
div.line-2{
border-left:1px solid #666;
padding:2px 5px;
}
div.line-3{
border-left:1px solid #666;
border-right:3px double #666;
padding:2px 5px;
}
div.line-4{
border-left:1px solid #666;
border-right:2px solid #666;
padding:2px 5px;
}
div.line-total-1{
border-left:1px solid #666;
border-top:1px solid #666;
border-right:3px double #666;
border-bottom:3px double #666;
padding:2px 5px;
}
div.line-total-2{
border-left:1px solid #666;
border-top:1px solid #666;
border-right:2px solid #666;
border-bottom:3px double #666;
padding:2px 5px;
}
form.filter input{
border:1px solid #CCC;
font-size:10px;
}
a.small:link{
font-size:9px;
color:#0099FF;
text-decoration:none;
}
a.small:visited{
font-size:9px;
color:#0099FF;
text-decoration:none;
}
a.small:hover{
font-size:9px;
color:#0099FF;
text-decoration:none;
}
a.small:active{
font-size:9px;
color:#0099FF;
text-decoration:none;
}


Share:

0 comments:

Post a Comment