HTML and CSS Reference
In-Depth Information
Determine what type of style sheets or other formatting to use in your
Web pages.
Determine which styles will be common across the Web pages in the Web site.
Plan
Ahead
•
Web
sites should strive for a consistent experience across all pages. For instance, if tables
are used, the style of the tables should be common or consistent throughout the Web
site. A font-family style is also something that is generally common across all Web
pages in a Web site. Consider using external (or linked) style sheets for styles that
will encompass all Web pages in a multipage Web site. Because it is a four-page Web
site, the project in this chapter is a perfect application for external (or linked) style
sheets. You will use an external style sheet in this project to set styles for the body,
paragraphs, links, images, and tables.
(Note: Although it is important to maintain
consistency across a Web site, the three tables created in the Web pages in this project
will all be different, so that you will learn different table techniques.)
Identify elements that need to differ from the style used across the Web site
•
.
º
Consider using embedded style sheets for Web pages in which the styles apply only
to one particular Web page. You can use embedded style sheets when you want
elements within one Web page to look similar to one another. In the projects in this
chapter, however, you do not use embedded style sheets.
º
Consider using inline styles for any style that is unique for a single element, such as
when you want one word or paragraph on one Web page to look different than all
others. In this project, you will use inline styles to align images and vary some text.
Adding an External Style Sheet
Adding Comments
If your instructor wants
you to add your name to
the CSS code file, you can
do that by adding your
name within a comment
line. Use /* and */ to
surround the added
information (e.g., your
name), marking it as a
comment.
The next step is to create an external style sheet (.css file) and link it to the Web pages
where it will be used. The external (linked) style sheet will set the style for body text, para-
graphs, links, images, and table format.
Because the font-family and font-size style is used for all text on all Web pages, you
can put that style in the body element, identified on the external style sheet as body. All
links (identified using the a tag in the external style sheet) will be black through all states
(normal, visited, and active) and use no text decoration (i.e., the text links will not be under-
lined). Note that you overrode this style on the home page by adding an inline style to
the e-mail address link. Your inline style adds underlining to the e-mail link. Most of the
tables will have a 65% width relative to the window. The exception is the navigation bar
table that you created earlier, which will be slightly smaller (60% width). Finally, you will
use classes, as discussed in Chapter 3, to have more control over particular elements of the
tables in the Web site. You will use a class named menu for the navigation bar links. You also
want to separate the navigation bar table cells with pipe symbols. To do that, you will use
classes named menuicon and menupipe to specify the width of each of those cells. Note that
the classes are named with a period (.) after the element is defined. Thus, the table.menu
statement identifies a class named menu that will be used with the table elements.
Create and link an external style sheet.
The external style sheet is the most powerful style sheet and has the lowest precedence. You
can easily create a common look across a Web site by creating an external (.css) style sheet
and linking it to all Web pages.
Create the .css file,
Plan
Ahead
•
. The first step is to create the external style sheet itself. This file, which
contains all of the style statements that you want, has to be saved with a filename
extension of .css. Make sure to store this file in the same folder as the other Web pages.
Link the external style sheet onto the Web pages
•
. The second step is to link the
external style sheet (.css file) onto the Web pages where you want the styles to be
applied. The link statement is placed between the <head> and </head> tags.
