Style Commands!
by Mike Roam, Chairman of Computer Department,
Saint Ann's School, Brooklyn, USA
You can put style commands (listed below) straight into your web page as parts of tags, (or you can also put style commands into a "stylesheet" which can control a bunch of your web pages all at once).
Examples of style commands: instead of a plain
<body>
at the top of your web page, you can have
<body style="background-color:#3399FF;">
Another example: instead of <p>
you can have
<p style="font-family:'Times New Roman'; text-align:center; text-indent:0.25in; border:solid; border-width:thin; width:100%;">
If you just want to make a
few
words
special, use the
<span> and </span>
commands. Example:
Here is some <span style="font-weight:bold; color:red;">text</span> surrounded by normal text.
(PS: *Warning*, here is a short list of commands that are no good anymore:
<font>, <center>, <u>(underscore), and <body bgColor='...'>).
The people who design the world wide web technology have realized that those commands
weren't such good ideas
after all, so they have replaced them with the "style commands" which fill the rest of this page.
New browsers will work better if you use style commands instead of those old-fashioned tags I just listed.)
By the way, here are some links to a great
brief styles tutorial
and mega stylesheet
info 1 and
info 2.
Commands
(clickable for more info)
(and examples)
|
Choices, instructions, and samples |
color
Example: style="color:#3399cc;" |
You can set the color of your text to various shades. You specify colors by saying something like
#ff6699
(here's a color chart (scroll down a screen or so), or
green
(see color name list),
or
rgb(0, 55, 255)
using integers from 0 - 255, or
rgb(100%, 0%, 0%)
with numbers 0.0% - 100.0%
|
font-family
font-family:'Times New Roman', serif;
|
You can choose fonts by name. Examples include
Times,
Arial,
'New Berolina MT',
'Times New Roman',
Sand,
(Note: you MUST use quotes if the 'font name' has several words. Furthermore, not every font is on every computer, but you can list several choices, in order, in case the computer doesn't have your first choice. Example: style="font-family: Helvetica, Palatino, 'Jokerman LET';"
(Here are some samples)
|
font-weight
font-weight:bold;
|
lighter,
normal,
bold,
bolder
|
font-size
font-size:1.5em;
|
2em (one "em" is regular body text size, so 1.5em means '1.5 times bigger than normal')
The following are more precise but less useful (since different browsers and different screens and people with weak eyesight can't always use them properly:
24pt (points),
0.7in (inches),
1.5cm (centimeters),
17px (pixels)) |
font-style
font-style:italic;
|
Normal, italic,
oblique |
font-variant
font-variant:small-caps;
|
Normal, small-caps |
background-color
background-color:#ccffcc;
|
Transparent, #ccffcc (color chart),
green (color name list),
or rgb(255, 204, 204) or rgb(20%, 0.5%, 75.5%) |
background-image
background-image: url( images/squid_faded.jpg );
|
None, or URL of image file, in parentheses, with "url" preceding.
Example: background-image:url(images/wood_floor_faded.jpg); |
| background-repeat |
repeat-x (tile in horizontal), repeat-y (vert tile), repeat (both), no-repeat (not tiling) |
| border-color |
#ccffcc
(color chart),
green (color name list) |
| border-style |
Note: most of these don't work in netscape 4.7, but will work in explorer 5 and newer netscape and mozillas.
Possible values: None, dashed, dotted, solid, double, groove, ridge, inset, outset
|
text-align
text-align:right |
Possible values: left, center, right, justify |
| text-decoration |
None, underline,
overline
, line-through, blink |
| text-indent | 2em, 7pt (points), 8px, 9cm, 10in or a percentage of parent's indent |
| text-transform |
Capitalize,
uppercase,
lowercase, none
|
| letter-spacing,
word-spacing |
Normal, 5pt, 6in, 7cm, 8px |
| margin-left,
margin-right,
margin-top,
margin-bottom |
Auto, 5pt, 6in, 7cm, 8px |
| vertical-align |
Baseline, sub, super, top, text-top, middle, bottom, text-bottom, % of curr line height |
| There are many other commands in the mega stylesheet
info 1 and
info 2 files. |
You can also put all your style commands into a separate text file which is used by bunches of web pages, controlling the look of all of them. To do this, the following command (which you can copy from here and paste) goes into every web page's <head> zone:
The style file ("mike_styles.css") itself follows. (Please notice that there are ":COLON:" characters instead of "=EQUAL=" !!!).
Save this following text into a file and put it in your web folder.