What is a Style Sheet (CSS)
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. It is used to pre define the style or the format of the web pages written in HTML, XHTML, JSP, ASP etc.
How to use:
-- Define the font, size, color etc in a css file.
-- Include the css file in the web page
-- Bind the css to the controls of the web page by using the class declarative.
Usage:
-- used to have a standard style in all the web page designs.
Code:
save the code below as "stylesheet.css"
_____________________________________________________________________________
<style>
a, A:link, a:visited, a:active
{color: #0000aa; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
A:hover
{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
p, tr, td, ul, li
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
th
{background: #DBEAF5; color: #000000;}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding-left: 2px; height: 21px}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
.intd
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px;}
.wcell
{background: #FFFFFF; vertical-align: top}
.ctrl
{font-family: Tahoma, Verdana, sans-serif; font-size: 10px; height="17"; valign="middle";}
.ctrldisabled
{font-family: Tahoma, Verdana, sans-serif; font-size: 10px; height="17"; valign="middle";
textarea, select, input
{font: 9px Verdana, arial, helvetica, sans-serif; background-color: #FFFFD9; text-transform: uppercase;height="16";}
}
.dropdown
{font-family: Tahoma, Verdana, sans-serif; font-size: 10px; height="15"; valign="middle"; width: 90%;}
.dropdowncustom
{font-family: Tahoma, Verdana, sans-serif; font-size: 10px; height="15"; valign="middle"; width: 20%;}
.multipledropdown
{font-family: Tahoma, Verdana, sans-serif; font-size: 10px; height="200"; valign="middle"; width: 90%;}
.multiline
{font-family: Tahoma, Verdana, sans-serif; font-size: 10px; height="30"; valign="middle"; width: 90%; text-transform: uppercase;}
.btnform
{border: 0px; font-family: tahoma, verdana; font-size: 12px; background-color: #DBEAF5; width: 100%; height:18px; text-align: center; cursor: hand;}
.btn
{background-color: #DBEAF5; padding: 0px;border-style: solid; border-width: 1; height="20"}
textarea, select, input
{font: 9px Verdana, arial, helvetica, sans-serif; background-color: #DBEAF5; text-transform: uppercase;height="16";}
/* classes for validator */
.tfvHighlight
{font-weight: bold; color: red;}
.tfvNormal
{font-weight: normal; color: black;}
</style>'
_____________________________________________________________________________
Sample code to incorporate css in the html / web page:
-- in the head tag, include the css file as shown below
<head>
<%@ include file="stylesheet.css" %>
</head>
--Example1 (incorporating the pre-defined style for a dropdown from the css)
<head>
<%@ include file="stylesheet.css" %>
</head>
--Example1 (incorporating the pre-defined style for a dropdown from the css)
<select size="1" name="ddYear" class="dropdown">
<option selected value></option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</option>
</select>
In the above code, we have defined the dropdown to use the formats defined as "dropdown". so this dropdown control will have the font, size etc from the style sheet (css file)
-- Example2:(using style sheet for a text control)
<input type="hidden" name="txtusername" size="12" class="ctrl" value="">
 Attachments
Downloadable source file for Stylesheet.css (20609-2318-stylesheet.css)
|
No responses found. Be the first to respond and make money from revenue sharing program.
|