Building a User Management Application - Style Sheet (
Page 4 of 4 )
The style sheet does the job of providing a style for each element on the HTML page. Below are the styles that are defined:
body {
font-family: Verdana;
}
.header{
border:1px dotted #FF9933;
font-size:14px;
font-weight:bold;
color:#000000;
background-color:#FFCC99;}
.copy{
text-align:right;
font-size:9px;}
.welcomeheader{
color:#FFCC99;
font-size:18px;
font-weight:bold;}
/*Navstyles*/
.bord{
border:1px dashed #FF9900;
background-color:#FFCC99;}
.txt{
color:#666666;}
/*form styles*/
.error{
color:#FF0000;
font-weight:bold;}
.lbl{
font-weight:bold;}
.bordr{
border:2px solid #000000}
The first class that is defined is the header class. This class formats the header sections of the HTML code, by dictating its color, border, size and weight, etc:
.header{
border:1px dotted #FF9933;
font-size:14px;
font-weight:bold;
color:#000000;
background-color:#FFCC99;}
The result of which looks something like this:
The above header will be visible on every single page of the system. The second style that is defined formats the copyright information for the application:
.copy{
text-align:right;
font-size:9px;}
It is very short and only has two styles. It aligns the text to the right and reduces the size to nine pixels.
This is what it looks like:
The last class that is defined for the main section of the template is the welcome header class. It dictates the color, size and weight of the class:
.welcomeheader{
color:#FFCC99;
font-size:18px;
font-weight:bold;}
The result of the above code looks something like this:
The next part of the code deals with the application's navigation styles. There are two styles defined. One sets the border styles, while the other sets the text styles for the navigation text:
/*Navstyles*/
.bord{
border:1px dashed #FF9900;
background-color:#FFCC99;}
.txt{
color:#666666;}
The final section deals with the form elements. It also has two sections. The first one sets out the styles that should be applied to the error messages that will appear on the form, while the second dictates what styles should be used for the labels on the form:
/*form styles*/
.error{
color:#FF0000;
font-weight:bold;}
.lbl{
font-weight:bold;}
.bordr{
border:2px solid #000000}
In the next article we will continue to discuss the application wide scripts that we started to talk about here. See you next week!
