Lesson 5: Controlling
the Appearance of Text
Now that you
have structured your text and have embedded images and links to bring your
Web page to life, it's time to add some style to your text, to give it
a distinctive look and feel while keeping your content easy to read. The
appearance of text is a large part of the overall design of a Web site.
You don't have to have the same old default font face, and you can adjust
the size of your text to suit your design goals and your audience. In this
lesson, you'll learn how to control the appearance of your text by using
a style sheet, which is the most powerful and time-saving method for adding
style to Web pages.
Introduction
to Style Sheets
A style sheet
is a portion of your HTML page that's reserved for style information. It
can also be a separate text file that your Web pages link to. In this course,
you'll learn how to use an embedded style sheet to control the styles
on each individual Web page.
The code in
a style sheet is CSS, which stands for Cascading Style Sheets. CSS
is a separate language from HTML, but they go hand in hand. CSS is just
as easy to learn, and you'll need at least the basics to create effective
HTML code. The vast majority of Web sites today use CSS, at the very least
for color and text styles. You can control text styles with old HTML tags
that are phased out and discouraged by the World Wide Web Consortium (The
standards body that governs Web languages like HTML), but doing so involves
a
lot more time and effortβ€”and the result is nowhere near as effective
as CSS.
With that little
pitch for CSS out of the way, let's get started with the basics.
Setting
Up a Style Sheet
One of the nice
things about using style sheets is that you can separate your HTML structure
from your style decisions. This makes it easier to make changes to your
Web page design, and reduces the amount of code you need to achieve the
design you're looking for.
What does the "separation
of style and structure" mean? Say you want to change the font face for all
the text on your page, and then you want to make the text a little bit bigger
than it appears by default. You can embed a style sheet in the <head>
tag of your Web page as follows:
<html>
<head>
<title>My Page</title>
<style type="text/css">
body { font-family:
Georgia, serif;
font-size: 15px; }
</style>
</head>
<body>
...all your HTML tags
and page content...
</body>
</html>
There's a lot
going on here that's new to you, but it will soon come fairly easy. The
<style>
tag starts the style sheet. The type="text/css"
attribute is just a syntax requirement--the reason for it isn't important
at this level.
The code you
see inside the <style>
tag is the CSS code.
Understanding
CSS Code
CSS code consists
of rules that determine how an HTML element is displayed on a Web
page. In the example above, there is one rule in the style sheet. It literally
says, "Make all text inside the <body>tag
display with the font face Georgia at 15 pixels".
All style sheet
rules consist of a selector, and one or more properties that
are contained in curly braces: { }. For example, all style sheet rules
follow this general format:
selector { property:
value; }
The selector
is the HTML element that you want to style. You have to drop the HTML tag
brackets to create a selector, and simply write the tag name, such as body,
p, h1, blockquote, etc.
Then comes the braces, which hold your properties and their corresponding
values.
| TIP! Properties and their values |
CSS properties
are pre-defined keywords that act on an HTML tag. Properties then have
values,
which give an exact specification for the property. For example, if CSS
code could create the automobile of your choice, your code might look like
this:
car { type: sedan; color:
red; doors: 4; }
Here, car
is the selector. Type, color, and doors are the properties,
and sedan, red, and 4 are the values for each property.
Using CSS to add style to your Web pages works just like thisβ€”all you have
to do is get to know the names of the properties and the values they accept.
Changing
the Font Face
As shown on
page 102 in your book, you can change the font face for all the text on
a page with one single rule, as the previous example demonstrated, or you
can single out an HTML tag, or multiple HTML tags. First, you should determine
how you want each section of text to appear on your page. You might want
all your headings to be a large, block font, and all your paragraph text
to be a smaller, traditional font. Once you have an idea what you're looking
for, you can get started with your CSS code.
To change the
font face of your Web page text, you use the font-family
property.
The value of this property is the name of one or more font faces that you
want your text to use. Why specify more than one font face? If a visitor
to your site doesn't have the first font face you specify installed on
their computer, it can't display your Web page text with that font. If
you specify a second, third, even forth option, the odds are better that
all users will see your Web page as you intend.
| TIP! Each font face must be separated p { font-family: "Trebuchet If you're unfamiliar with |
For example,
consider the following code:
h1 { font-family: Verdana,
Arial, sans-serif; }
Now, if a visitor
to your site does not have Verdana installed on his or her computer, then
their browser will look for the next font face in the listβ€”Arial. If Arial
is found, the text of your level-one headings will display with this font.
If not, the browser will move to the next option in the list. The value
"sans-serif" is a general font declaration that will work in all browsers,
because it will choose its own default sans-serif font.
Serif
and Sans-serif Fonts
Serif
fonts are those font faces that have "flourishes" at the ends of each letter,
for example:
This is a serif
font.
Note the ends
of each letterβ€”like the T, for example. Instead of straight, even lines,
the letters have pointed designs (the "flourishes") that give serif fonts
their distinctive appearance. Popular serif fonts include:
Times New Roman
Garamond
By contrast, sans-serif fonts are made with straight, even lines
with no flourishes, for example:
This is a sans-serif font.
Popular sans-serif fonts include:
Verdana
Trebuchet MS
Arial
When you choose a font, you should consider the readability of the text.
There are many "fancy" font faces available that might not be appropriate
for paragraph text because they can make your content difficult to read.
Modifying
Font Sizes
As shown on
page 104 in your book, you can also change the font size for any text element.
To set the font size for your text, you use the font-size
property. There are many different values you can specify, but the most
effective choice in terms of creating a consistent display across different
browsers and platforms is to use pixel values. Pixel values start with
an integer, and are then followed by px, with no space in between.
TIP! Most sans-serif fonts |
For example, if
you want your paragraph text to display a little larger than the default
(which is 14 pixels in most browsers), you could write:
p { font-size: 18px;
}
Here, only text
inside of <p>tags
will pick up the style. All other text will be left alone.
If your Web
page contains text inside <h1>
and
<h2>
tags, a few paragraphs and a block quote, you could style each of them
differently, for example:
h1 { font-size: 24px;
}
h2 { font-size: 16px;
}
p { font-size: 12px;
}
blockquote { font-size:
11px; }
Putting
It All together
Let's say you
want all text on your page to display with the font face Georgia, and you
want your paragraphs to display at 15 pixels, and your links to display
just a little bit smaller, at 14 pixels. To achieve this, your HTML and
CSS code will look like this:
TIP! Style sheet code is not |
<html>
<head>
<title>My Page</title>
<style type="text/css">
body { font-family:
Georgia, serif; }
p { font-size: 15px;
}
a { font-size: 14px;
}
</style>
</head>
<body>
...all your HTML tags
and page content...
</body>
</html>
Discussion
Now that you've
been introduced to the basics of style sheets, and setting font face and
font size, you can really put your creative juices to good use. Before
you work through the activity, post your comments to the following discussion
items in the message board to help make sure you're ready to proceed:
In your opinion,
is CSS code easier or harder to understand than HTML?
Is there anything
in this Lecture & Discussion page that isn't clear to you?
Have you ever seen
CSS code before, or dabbled in it? If so, share what you know about CSS
with the class.
No comments:
Post a Comment