HTML and CSS Reference
In-Depth Information
text-indent, border-width, and font-style. For each property, the declaration includes a
related
value
, which specifies the display parameters for that specific property.
Each property accepts specific values, based on the styles that property can define.
The property, font-color, for example, can accept the value, navy, but cannot accept the
value, 10%, because that is not a valid color value. In the next section of this chapter, you
will change the heading color to the color #384738 for the h2 heading. Using an inline
style in this case is appropriate because there is only one heading to change on the Web
page. If you had many headings to change, an embedded or external style sheet would be
more appropriate. This will be discussed in later chapters.
Inline Styles
An inline style is used to define the style of an individual HTML tag.
For example, to change the style of a horizontal rule, you could add an inline style with
the <hr /> (horizontal rule) tag as the selector and a declaration that defines new height,
width, and background-color styles, as shown here:
<hr style="height: 8px; background-color: #384738; width: 50%" />
Because inline styles take precedence over the other types of style sheets and affect the
style for individual HTML tags, they are helpful when one section or one element of a
Web page needs to have a style different from the rest of the Web page. In this chapter's
project, an inline style is used to change the color of the <h2> heading, the bullet list type,
the footer, and the horizontal rule styles on the Web page.
Now that you understand how style sheets and inline styles function, it is time to
think about adding an image to enhance the appearance of your Web page.
Using Web Page Divisions
It can be helpful to break up your Web page into divisions (or sections), which
allows you to apply styles to different Web page elements. Throughout this topic, you
sometimes use the start <div> and end </div> division tags as a container in which to
insert images. You also use the new HTML5 layout elements to help structure your Web
page into sections. As mentioned earlier, these new semantic elements are useful because
the name of the tag actually reflects the purpose of the tag. For example, the <header> tag
is used to display text at the top (or the header) of the Web page. Utilizing structural and
division tags allows you to add styles such as centering your image or adding background
color to your images.
Find appropriate graphical images.
To use graphical images, also called graphics, on a Web page, the image must be stored
digitally in a file. Files containing graphical images are available from a variety of sources:
Some Web sites offer images that are free and are not subject to copyright; these
Plan
Ahead
•
images are considered to be in the
public domain
. Other Web sites offer images that
require permission from the copyright owner or a fee for use.
You can take a picture with a digital camera and
•
download
it, which is the process of
copying the digital picture from the camera to your computer.
With a scanner, you can convert a printed picture, drawing, or diagram to a digital file.•
•
If you receive a picture from a source other than yourself, do not use the file until you
are certain it does not contain a virus. A
virus
is a computer program that can damage files
and programs on your computer. Use an antivirus program to verify that any files you use
are virus free.
(
continued
)
