Basics
CSS rules consist of a selector and declarations of the form
property:
value as in this example:
body {color: white; background: purple}
A selector is usually the name of an html tag, optionally followed by a
class. If a class is given, only elements with that class specified are
affected.
H1.irish {background: green; text-align: center}
This would inherit the color from body, and change the background for:
<h1 class="irish">St. Patrick's Day</h1>
St. Patrick's Day
Where to put styles - in the <head> section
Either (or both):
Link properties:
Links have a "pseudoclass" depending on whether they are fresh, active,
or have been visited, this is indicated by a
colon(:). The usual default
is underlined, and blue, red or purple. Pick colors that show up
against your background.
a:link {color:yellow; font-weight: bold}}
a:active {font-style: italic}
a:visited {color: silver; text-decoration: none}
/* cancel the underline */
a:hover {color:red; background: pink}
/* when mouse over */
Fonts
You do not know the exact fonts any browser may have, that's why the
property is called
font-family
It is a good idea to specify your favourite font, perhaps another one,
and finally a
generic type of
font:
serif, sans-serif, monospace,
cursive, or
fantasy. Here are a simple and an extensive example, repeated in
"shorthand" which is approximately equivalent:
P { font-family: "Times New Roman", serif}
P { font-family: "Times New Roman", serif; font-size: 12pt; font-style: italic;
font-weight: bold}
P { font: 12pt italic bold "Times New Roman", serif}
Note that in the shorthand 'font' property the font-family comes last,
and unmentioned properties may be reset.
Text
There are some "text" properties, here are some, and their possible
values:
text-align: left | right | center | justify
text-decoration: none | underline || overline || line-through || blink
Colors and Backgrounds
From the
w3c
documentation.
Latest version
A color is a either a keyword or a numerical RGB specification.
The suggested list of keyword color names is:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow.
Most browsers support additional color names, see
Wikipedia
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
The RGB color model is being used in numerical color specifications.
These examples all specify the same color:
EM { color: #f00
}
/* #rgb */
EM { color: #ff0000
} /*
#rrggbb */
EM { color: rgb(255,0,0) } /* integer
range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
Position of block elements
This text is within a div that "floats" to the right, within a div that is "relative", the meaning of
this is that our (float) position is relative to, and hence within, it. The present page uses these styles to define the frames and columns within them.
div.frame {position:relative; clear:both; background:pink}
/* elements within will be relative to this, elements above will push it down*/
div.floatleft {float:left; width:45%; clear:left; background: white}
div.floatright {float:right; width:45%; clear:right; background: white}
By now you will have noticed that this arrangement is well-suited to normal html text, but
causes a lot of problems with <pre> formatted text, such as the above. In the left frame,
it sticks out into the space of others, in the right frame, it invokes a scroll bar.
Kinds of Positioning
Position can be given as:
- position:STATIC
- The default, it goes where it should naturally come. Normally, this means a block the width of
the window (or other containing block), and as tall as necessary for it's content. The top matter of this page is an example
- position:RELATIVE
- Like static, it occupies the same space. BUT it may be offset from there, and it contains any positioned elements within itself, such as the next two.
- FLOAT:left (not position) or right
- This element is taken out of the normal layout, and floats left or right in the window,
or containing block (of position:relative)
much like an image with
align="left"
- ABSOLUTE
- This element This element is taken out of the normal layout, and goes exactly where you
put it, probably covering up something else. Caution! User beware!
In fact, what comes next in this file as an absolute div, with red text and green background (doesn't show up in my firefox), it will appear somewhere.
The gremlin box. It was absolutely positioned.
... continuing after the gremlin box (do you see it here? anywhere?)
Location and size:
Many options. You can set top, bottom, left, right, height, width. All in many different units:
% of window, pixels (px) width of the letter 'm' (em) printer's points (pt) among them.
There is also margins and padding.
Enough. All I know about positioning I learned from this elegant tutorial,
Positioning in Ten steps, followed by some trial and lots of error.
This is the bottom text of the first frame. We expect it to squeeze in between the two float columns. (sure looks ugly)