What is this?
There are two kinds of stylesheets, external and internal. And internal stylesheet allows you the specify certain aspect of the page, rather like page defaults, but you can do more. External stylesheets allow you to specify certain aspects of a page and link it to many pages. When you want to change something, you change the stylesheet, and it will change on all the pages the stylesheet it linked to. Very handy for large sites or webmasters who like to constantly redesign and change their sites. Both internal and external stylesheets will overrule what the body tag says.
Internal Stylesheets | External Stylesheets | Elements of a Stylesheet
Internal Stylesheets:
1. Place your cursor between the head tags and type <style type="text/css">.
2. Type the elements listed below.
3. Type </style>.
External Stylesheets:
1. Open a blank text editer.
2. Type the elements listed below.
3. Save the file as Code.css where code is the name of the stylesheet. Make sure the extension of the file is .css.
4. Open a page you wish to link the stylesheet to. Place your cursor between the head tags and type <link rel="stylesheet" type="text/css" href=Code.css>, where Code.css is the location of the separate stylesheet.
5. Repeat step 3 for each page you wish to link the stylesheet to.
| Replace text-decoration:none with... | To make... |
| text-decoration:underline | underlined |
| text-decoration:underline overline | underline & overline |
| background-color:COLORHERE | background color |
| text-decoration:line-through | slashed out |
| cursor:crosshair | cross cursor |
| cursor:n-resize | cursor points up |
| cursor:s-resize | cursor points down |
| cursor:w-resize | cursor points left |
| cursor:e-resize | cursor points right |
| cursor:wait | hourglass cursor |
| font-weight:bold | bold font |
| font-weight:italic | italics text |
| font-size:#pt | sized text |
Body:
Body{
font-family: "Font1", "Font2";
font-weight: weight;
font-size: 12pt
scrollbar-face-color:black;
scrollbar-highlight-color:#1;
scrollbar-3dlight-color:#2;
scrollbar-darkshadow-color:#3;
scrollbar-shadow-color:#4;
scrollbar-arrow-color:#5;
scrollbar-track-color:#6;
or
scrollbar-arrow-color: #1;
scrollbar-base-color: #2;
scrollbar-dark-shadow-color: #3;
scrollbar-track-color: #4;
color: #5;
}
Color refers to the color of the text. Font-family is the font of the text. If a computer cannot find the first, it will move to the second, and so on. If it can't find any of them, it will automatically go to Arial, or whatever font is set as the default for the browser. Font weight is either italic, bold, normal, or underline. Font size is the size of the text in pts, not pixels. The elements beginning with scrollbar are used to change the colors of the scroll bar (like on this page), but it only works on Internet Explorer, not Netscape. Only use one set of attributes or the other, not both together. The first set (with 6 attributes) allows for more elaborate scrollbars than the second. Play around with the colors to get them to look how you want them to.
Form Elements:
This edits everything in a form including text boxes, radio buttons, menus, and buttons.
input, textarea, select, file {
padding-left: #1px;
padding-right: #2px;
font: normal #3pt font1,font2;
border: #4px solid #5;
background-color: #6;
color: #7;
}
#1 is the padding to the left of the input in pixels and #2 is the padding to the right in pixels. If you do not understand what this affects, play around with it and see what changes. #3 is the size of the font in points, not pixels. Font1 and font2 are the font for any text in the input (only applicable to text boxes, menus, and buttons). #4 is the width of the border in pixels and #6 is the color of the border. #6 is the color of the border and #7 is color of the text (only applicable to text boxes, menus, and buttons).
When completed correctly, this tag will look like this: (this is the stylesheet I am using on these pages)
A:link{color:#c6b5de;cursor:black; text-decoration:none}
A:visited{color:#c6b5de;cursor:black; text-decoration:none}
A:active{color:#c6b5de;cursor:black; text-decoration:none}
A:hover{color:white;cursor:black; text-decoratoin:none}
body {
scrollbar-arrow-color: black;
scrollbar-base-color: #c6b5de;
scrollbar-dark-shadow-color: #c6b5de;
scrollbar-track-color: black;
color: white;
font-family: "Garamond", "Times New Roman";
font-weight: normal;
font-size: 12pt
}
input, textarea, select, file {
padding-left: 0px;
padding-right: 0px;
font: normal 12pt garamond, times new roman, arial;
border: 1px solid gold;
background-color: black;
color: #d60000;
}
If you're confused by stylesheets, I sure was when I started them, please feel free to e-mail me with your questions.