FJD1.com

CSS cascading style sheets

     index  |   links  |   news   |   tools       Advanced


If you need professional help, send me an e-mail describing your needs and how to best contact you.

Sincerely,
F. Davies
fjdavies@yahoo.com
(360) 352-0242
ICQ 43536012


advertisements

CSS or Cascading Style Sheets, are a great way of controling the visual presentation of web pages. They can exist as seperate documents and allow the change of an entire sites look and feel without having to change every page's code individually.

If you are using IE, you may see the color of scroll bars is blue. This too was done by using CSS.

For more information see: W3.org

The following is from our stylesheet here at fjd1.com:

This first part controls the look of scrollbars in I.E.:

BODY {

scrollbar-3dlight-color:    #ff9f00;
scrollbar-arrow-color:      #00ff00;
scrollbar-base-color:       #ffffcc;
scrollbar-darkshadow-color: #a03030; 
scrollbar-face-color:        "blue"; 
scrollbar-highlight-color:  #300000;
scrollbar-shadow-color:     #a03030;
}
This next section is used to contol the look of form buttons in I.E.The attribute class="btn" is placed into the form's INPUT tag.

.btn {
	cursor:hand;
	font-family:Verdana,"MS Sans Serif",Charcoal,Chicago,Arial;
	font-weight:bold;
	font-size:big;
	background-color:"blue";
      color:"lime";
}

These next two sections likewise contol the look of other form buttons.

.btnMedium {
	cursor:hand;
	font-family:Verdana,"MS Sans Serif",Charcoal,Chicago,Arial;
	font-weight:bold;
	font-size:big;
	background-color:"blue";
      color:"lime";
      width:200;
}


.btnWide {
	cursor:hand;
	font-family:Verdana,"MS Sans Serif",Charcoal,Chicago,Arial;
	font-weight:bold;
	font-size:big;
	background-color:"blue";
      color:"lime";
      width:320;
}

We next define how the links look and act.

A:link {
  TEXT-DECORATION: none; COLOR: #9090fd
}
A:visited {
  TEXT-DECORATION: none; COLOR: #d38080
}
A:hover {
  BACKGROUND-COLOR: transparent; COLOR: #00fd00
}
A:active {
  BACKGROUND-COLOR: transparent; COLOR: #fd0000
}

Style is applied to heading tags as well as setting the body's background color and finally defining how the horizontal rules look in the code below...

H1 {
  BACKGROUND-COLOR: #220071; COLOR: ff0080; 
FONT-FAMILY:Arcane, times new roman, georgia, arial, helvetica; 
FONT-SIZE: 24pt; 
MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; WIDTH: auto
}


H2 {
  BACKGROUND-COLOR: #220071; COLOR: ff0080; 
FONT-FAMILY:times new roman, georgia, arial, helvetica; 
FONT-SIZE: 18pt; MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; 
TEXT-ALIGN: center; WIDTH: auto
}
H3 {
  BACKGROUND-COLOR: #220071; COLOR: ff0080; 
FONT-FAMILY: arial, helvetica; FONT-SIZE: 16pt; 
MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px; 
TEXT-ALIGN: center; WIDTH: auto
}
H4 {
  BACKGROUND-COLOR: #220071; COLOR: ff0080; 
FONT-FAMILY: arial, helvetica; FONT-SIZE: 14pt; 
MARGIN-BOTTOM: 4px; MARGIN-TOP: 10px; 
TEXT-ALIGN: center; WIDTH: auto
}
H5 {
  BACKGROUND-COLOR: #220071; COLOR: ff0080; 
FONT-FAMILY: arial, helvetica; FONT-SIZE: 12pt; 
MARGIN-BOTTOM:10px; MARGIN-TOP: 10px; 
TEXT-ALIGN: center; WIDTH: auto
}
H6 {
  BACKGROUND-COLOR: #220071; COLOR: ff0080; 
FONT-FAMILY: helvetica, arial; FONT-SIZE: 8pt; 
MARGIN-BOTTOM:8px; MARGIN-TOP: 2px; 
TEXT-ALIGN: center; WIDTH: auto
}
BODY {
  BACKGROUND-COLOR: #220071; COLOR: ffffff 
}
HR {COLOR: ff0080; LENGTH: 85%
}

Here we present a link to the Arcane font used in our headings.

@font-face {
    font-family: Arcane;
    font-style:  normal;
    font-weight: normal;
    src: url(./fonts/ARCANE0.eot);
}
These are in a plain text file saved with the extension css, (such as sitestyle.css)
In the head of your web page you will need to add a link to the stylesheet as in:
 
<link	rel="stylesheet" 
	href="sitestyle.css" 
	type="text/css">
For further information, contact: fjdavies@yahoo.com