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”>
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;
Search WWH ::

Custom Search