What Does a Style Sheet Look Like?

What is CSS?

What does a style sheet look like?

How do I make my own style sheet?

------

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 pair.

------

An example:

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-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;

}

{ 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 of 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-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.

Outputs:

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

The 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-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:

<!--

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%.

------

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:

------

scrollbar: you can change the colors of the scrollbar on your Web site

------

Margin: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:

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:

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:

A:link

{ text-decoration: none; }

body

{ background-color: #000000; }

</style>

------