HTML and CSS Reference
Jared Adam's Adventure
Travel home page with
embedded style sheet
navigation bar with styles
for paragraph of
text and image
Creating an External Style Sheet
The external style sheet is the most powerful and the lowest precedence style sheet. With this
style sheet, you can easily create a common look across a Web site by creating the external
(.css) style sheet and linking it into all other Web pages. In this project, you have multiple
pages where you want images to display a larger version when you hover over them.
Create the external style sheet.
The first step is to create the file 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
Link the external style sheet into the Web pages.
The second step is to link the
external style sheet (.css file) into the Web pages where you want it. The link
statement is placed between the <head> and </head> tags.
Add comments to your code as needed.
The CSS code added to this external style
sheet is complex. Comments help you remember and explain what you have done.
The comments will not display on the Web page, but they will stay in the file with
the CSS code.
Adding Pop-up Images with an External Style Sheet
As you learned in previous chapters, an external style sheet is a separate text file that
contains the style statements that define how the Web page elements will appear across
multiple pages. After you create the text file with all of the desired style statements and
comments, you save the file with the file extension .css to identify it as a CSS file. You then
use a <link> tag to link the external style sheet to the Web pages to which you want to
apply the style.