Posts
Connecting your style sheet to your HTML document is as easy as using the
<link> tag, which establishes a relationship between documents. Here is the code:
<head>
<title>Black and White Page Example</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
When the browser renders your page, it reaches the link tag, then retrieves
the style sheet document and renders the styles. After the style sheet is
downloaded, it is cached and reused without a new call to the server.
The external CSS document should not contain any HTML markup in it at all.
The only content it has is style rules and comments. So if you got all riled up
and put some <style></style> tags in the .css file, remove them! With HTML
markup in the style sheet, the browser cannot properly render the page styles.
Obviously, using external style sheets is the best method for a website of any
number of pages greater than one. Every page will call the style sheet and
apply the styles, making the styles consistent throughout the website. If you
ever want to change any piece of presentation, you just change the style sheet
and the whole site changes. How in the world did we ever survive without
this? Those were dark days pre-CSS!
Linking to an external style document with @import
Like using the <link> tag to link to an external CSS document, you can
use the @import directive through the <style> tag to link to external CSS
documents.
<head>
<title>Black and White Page Example</title>
<style type="text/css">
@import url(“stylesheet.css");
</style>
</head>
The Importance of type and rel
One of the most common errors for beginners is to omit the type or rel
attributes. So keep these points in mind:
1. Always indicate type="text/css" in the <link> or <style> tags. Never
use type="text/plain".
2. In the <link> tag, always indicate rel="stylesheet".
Forgetting either could end up causing your browser to render your pages
incorrectly.
The @import directive can also be used in an external style sheet. In this case,
again, no HTML tags are needed. Simply use the directive as the first declaration
in the document:
@import url("stylesheet.css");
If you use the @import directive in any of your style sheets, it needs to be the
first declaration. If it is after any other style rules, the browser will ignore it.
A useful advanced technique is to import multiple style sheets from one CSS
document using the @import rule in that style sheet.
0 comments:
Post a Comment