HTML and CSS Reference
In-Depth Information
You can have multiple occurrences of the style element within the head of the
document, and you can even import some styles with these elements, as discussed next.
Importing Style Sheets
Another way to use document-wide style rules rather than type the properties directly within
a <style> tag is to import them. The idea is somewhat similar to linking. An external style
sheet is still referenced, but in this case, the reference is similar to a macro or inline expansion.
The syntax for importing a style sheet is @import , followed by the keyword url and the
actual URL of the style sheet to include, and terminated with a semicolon:
@import url(corerules.css);
Though not advisable stylistically or for ensured browser compatibility, the specification
also allows us to set a string after @import of the URL, like so:
@import "corerules.css";
The @import directive must be included within a <style> tag and it must precede all
other types of rules in a style sheet. In practice, we might see an intermixture of imported
and embedded styles within a single <style> tag, as shown in this example:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Imported Styles </title>
<style type="text/css" media="all">
@import url(corerules.css);
@import url(linkrules.css);
h1 {font-size: xx-large;
font-family: Sans-Serif;
color: black;
text-align: center;
border-bottom: solid 4px orange;}
p {text-indent: 1em;
text-align: justify;
line-height: 150%;}
<div id="page">
<h1> HTML with Imported Style </h1>
<p> Cascading Style Sheets 2.1 as defined by the
<a href=""> W3C </a> provides
powerful page layout facilities. The technology
Search WWH ::

Custom Search