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