HTML and CSS Reference
In-Depth Information
To Add an Inline Style for Color
The following step shows how to enter an inline style to add a blue color (#020390) in a bold font-weight to
provide visual impact and call attention to the company name, Underwater Tours by Eloise. With this inline style,
you use the <span> </span> tags. The
<span> </span>
tags create a container into which a user can add an inline
style. The <span> tag provides a finer level of control for styles than the <div> </div> tags, which define block-
level structure or division in the HTML document. The <span> tag tells the browser to apply the chosen styles to
whatever is within the <span></span> container.
Notepad++
Save button
1
•
With the insertion
point right after
the > in <p> on
line 33, type
<span
style="color:
#020390; font-
weight: bold">
(Figure 3-22).
•
With the insertion
start span
<span> tag
to indicate
user-defined
container
inline style
that changes
color and
font-weight
of text
point right after the
last e in Eloise on line
33, type
</span>
(Figure 3-22).
What other
font-weights
could I have
used?
The font-weights are
normal, bold, bolder,
and lighter. Additionally, you can add values of 100-900 in which 400 is the same as normal, and 700 is the same as bold.
If you don't specify a font-weight, normal is the default.
end span
</span> tag to
indicate end of
user-defined
container
line 33
Figure 3-22
What different colors can I use for text?
There are a variety of colors that you can use for headings, text, and backgrounds. You can name the color by color
name or hexadecimal code. See Figure 2-27 on page HTML 64 for examples.
To Save an HTML File
With the HTML code for the Underwater Tours by Eloise home page complete, you should save the changes
to the file. The following step shows how to save an HTML file that has been previously saved.
1
Click the Save button on the Notepad++ toolbar to save the most recent version of underwatertours.html on the
same storage device and in the same folder as the last time you saved it.
Validating the HTML, Viewing the Web Page,
and Testing Links
After you save the HTML file for the Underwater Tours by Eloise home page, it
should be validated to ensure that it meets current HTML5 standards and viewed in a
browser to confirm the Web page is displayed as desired. It is also important to test the two
links in the Underwater Tours by Eloise home page to verify that they function as expected.
