What is CSS? CSS stands for cascading style sheets. Cascading style sheets are used to change properties like font face, size, font in tables, scrollbar color, link color and hover color, and other style attributes on Web sites, without having to use long HTML codes. The coolest thing about CSS is that you can link to an external style sheet, and this sheet can change the style (font size, color, link color, link hover etc.) on your whole Web site just by editing the one style sheet. Scrollbar and cursor properties are used only in the Internet Explorer browser and are very popular with those who use it. They are included here for that reason.
What does a style sheet look like? The following example is the WORLD'S BIGGEST style sheet. Well, maybe that's an exaggeration, but I tried to include all the important stuff in this sheet. If you click on certain attributes in this style sheet example, you will get an explanation of the attribute. Attributes are placed between brackets [ and ] and need to be removed, including the brackets, for the code to work. Substitute your attribute for the word "value." Also, any color values represented by "#000000" can be substituted with your own color code. Remember not to remove any colons or semicolons, the code will not work without them. Your finished style sheet will be placed between the <head> tag:
Begin style sheet:
<style type="text/css">
A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000;
background-image: url(yourimage.gif);
background-color: #000000;
(Warning: the following cursor attribute is for those who use IE only!)
cursor: value; [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize]
cursor: url('yourdomain.com/cursor.ani');}
h1 {font-family: value; [your font name for headers (arial, verdana, etc.)]
color: value; [your font color (#000000)] }
p {font-family: value; [your font name for paragraphs (arial, verdana, etc.)]
color: value; [your font color (#000000)] }
body
{ background: #000000;
background-image: url(value); [url of background image to be used, i.e. background.gif]
background-repeat: value; [repeat, no-repeat, repeat-x, repeat-y]
background-position: valueI valueII; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: value; [scroll, fixed]
font-family: value; [your font name]
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size: value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]
direction:rtl; [this reverses the entire site so the scrollbar is on the left]
(Warning: the following scrollbar attribute is for those who use IE only!)
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
td
{ font-family: value; [your font name]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value; [2cm, 4cm : two values for four sides, add numerical value] }
input, textarea
{ background: #000000 url(yourimage.gif);
font-family: value; [your font name]
color: #000000;
border-style: value; [dotted, dashed, solid, double, groove, ridge, inset, outset]
border-color: #000000;
border-width: valuepx; [numerical value, 5, 6, 8...] }
</style>
End style sheet
Link: regular text link
Visited: link that has already been visited
Active: link that you click on
Hover: link with your cursor over it
background-image: background image of your link on hover
background-color: background color of your link on hover
By changing the link attributes above you can remove the underline from links, add a background image on hover, etc. You can substitute underline, overline etc. for the word "value" in the above style sheet and remove everything between [ and ] including the brackets.
- underline
- underline overline
- overline
- line-through
- none
- blink (this is for Netscape only =)
cursor: type of cursor on hover over text and image links
Here are the various cursor attributes:
wait
crosshair
hand
help
text
move
see belowThe last arrow above can point in any direction:
"s-resize" points south
"e-resize" points east
"w-resize" points west
"ne-resize" points north east
"nw-resize" points north west
"se-resize" points south east
"sw-resize" points south west
I believe the cursor attribute only works in IE4 or greater. If you can see the example (put your cursor over the cat image above), then it will work in your browser. To choose which cursor to use in your style sheet, replace the word "value" with your cursor attribute, then remove everything between [ and ] in the above code including the brackets.
You can replace the regular cursor with your own custom cursor using this tag. I have a program you can download to make the cursor here. You can save the cursor as .cur or .ani.
body: all of your body attributes go in this CSS tag
background: the color of your body background
background-image: the image you want in the background of your site
background-attachment: If you add "fixed" here, the text will scroll and the background won't
background-repeat: attributes of your background
Here is a list of the attributes you can use in the background-repeat tag to change how your background will appear on your page:
- repeat Adding this tag just makes your background image tile like it does with the regular background tag.
- no-repeat Adding this tag makes your background image appear in it's regular size in the upper left hand corner of your page, the image shows only once.
- repeat-y Adding this tag makes your background image tile vertically on your page, along the left margin.
- repeat-x Adding this tag makes your background image tile horizontally on your page, along the top margin.
You can place your background image anywhere on your page by using percentages and a background-position attribute:
<STYLE TYPE="text/css">
<!--
BODY {background-image: url(your file name.gif); background-repeat: no-repeat;background-position: 0% 0%; }
-->
</STYLE>
The first percentage is for your horizontal alignment. The second percentage is for your vertical alignment. For instance, if you wanted your background image to be in the top center of your page, your percentage would be 50% 0%.
Here's a sample:
font-family: the font type you would like to use on your site
color: font color
letter-spacing: amount of space in between the l e t t e r s of your font
font-weight: You can change the text attributes to bold, bolder and specific font weights in the above code by adding the font-weight tag:
- lighter: font-weight:lighter
- normal: font-weight:normal
- bold: font-weight:bold
- bolder: font-weight:bolder
- 100: font-weight:100
- 600: font-weight:600
- 900: font-weight:900
font-size: You can change the font attributes from xx-small to xx-large in the above code by adding the font-size tag:
- xx-small: font-size:xx-small
- x-small: font-size:x-small
- small: font-size:small
- medium: font-size:medium
- large: font-size:large
- x-large: none; font-size:x-large
- xx-large: none; font-size:xx-large
Or you can just use pt. sizes for fonts:
- 12pt: font-family:12pt
- 18pt: font-family:18pt
direction: this actually reverses the whole page so that the scrollbar is on the left, but to keep your text properly aligned add this tag right after the <body> tag and a </div> tag right before the </body> tag:
<div style="direction:ltr">
scrollbar: you can change the colors of the scrollbar on your Web site (if you can see the demo example it will work on your browser).
This sets the margins for the body. In order for your site to stretch all the way to the top, bottom, left and right of your screen, set the margins to 0.
td: these are the attributes for tables only.
font-family: this is the font you want to specify for all of your tables.
padding: this is the cell-padding you want to specify for all of your tables.
input, text area: these are the attributes for forms.
background: this would be the background image and color of your text area.
font-family: this is the type of your font in text areas.
color: this is the color of your font in text areas.
border-style: this is obviously the style of your text area borders.
border-color: this is the color of your text area borders.
border-width: this is the width of your text area borders.
How do I make my own style sheet? You start your style sheet with this tag:
<style type="text/css">
and end it with this one:
</style>
All of your attributes will go in between those two tags. For instance, if you wanted just a style sheet to remove the underline from your links, you would use this style sheet:
<style type="text/css">
A:link
{ text-decoration: none; }
</style>
If you want a style sheet that also includes a background color, you would use this tag, substituting your own color # where you see bold text:
<style type="text/css">
A:link
{ text-decoration: none; }
body
{ background-color: #000000; }
</style>
Copyright 1997-2016 Lissa, All rights reserved
This Web site is registered with the Library of Congress Copyright Office.
