|
Advanced:
Fonts, Colors, Backgrounds . . . CSS vs. HTML
Let's
start by making a few assumptions. First, you are reading
the "advanced" section of Build Your Site, which
likely means that you have some experience with HTML and
the Internet. Second, if the first assumption is correct,
then you have likely heard about CSS, which is the acronym
for Cascading Style Sheets. If you have heard of CSS, you
may have begun to form an opinion of it, and depending on
the type of exposure to CSS that you have had, you may even
think that CSS is just another fad-ish, complicated piece
of the Web development alphabet soup.
Actually,
little could be farther from the truth: CSS is neither complicated
nor advanced. Instead, it simplifies the design, construction,
and maintanance of Web sites. As for it being a fad, CSS
has begun to enjoy widespread support (though still not
full support), so its waning is unlikely.
CSS
introduces some -powerful- features that can make
creating and managing your Web pages so much easier than
with HTML by itself that it's almost laughable. CSS does
have a slight learning curve which boils down to two basic
phases. The first phase consists of learning new syntax
to express CSS properties and apply them to HTML. The second
phase is a re-examination of how Web pages have been built
in order to better understand the modular nature of HTML
construction.
Table
of Contents
The
Syntax of CSS
The
Structure of HTML
Abbreviated
CSS1 Reference
The
Syntax of CSS
The
first official CSS1 guideline was released by the W3C (World
Wide Web Consortium: the Internet standards group charged
with directing the development of the Web) in
December 1996.
Currently, the specification has advanced to its iteration
of CSS3. Understanding CSS1 is an excellent way to begin
working through the learning curve because the basic syntax
has not undergone much revision, and what has changed is
easily added to the repertoire of someone who understands
CSS.
We will
also focus on CSS1 in this example because of browser implementation:
Netscape is now battling Microsoft to win back users who
have fled to Internet Explorer because of its greater support
of CSS early after the CSS1 standard was finalized. Meanwhile,
development of CSS continues, and implementation by the
browser makers also continues to catch up. As of this writing,
even Navigator version 4.x (the current iteration of Navigator)
can support much of the CSS1 set. This means that if you
choose to use CSS1, you can be assured that most of the
Web-surfing populace will be able to view your creations
as you intended them to appear.
CSS
is introduced into a document in one of two ways. First,
you can redefine the properties of existing HTML tags. For
example, if you declare font{ color: FF0000; },
the Web browser renders everything between any <FONT>
and </FONT> tag red (FF0000). This makes a rule very
easy to apply through an entire HTML document.
However,
perhaps you want better control of how your rules are applied.
The second way you can introduce CSS into your documents
is by defining a special rule and then applying it to only
the HTML tags that you want rendered according to the rule.
For example, you could declare .myrule{ color: FF0000;
font-size: 10pt;} and then create the HTML to which
you want to apply the rule, such as <P class="myrule">This
text has the rule applied.</P>. When you create
rules in either of these two ways, you are actually defining
a "class". A class can be used to cause
wholesale changes to anything with the same name, such as
"font" in the above examples.
These
classes can be created in one of two places, depending on
the overall plan for your Web site. First, rules can be
created in the <HEAD> section of the HTML document
in which they will be applied. In this case, the rules are
wrapped between <STYLE> tags, as in the following
example:
<STYLE>
.rule1{
color: ff0000;
font-weight: bold;
font-family: arial, sans-serif;
}
.rule2{
font-size: 10pt;
font-variant: italic;
text-decoration: underline;
}
</STYLE>
This
method makes sense on a limited scale, such as when you
have rules that only apply to a single page. To define a
class, first declare its name, followed by an opening curly
brace, and then any rules that apply to that class. To indicate
the end of the class, insert a closing curly brace. The
order of this process isn't critical, but may be a factor
later when you become more comfortable with CSS and want
classes to "inherit" rules from other classes.
The
second way classes can be created is by defining them in
an external file. This makes the most sense when you have
rules that you want to apply to more than one page. By defining
these rules outside of any specific page, you can then easily
include them in any page where they apply.
Simply create a text file and populate it with each rule
in almost the same way as the first. Here is an example:
.mybluetext{
color: 0000ff;
}
.myhugetext{
font-size: 30pt;
}
a:link{
font-weight: bold;
color: 0000ff;
text-decoration: none;
}
a:hover{
color: ff0000;
background-color: ffff55;
}
h1{
font-size: 15pt;
}
This
method is almost the same as the first, with one exception:
the classes are NOT wrapped in <STYLE> and </STYLE>
tags. The entire file is considered to be a style definition,
so no indicator needs to precede or follow the definitions.
To continue
the example, let's say the file is saved as "mystyle1.css"
in a directory name "style" (though you can save
it wherever you want, as long as it can be reached from
the file that needs it). In order to attach these classes
to a file, add the following line somewhere between the
<HEAD> and </HEAD> section of each page in which
the classes to apply:
<LINK
REL="stylesheet" TYPE="text/css" HREF="/style/mystyle1.css">
For
the final step, apply the rules to specific HTML tags. This
is only necessary when you use a name that has no meaning
in the HTML set, such as "mybluetext", or "myhugetext"
in the example above. In order to apply these to a <TD>
tag within a table, for example, use the code <TD CLASS="mybluetext">,
or if you want a <DIV> to have the rule applied, add
<DIV CLASS="myhugefont">.
Notice
that the definition above had a period "." in
front of any defined name (.mybluetext). The period is just
for a defined section and identifies anything that is NOT
a redefinition of an existing HTML tag. When adding it in
a CLASS property (such as with these two examples), do not
use the period. This will become second nature after practicing.
Notice that in the
example above, definitions exist for "a:link",
"a:hover", and "h1", each of which is
a redefinition of an existing HTML tag. This is important
because these classes do NOT have to be applied to any specific
HTML tag.
Let's
examine the "h1" example. After the above CSS
file is included into an HTML document, any time the browser
renders an <h1> tag, it will apply the rules defined
in the "h1" class. For example, <h1>This
text will appear in 15 point font.</h1>.
Also,
any time an <A> appears in the HTML, it will be rendered
as blue, bolded text, without an underline. For example,
<A HREF="#">This
is a link appearing in blue text without an underline</A>.
In addition, if you are using Internet Explorer, notice
that the background color turns a shade of yellow and the
text color turns red when you place the cursor over the
link above. This behavior is ignored by Navigator. This
illustrates some of the frustration between the different
ways each browser implements CSS.
Rules
can also be applied without defining a class by declaring
any applicable rule inside the specific tag where it will
be used. This is done by wrapping the individual rules in
a STYLE property of a specific tag, such as FONT in this
example:
<FONT
STYLE="background-color: 00ff00; color: 0000ff; font-weight:
bold;">This
text is blue with a green background, and it is in bolded
type.</FONT>
The
Structure of HTML
When
you create a Web page, you are actually building a skeleton
that contains many smaller modules that make up the page.
Therefore, by applying rules to a Web page in modular fashion
with CSS, creating a Web page is much easier and faster.
Consider
the following example:
Welcome
to Stuff
Stuff
is good, stuff is great, I like stuff. Since I like
stuff so much, I will say another sentence reinforcing
my like of stuff. I like stuff. Really, I do, a lot.
For
more information about stuff, click a link below.
Link
to more stuff, this
is a great link to stuff.
Link
to even more stuff,
this is another great link to stuff.
|
Here
is the code used to create the example above (using HTML
only):
<FONT SIZE=5><FONT COLOR=882222><FONT
FACE="verdana, sans-serif"> <b>Welcome to Stuff</b>
</FONT></FONT></FONT><BR><BR> <FONT SIZE=2><FONT
COLOR=777777><FONT FACE="verdana, sans-serif"> <I>Stuff
is good, stuff is great, I like stuff. Since I like stuff
so much, I will say another sentence reinforcing my like of
stuff. I like stuff. Really, I do, a lot.</I> </FONT></FONT></FONT><BR><BR>
<FONT SIZE=2><FONT COLOR=777777><FONT FACE="verdana,
sans-serif"> <I>For more information about stuff, click
a link below.</I> </FONT></FONT></FONT><BR><BR><BR>
<FONT SIZE=2><FONT COLOR=777777><FONT FACE="verdana,
sans-serif"> <I><A HREF="#"> <FONT SIZE=2><FONT
COLOR=5555EE><FONT FACE="verdana, sans-serif"> <I><B>Link
to more stuff</B></I> </FONT></FONT></FONT></A>
<I>, this is a great link to stuff.</I> </FONT></FONT></FONT><BR>
<FONT SIZE=2><FONT COLOR=777777><FONT FACE="verdana,
sans-serif"> <I><A HREF="#"> <FONT SIZE=2><FONT
COLOR=5555EE><FONT FACE="verdana, sans-serif"> <I><B>Link
to even more stuff</B></I> </FONT></FONT></FONT></A>
, this is another great link to stuff.</I></FONT></FONT></FONT>
This
example could be redone using a CSS approach. First examine
the type of content being created. Notice that the page
is comprised of a title, a couple of paragraphs, and two
links. So, using three basic objects and rules defining
these objects, the page could be created as follows:
The
title will be achieved with an <H1> tag, the paragraphs
will be created using <H3> tags, and of course, the
links using the <A> tag. After defining some basic
rules for those three tags, we come up with the following
result:
Welcome to Stuff
Stuff is good, stuff is great, I like
stuff. Since I like stuff so much, I will say another
sentence reinforcing my like of stuff. I like stuff.
Really, I do, a lot.
For more information about stuff, click
a link below.
Link to more stuff,
this is a great link to stuff.
Link to even more stuff,
this is another great link to stuff.
|
Here
is the code to create the example above (using CSS):
<STYLE> H1,H3,A:link,A:active,A:visited{font-family:verdana,sans-serif;
font-size:20pt; letter-spacing:-1px; color:882222;} H3{font-size:10pt;
color:777777; font-weight:normal; font-style:italic;} A:link,A:active,A:visited{color:
5555ee; font-weight:bold; font-size:10pt;} A:hover{color:ff0000;
background-color:eeeeaa;} </STYLE> <H1>Welcome
to Stuff</H1> <H3>Stuff is good, stuff is great,
I like stuff. Since I like stuff so much, I will say another
sentence reinforcing my like of stuff. I like stuff. Really,
I do, a lot.</H3> <H3>For more information about
stuff, click a link below.<BR><BR><BR>
<A HREF="#">Link to more stuff</A>, this is
a great link to stuff.<BR> <A HREF="#">Link
to even more stuff</A>, this is another great link
to stuff.</H3>
This
example reveals that even on a small scale, CSS is more
efficient, especially considering that it has extra functionality
over the HTML example. CSS's real power becomes apparent
when it is applied to an example that is more than a couple
of paragraphs and links. CSS also makes available some aspects
of control that HTML does not, such as letter spacing (which
is not currently supported by Netscape, but if you are browsing
with Internet Explorer, you might notice that the spacing
between the letters in the two examples above is different.)
These
examples simply introduce what CSS can do, but with practice,
you will be able to make far more interesting use of the
technology available to you by being able to position things
where you want, move them around, make them appear and disappear,
bury them behind other content, size them dynamically, and
so forth.
Abbreviated
CSS1 Reference
The
last thing you need in order to begin using CSS is a list
of the syntax. While the following is by no means comprehensive,
it introduces the basics. Combining this with the examples
above should give you the means to begin creating your own
style classes.
This
short reference sheet exposes the primary properties of
the font and background elements. The CSS1 specification
covers a lot more ground, so when you are ready to begin
altering properties of other elements within your HTML,
you will want to have a more in depth reference chart at
your disposal. Click
here to visit the W3C.org, the home of the CSS guideline.
|
font family |
verdana, arial, sans-serif, serif, fantasy, etc. (ordered
by your preference.)
i.e., font-family: verdana, arial, sans-serif;
|
|
font style |
normal, italic, oblique
i.e., font-size: italic; |
|
font variant |
normal, small-caps
i.e., font-variant: small-caps; |
|
font weight |
normal, bold
i.e., font-weight: bold; |
|
font size |
<value>mm, <value>pt, <value>px, <value>pc,
xx-small, small, medium, large, xx-large
i.e., font-size: 10mm; |
|
letter spacing |
<value>length-unit, normal
i.e., letter-spacing: -5px; |
|
color |
<hex color>,<name color>
i.e., color: #FFFF00; |
|
background color |
<hex color>,<name color>
i.e., background-color: #FFFF00; |
|
background image |
<url>,none
i.e., background-image: url("my_picture_file.jpg");
|
|
background repeat |
repeat, repeat-x, repeat-y, no-repeat
i.e., background-repeat: repeat-y; |
|
background attachment |
fixed, scroll
i.e., background-attachment: fixed; |
Back
to Build Your Site
Back
to Table of Contents
|
