|
|
| |
|
Introduction to Style Sheet
|
|
-
HTML 4.0 Style sheets provide expanding possibilities
to improve the consistency of website management and
the appearance of webpages. For example,
style sheets make it easy to specify the amount of
white space between text lines, the amount lines
are indented, the colors used for the text and the
backgrounds, the font size and style, and a host of
other details.
Biggest benefit is that you can define various 'styles'
only once in a style sheet file, and just refer to a
particular style name to format your webpages as many
time as you want.
For example, you want to format following paragraph in
san serif font, 3 font size, dark blue font color and bold case.
Two different ways to achieve that;
Knowledge comes and goes, but wisdom lingers.
1) per-paragraph formatting (HTML 3.2 equivalent)
-
Knowledge comes and goes, but wisdom lingers.
-
|
<FONT COLOR=#000066 SIZE=-1 FACE="Tahoma, Verdana, Arial, Helvetica,
Geneva, Sans-Serif"><STRONG>
Knowledge comes and goes, but wisdom lingers.
</STRONG></FONT>
|
2) style sheet formatting (HTML 4.0 equivalent)
-
Knowledge comes and goes, but wisdom lingers.
-
|
<SPAN CLASS="ssbBl">
Knowledge comes and goes, but wisdom lingers.
</SPAN>
|
-
where I defined the style 'ssbBl' in a style sheet as
.ssbBl { /* San-sherif-Bold-Blue */
font-size: 10pt;
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva, Sans-Serif;
font-weight: bold;
color: #000066
}
As you can see clearly, your HTML code would beome
more concise and less-clouded, and most of all,
you can refer to a predefined style for text formatting
instead of formatting it over and over again
without repeating formatting tags (i.e, FONT, COLOR, ALIGN, SIZE, etc.)
per each incident.
In summary, style sheet in HTML 4.x+ provides support for the
following features:
- Flexible placement of style information
- Placing style sheets in separate files makes
them easy to reuse. Sometimes it's useful to directly include
style instructions within the HTML document to which
they apply, either grouped at the start of the document,
or in attributes of the elements throughout the body of
the document. To make it easier to and consistently
manage style on a website basis, style sheets approach
is a must.
- Cascading
- This is the capability provided by some style
sheet languages such as CSS (Cascading Style Sheets)
to allow style information from several style sheet files to
be blended together. These could be, for instance,
website style guidelines, styles common to a group
of documents, and styles specific to a single
document. By storing style sheet files separately,
style sheets can be reused, simplifying web authoring
and making more effective use of network caching.
The cascade defines an ordered sequence of style sheets where
rules in later sheets have greater precedence than
earlier ones.
- Media dependencies
- HTML allows authors to specify documents in a
media-independent way. This allows users to access
webpages using a wide variety of devices and media,
e.g., graphical displays for computers running
Windows, Macintosh OS, and X11, devices for
television sets, specially adapted phones and
PDA-based portable devices, speech-based browsers,
and braille-based tactile devices. Style sheets, by
contrast, apply to specific media or media groups.
A style sheet intended for screen use may be applicable
when printing, but is of little use for speech-based
browsers. This specification allows you to define the
broad categories of media a given style sheet is
applicable to. This allows browsers to avoid
retrieving inappropriate style sheets. Style sheet
languages may include features for describing media
dependencies within the same style sheet.
- Alternate styles
- Authors may wish to offer readers several ways
to view a document. For instance, a style sheet for
rendering compact documents with small fonts, or
one that specifies larger fonts for increased
legibility. This specification allows authors
to specify a preferred style sheet as well as
alternates that target specific users or media.
User agents should give users the opportunity to
select from among alternate style sheets or to
switch off style sheets altogether.
There are three different ways to apply styles to your
webpages, and we'll examine pros and cons of each;
- Inline Style Definition
- Header Style Definition
- External Style Sheets
|
|
|
Inline Style Definition
|
-
|
<P STYLE="name: value; name: value;
name: value...">
text
</P>
|
| |
Inline style definition specifies the style information
for a single element per single formatting incident.
(kind of HTML 3.2 equivalent of formatting)
Style property declarations
have the form "name : value" and are separated by a
semi-colon.
If the style will be reused for several other elements,
authors should consider using the header style definition
approach. For optimal flexibility, authors should
define styles in external style sheets instead of defining
per HTML document.
|
| |
|
Following is a
Inline style definition
|
Following is a
<P style="font-size: 9pt; color: red">
Inline style definition</P>
|
|
|
|
Header Style Definition
|
-
|
|
<HEAD>
<STYLE type="text/css">
Style_Name {name: value; name: value;
name: value...}
Style_Name {name: value; name: value;
name: value...}
.
.
.
</STYLE>
</HEAD>
|
| |
Header style definition allows authors to put style sheet
rules (as many as you want) in between the HEAD section of a HTML document.
Once defined, you can refer
to defined style(s) anywhere and as many times as you want
in current HTML.
|
|
| |
| |
The following CSS STYLE declaration puts a
border around every <H1> element
(yes, that standard <H1> tag you all know)
in the HTML document and centers it on the page.
|
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1;
border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
.
.
.
<H1>Bordered and Centered H1</H1>
</BODY>
|
Bordered and Centered H1
|
|
|
Now, it is possible that you
want the newly defined <H1> element sytle
to be apply selectively to number of
<H1> elements in the HTML.
To specify that this <H1> style information
should only apply to H1<H1> elements of a
specific class,
you can modify CSS STYLE as follows:
|
<HEAD>
<STYLE type="text/css">
#myH1 {border-width: 1;
border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
.
.
<H1>This H1 is not affected</H1>
<H1 id="myH1">Bordered and Centered H1</H1>
</BODY>
|
This H1 is not affected
Bordered and Centered H1
|
|
|
For better management of specific
application of sytle, you can use
DIV and SPAN elements.
DIV is a style definition element used
mainly to handle a block of text (i.e., paragraph orientation),
and SPAN is style definition element used
to handle a inline text (i.e., senetence orientation).
In the following example, DIV element is used
to set the text justification for a series of paragraphs and size of text
that make up the abstract section of an article.
This style definition (=.Abstract) could be reused over and over again
for elsewhere in the document.
|
<HEAD>
<STYLE type="text/css">
DIV.Abstract {text-align: center; font-size: smaller}
</STYLE>
</HEAD>
<BODY>
.
.
<DIV CLASS="Abstract">
The objective of this study was to implement the
use of a Geographical Information System (GIS)
to visualize and analyze simulation outputs from
a distributed parameter nonpoint source model to
determine the best management practices for the
reduction of nutrients, pesticides, and soil
erosion in the study area. The site of concern
was NSGA Northwest, a Navy Communications Facility
near the Virginia and North Carolina border.
</DIV>
</BODY>
|
|
The objective of this study was to implement the
use of a Geographical Information System (GIS)
to visualize and analyze simulation outputs from
a distributed parameter nonpoint source model to
determine the best management practices for the
reduction of nutrients, pesticides, and soil
erosion in the study area. The site of concern
was NSGA Northwest, a Navy Communications Facility
near the Virginia and North Carolina border.
|
|
|
In the following example, SPAN element is used
to set the font style of the first few words of a paragraph to small caps
and in dark blue color.
This style definition (=.FirstWordDarkBlue) could be reused over
and over again for elsewhere in the document.
|
<HEAD>
<STYLE type="text/css">
SPAN.FirstWordDarkBlue {font-variant: small-caps; color: #000066}
</STYLE>
</HEAD>
<BODY>
.
.
<SPAN CLASS="FirstWordDarkBlue">The first</SPAN>
few words of this paragraph are in small-caps.
</BODY>
|
|
The first few words of this paragraph are in small-caps.
|
|
|
Hence, you can define neutral style definitions
without specifying DIV or SPAN, and use such definition with
either DIV or SPAN. Let's recycle above two examples:
|
<HEAD>
<STYLE type="text/css">
.Abstract {text-align: center; font-size: smaller}
.FirstWordDarkBlue {font-variant: small-caps; color: #000066}
</STYLE>
</HEAD>
<BODY>
.
.
<SPAN CLASS="FirstWordDarkBlue">The first</SPAN>
few words of this paragraph are in small-caps.
.
.
<DIV CLASS="Abstract">
The objective of this study was to implement the
use of a <SPAN CLASS="FirstWordDarkBlue">Geographical Information System (GIS)</SPAN>
to visualize and analyze simulation outputs from
a distributed parameter nonpoint source model to
determine the best management practices for the
reduction of nutrients, pesticides, and soil
erosion in the study area. The site of concern
was NSGA Northwest, a Navy Communications Facility
near the Virginia and North Carolina border.
</DIV>
.
.
</BODY>
|
|
|
|
|
External Style Sheets
|
-
|
|
<HEAD>
<LINK REL="stylesheet"
TYPE="text/css" HREF="CSS_URI">
</HEAD>
|
| |
Separate style sheets from HTML documents offer several benefits:
- Authors and website aintainers may share style sheets across
a number of documents (and sites) withour re-doing style definition
per HTML page.
- Authors may change/modify the style sheet, and change/modification will
be instnataneously reflected in all HTML documents (without individually
changing/modifying it) that has a link to the external style sheet.
Authors specify external style sheet(s) with a <LINK> element.
Style sheet file is a plain vanilla text file that containing style definitions.
If two or more <LINK> attributes were specified,
the first one takes precedence.
Yes, you can have an External Style Sheets link(s), Inline Style Definition
and Header Style Definition simultaneously in a HTML file. However,
think again why you're using the Style Sheets in the first place.
|
|
| |
| |
Let's say that an external style sheet,
"/css/my.css"
contains previous style definitions,
.Abstract and .FirstWordDarkBlue. Can you see the benefit
of using an external style sheet now?
|
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="/css/my.css">
</HEAD>
<BODY>
.
.
<SPAN CLASS="FirstWordDarkBlue">The first</SPAN>
few words of this paragraph are in small-caps.
.
.
<DIV CLASS="Abstract">
The objective of this study was to implement the
use of a <SPAN CLASS="FirstWordDarkBlue">Geographical Information System (GIS)</SPAN>
to visualize and analyze simulation outputs from
a distributed parameter nonpoint source model to
determine the best management practices for the
reduction of nutrients, pesticides, and soil
erosion in the study area. The site of concern
was NSGA Northwest, a Navy Communications Facility
near the Virginia and North Carolina border.
</DIV>
.
.
</BODY>
|
|
|
|
|
Level 1 Cascading Style Sheet (CSS1) Properties
|
-
O.k., here's the whole nine yard-ful of CSS1 properties
you can start experimenting with pages.
The bottom line is that styles are suggestions to the browser, after all.
You can no more guarantee that another user viewing your
pages with a style sheet will see precisely the same thing
you see.
Within a given browser, you may encounter other limitations.
Different browsers (i.e., IE vs. Netscape) are also likely to do slightly
different things when they encounter conflicting or
illogical property values. Browsers may even implement
different behaviors depending on the their versions.
Even with these cons, CSS1 approach will facilitae
absolutely greater control and manageability for your website
compare to the HTML 3.2 standard, and it is highly
recommended to migrate to/strat with CSS1 if you
haven't done so -- it's time to move forward.
Now, a CSS1 style sheet contains five basic types of
properties:
- Foreground and background colors and background images
- Fonts properties
- Text properties (word spacing, letter spacing, etc.)
- Boxes (margins and borders around block elements,
floating elements, etc.)
- Classifications (control over list styles and the
formatting of elements--whether they should be presented
inline or displayed as a block, for example)
Properties are normally expressed by comma-separated list(s)
of the 'selector' (or reserved keywords). Followings are
all valid style properties expressions;
|
H1 { font-family: helvetica }
H1 { font-family: helvetica; }
H1 { font-family: helvetica; font-size: 12pt }
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
H1 { font: bold 12pt/14pt helvetica }
H1, H2, H3 { font-family: helvetica }
|
|
CSS1 Grammar
-
The minimal CSS (i.e., any version of CSS) grammar
below defines a language that defines the syntax of CSS1
in the HTML 4.0 CSS1 standard (no, I didn't just make these up),
and will be used religiously throughout this page.
|
Grammar Notation |
It means |
|
* |
0 or more |
|
+ |
at least 1 or more |
|
? |
0 or 1 |
|
| |
separates alternatives, i.e., and/or combination |
|
[ ] |
grouping |
|
|
|
Finally, the beefy part starts from here. :-)
|
Foreground/Background Properties
|
|
Synopsis
-
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
Above properties describe the color (often called foreground color)
and background of a formatting element. You can set
format for a background color and/or a background image. The position
of the image, if/how it is repeated, and whether it is
fixed or scrolled relative to the canvas (= screen) can also be set.
|
|
|
|
| |
color property describes the text color of
an element (often referred to as the foreground
color). There are several different ways to specify the
color_value, either a keyword or a numerical
red-green-blue (=RGB) specification. For example,
you can specify a 'yellow' color in following variations;
|
Expression |
Description |
|
H3 { color: yellow } |
keyword color name |
|
H3 { color: #FFDD00 } |
#rrggbb |
|
H3 { color: rgb(255,255,0) } |
integer range 0 - 255 |
|
H3 { color: rgb(100%, 100%, 0%) } |
float range 0.0% - 100.0% |
|
If you use the three-digit RGB notation (#rgb),
then the expression will be automatically converted
into six-digit form (#rrggbb) by replicating digits,
not by adding zeros. For example, #FE9 expands to
#FFEE99. Notable use of this technique is that
white color (#FFFFFF) can be specified with a short
notation (#FFF).
Also, RBG values outside the numerical ranges will be
clipped automatically, thus color
property has a self-correcting
functionality for possible mistyped RGB values.
|
Out-of-Range Expression |
Resulting Expression |
|
H3 { color: rgb(300,735,0) } |
H3 { color: rgb(255,255,0) } |
|
H3 { color: rgb(150%, 200%, 0%) } |
H3 { color: rgb(100%, 100%, 0%) } |
|
|
|
|
|
{ background-color : color_value }
|
|
| |
background-color property describes, apparently, the
background color of an element. For format of
color_value,
please refer to above section.
|
H3 { background-color: #FF0 }
|
|
|
|
|
|
{ background-image: url |
none }
|
|
| |
background-image property sets the background
image of an element. When setting a background
image, you may consider also setting a background color
in case when the image is unavailable for some reason.
(contingency, contingency, contingency)
When the image is available, the image will be
overlaid on top of the background color.
Followings are all valid background-image
property expressions. See carefully at different enclosures such as
" and
' variations inside of
parenthesis. Once you decided, try to stick with one
that you like most for the sake of the consistency.
|
Full HTTP URI
BODY { background-image: url(http://cee.odu.edu/html/header/html.syntax.gif) }
BODY { background-image: url("http://cee.odu.edu/html/header/html.syntax.gif") }
BODY { background-image: url('http://cee.odu.edu/html/header/html.syntax.gif') }
HTTP DocumentRoot
BODY { background-image: url(/html/header/html.syntax.gif) }
BODY { background-image: url("/html/header/html.syntax.gif") }
BODY { background-image: url('/html/header/html.syntax.gif') }
Local Drive
BODY { background-image: url(c:/html/header/html.syntax.gif) }
BODY { background-image: url("c:/html/header/html.syntax.gif") }
BODY { background-image: url('c:/html/header/html.syntax.gif') }
Current directory
BODY { background-image: url(html.syntax.gif) }
BODY { background-image: url("html.syntax.gif") }
BODY { background-image: url('html.syntax.gif') }
BODY { background-image: none }
BODY { background-color: #FF0; background-image: url(html.syntax.gif) }
|
|
|
|
|
|
{ background-repeat :
repeat |
repeat-x |
repeat-y |
no-repeat
}
|
|
| |
If a background-image
is specified, the value of background-repeat
determines how/if the image is repeated.
|
Value |
It means |
|
repeat |
image is repeated both horizontally and vertically |
|
repeat-x |
image repeat to create a single band of images horizontally |
|
repeat-y |
image repeat to create a single band of images vertically |
|
no-repeat |
image is not repeated (i.e., just 'self') |
|
In following example, the image, html.syntax.gif, will only be repeated
horizontally on white background.
|
BODY {
background-color: #FFF;
background-image: url(html.syntax.gif);
background-repeat: repeat-x
}
|
|
|
|
|
|
{ background-attachment :
scroll |
fixed
}
|
|
| |
When, and only when, a background-image
is specified, the value of background-attachment
will control whether the image will be displayed as fixed (i.e., remain
at the same area) with regard to the canvas (or screen) or
the image will be scrolled along with the content when user scroll/page down
the page.
In following example, the image, html.syntax.gif, will only be repeated
horizontally on white background, and the horizontally repeated images will
stay at the same area in the screen even when the user scroll the page down.
|
BODY {
background-color: #FFF;
background-image: url(html.syntax.gif);
background-repeat: repeat-x;
background-attachment: fixed
}
|
|
|
|
|
|
{ background-position :
[ x-percentage,
y-percentage |
x-length,
y-length ] |
[top |
center |
bottom ] |
[left |
center |
right ]
}
|
|
| |
When, and only when, a background-image
has been specified, the value of
background-position
specifies image's initial position.
Instead of being verbose, let's find out how these expressions
would work from following examples.
|
Value |
It means |
|
0% 0% |
Yes, that is correct, without
a comma in between.
The upper left corner of the image is placed in
the upper left corner of the rectangular box (either with
or not with a border) that surrounds the content of the
element.
|
|
100% 100% |
Places the lower right corner of the image in the lower
right corner of the element.
|
|
33% 66% |
It's getting bit tricky. The point 33%
across and 66% down the image is to
be placed at the point 33% across and 66% down
the element.
|
|
7cm 14cm |
No, you cannot use inch - a metric cm (=centimeter, 1 cm
equals to about 0.4 inch) unit only,
without a comma in between, of course.
The upper left corner of the image is placed 7 cm
to the right and 14 cm below the upper left
corner of the element.
|
|
33% |
If only one percentage value is given,
it sets the horizontal position only, and the
vertical position will be automatically set to 50%.
This particular example becomes equivalent to
33% 50%.
|
|
7cm |
If only one length value is given,
it sets the horizontal position only, and the
vertical position will be automatically set to 50%.
|
|
50% 2cm |
Yes, that is correct. Combinations of length and
percentage values are allowed, perfectly functional.
Previous example then becomes equivalent to
7cm 50%.
Also, negative positions are allowed - think
about layout design possibilities, indeed!
|
|
top left |
The same as 0% 0%.
No, you cannot mix & match these keywords
with percentage values, or length values. Either keywords only or
[ percent and/or length combinationv ] is valid expression.
|
|
left top |
The same as 0% 0%
and top left.
It is perfectly o.k. to switch the order of Keyword.
|
|
right toptop right |
The same as 100% 0%.
|
|
leftleft centercenter left |
Following the same convention,
they're all equal to 0% 50%
|
|
centercenter center |
The same as 50% 50%.
|
|
rightright centercenter right |
They're all equal to 100% 50%
|
|
bottom leftleft bottom |
The same as 0% 100%.
|
|
bottombottom centercenter bottom |
They're all equal to 50% 100%
|
|
bottom rightright bottom |
The same as 100% 100%.
|
|
Now, in following example, the image, html.syntax.gif, is placed in the
lower right corner of the screen/canvas, and the image will
stay at the lower right corner of the screen even when
the user scroll the page down.
|
BODY {
background-color: #FFF;
background-image: url(html.syntax.gif);
background-attachment: fixed;
background-position: 100% 100%
}
|
|
|
|
|
|
{ background :
+ background-color |
background-image |
background-repeat |
background-attachment |
background-position
}
|
|
| |
By now, you should be wondering whether there is any shorthand/combined property
that would control all above background properties
in a single shot. You have the answer -- background.
BTW, do not include '+' sign in front of background
-- it is CSS1 grammar saying 'at least 1 or more.'
The minimum required for
background property is
background-color (value only,
not the expression itself) - other
values can be either specified or omitted.
For example,
|
BODY {
background-color: #FFF;
background-image: url(html.syntax.gif);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 50%
}
|
|
is equivalent to
|
BODY {
background: #FFF url(html.syntax.gif) repeat-x fixed 50%
}
|
|
Also background property is not very
keen on the order of values, and following will be treated as exactly
the same as above example. (However, for your own benefit,
make a habit of using a consistent order for clarity, either you include
an element(s) or not)
|
BODY {
background: url(html.syntax.gif) 50% fixed repeat-x #FFF
}
|
|
|
|
Synopsis
-
- font-family
- font-style
- font-variant
- font-weight
- font-size
- font
The most common use of style sheets is to define font
characteristics for displaying a part/block of text,
and each characteristic would
represent a group of font-related formatting instructions so that
you don't have to repeat instructions per formatting incident
(as in HTML 3.2 standard).
Keep in mind that because there is no accepted, universal
taxonomy of font properties, matching of properties to
particular font faces must be done carefully. Bottomline
is that it is always prudent to avoid using special font faces
and go for general, well-known font faces (i.e., consistency
and functionality).
Here, keep in mind that a 'font-family' (such as sans-serif for example)
consists of many possible 'font faces' (such as arial,
tahoma, helvetica, etc. for example) that share a sans-serif
font characteristic.
When your font property expressions are loaded in the audience's browser,
the font properties are then matched
in a well-defined order (see below) to insure that the results of
this matching process are as consistent as possible
across various browsers.
- font-style is tried first in the matching process.
For example, italic style
you define for font 'xyz' will be displayed properly only
if user's browser font database has a font name
entry with either 'xyz italic'
or 'xyz oblique'.
Otherwise text will not be displayed in italic.
- font-variant is tried next.
- font-weight is matched next.
- font-size is matched next.
|
|
|
|
{ font-family :
[ + [ family-name |
generic-family ], ] |
[ family-name |
generic-family ]
}
|
|
| |
Unlike most other CSS1 properties, font family values and/or generic
family name values are separated by a comma to indicate that
they are alternatives. FYI, font face names are case-insensitive and
upper/lower cases will be treated as the exactly the same.
|
BODY {
font-family: Verdana, Tahoma, Arial,
Helvetica, Geneva, Sans-Serif }
|
|
You can use two types of font-family property values
to define the fonts to be used :
|
Value |
It means |
|
family-name |
The name of a font family. You can mix and choose
whichever font faces you prefer, however keep in mind three
things to make this font-family property work;
- As a rule of thumb, per font-family property definition, mix
the same kind of font faces. For example, concatenate
either sans-serif type fonts only or serif type fonts only, do not
mix different font familis together. Technically, you can mix
and match, but that is not a good idea in the long run - you'll
be confused which style would display which way.
- Within the concatenation,
the order is equally important. If the first font face
listed in the font-family is available in the user's
computer, it will be used without further attempting remaining
font faces in the concatenation. If not, second font face will be
tried, and third and so on till the concatenation exhausts.
If no match is found, the default font face in user's browser
setting will be used.
Thus the order of concatenation
is important to get your your page displayed as you originally intended.
This also
tells that you should start the concatenation with the most
common font faces you'd expect in your audiences' computer.
Try not to use specialty font faces that you love dearly,
since there is no gauruntee that your audiences would have
exactly the same taste in typography to yours.
- You may argue that all your pages are strictly intended for
the audience using the Microsoft Windows platform, and that's why all
your font-family property values are strictly limited to only
true font faces comes with the Microsoft Windows.
However
you'd be quite suprised if you examine access logs for your
pages to find out that substantial portion of your
audience are using anything
other than Microsoft Windows platform such as Linux, Unix (all
garden varieties), Mac, VM, BeOS, etc. not to mention about
audiences using non-english character-based browsers.
You don't have to, but it is always a good idea to include
most common font faces from each platform (of course, the
same kind of font family -- see a. above), at least. For example,
for sans-serif font face, Arial for Microsoft Windows,
Helvetica or Lucida for Unix, and Helvetica for Mac and BeOS, etc.
|
|
generic-family |
Instead of assigning explicit font face names, you can
simply assign a font family name and expect the user's
browser will search, find and use a font face from
the user's computer to match the assigned font family.
This approach is kind of care-free, but you never know
what kind of font face(s) your audience would
have in their computers, i.e., your milage might vary.
You should consider this generic font family approach
as a last alternative. (Use explicit font faces if possible)
Valid values for defining generic families are:
- serif
- such as Times New Roman
- sans-serif
- such as Arial, Helvetica
- cursive
- such as Zapf-Chancery (i.e., decorative)
- monospace
- such as Courier (i.e., typewriter)
- fantasy
- such as hard-to-classify faces like Grunge or Western
|
|
In case that a font face name contains whitespaces, the font face name
should be quoted:
|
BODY {
font-family: "Book Antiqua",
Serif, "New Century Schoolbook" }
|
|
In my case, I named most of my styles using
a font-family category scheme, and
that seems help my often-AWOLing memory. :-)
|
.ssRes { /* Sans-serif-Red */
font-family: Verdana, Tahoma,
Arial, Lucida, Helvetica, Geneva, Sans-Serif }
.siBls { /* Serif-italic-Blue */
font-family: "Book Antiqua", Palatino,
"New Century Schoolbook", Bodoni, Serif }
.mPu { /* Monospace-Purple */
font-family: Courier, Monospace }
|
|
|
|
|
|
{ background-color : color_value }
|
|
| |
background-color property describes, apparently, the
background color of an element. For format of
color_value,
please refer to above section.
|
H3 { background-color: #FF0 }
|
|
|
|
|
|
|
