HTML and CSS Reference
In-Depth Information
Importing Style Sheets
On large Web sites that involve hundreds of pages, you might decide to use different
styles for different groups of pages to give a visual cue to users about where they are on
the site. One way of organizing these different styles is to break them into smaller, more
manageable units. The different style sheets then can be imported into a single sheet. To
import a style sheet, add the command
@import url(
url
);
to the style sheet file, where
url
is the URL of an external style sheet file. For example, a
company might have one style sheet named
company.css
that contains basic styles used
in all Web pages, and another style sheet named
support.css
that only applies to Web
pages containing technical support information. The following code added to a style
sheet imports both files:
@import url(company.css);
@import url(support.css);
The
@import
statement must always come before any other style rules in the style
sheet. When a browser encounters the
@import
statement, it imports the content of the
style sheet file directly into the current style sheet, much as if you had typed the style
declarations yourself.
The
@import
rule has the same impact as adding multiple
link
elements to the
HTML file. An advantage of the
@import
rule is that it simplifies your HTML file (since
you only need to access one style sheet file), and it places all style rules and decisions
about which style sheets to include and exclude in an external file. This is an important
distinction if you want to put all of your design choices in the external style sheet file,
which you can then easily edit and modify without having to touch the HTML document.
Embedded Style Sheets
Another type of style sheet created by a Web page author is an embedded style sheet,
in which the styles are inserted directly within the
head
element of an HTML document
using the
style
element
<style type=”text/css”>
styles
</style>
where
styles
are the rules of the style sheet. For example, the following embedded
style sheet applies a rule to display the text of all
h1
headings from the current document
centered horizontally and in red:
<style type=”text/css”>
h1 {
color: red;
text-align: center;
}
</style>