Style Sheets

HTML CSS (Cascading Style Sheets)

What is CSS?

CSS is a language that means 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. The problem with CSS is that some properties are supported by both Netscape and Internet Explorer, some are just supported by IE and some are just supported by Netscape.

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. 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." Your finished style sheet will be placed between the tag:

Begin style sheet:

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;

cursor:value [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize }

body
{ background-color: #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: [scroll, fixed]

font
font-family: Tahoma, arial, verdana;
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)]

scollbar
direction:rtl; [this reverses the entire site so the scrollbar is on the left]
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 }

td
{ font-family: value; [arial, tahoma, verdana, common fonts]
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, text area
{ background: #000000 url(yourimage.gif);
font-family: tahoma, arial, verdana;
color: #000000;
border-style: value [dotted, dashed, solid, double, groove, ridge, inset, outset];
border-color: #000000;
border-width: valuepx [numerical value, 5, 6, 8...] }


In angle brackets: /style

End style sheet

CSS Vocabulary

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 =)

body: all of your body attributes go in this CSS tag
background-color: the color of your background
background-image: the image you want in the 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:

 In angle brackets

STYLE TYPE="text/css">

BODY {background-image: url(your file name.gif); background-repeat: no-repeat;background-position: 0% 0%}

In angle brackets /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%.

CSS Vocabulary Fonts

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-size:12pt
• 18pt:  font-size:18pt

Setting up A Basic Style Sheet

You start your style sheet with this tag:
In angle brackets: style type="text/css">


and end it with this one:
In angle brackets /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:

HTML Exercise~ Local Style Sheets

Set up a local style sheet. Using the supplied code replace the code with your oun text. Then set up an internal style sheet.