Import
Inline
Styles can be declared within the HTML document. For example,
|
<p style='font-family:verdana; font-size:16;'>This is font size 16.</p>
|
The above HTML code renders the following:
This is font size 16.
Embed
Styles can be embedded within the HTML (usually within the <head> tag). For example,
|
<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>
<body>
<div>
The background color is red
</div>
</body>
|
The above HTML code renders the following:
The background color is red
External link
In this case, all CSS declarations are stored in a file external to the HTML document. That file typically has an extension of .css. Within the <header> .. </header> tags of the HTML document, you include the following declaration:
<link rel=stylesheet type="text/css" href="external-stylesheet.css">
This will apply the CSS delarations stored in 'external-stylesheet.css' into the HTML document.
Import
External CSS declarations can also be imported into an HTML document. To do so, use the @Import command. The syntax is:
<STYLE TYPE="text/css">
<!--
@import url(http://www.mysite.com/style.css);
-->
</STYLE>
The @import command was initially used to serve up different stylesheets to different browsers. However, this is no longer applicable today. Nowadays, @import is typically used as a way to include additional CSS stylesheets. If multiple CSS files are called by @import, the stylesheets that are imported later have a higher priority when there is a conflict (please see the CSS Cascade page for more details).
Next: CSS Media Types
Copyright 1keydata.com 2007, 2008, All Rights Reserved. Privacy Policy