What is CSS? - HTML5 - page 25

workinG wiTH css PLaceMenT
As mentioned earlier, CSS rules can be integrated into an HTML page in a number of ways: as an
external style sheet, embedded within the HTML page itself, and inline as an attribute within the
tag. This section takes a look at each approach in turn.
external style sheets
External style sheets are used to provide a consistent look-and-feel to any number of related pages, up
to and including an entire website. An external style sheet is connected to an HTML page in one of
two ways: either with a <link> tag, or with an @import directive within a <style> tag. For example,
say you wanted to include the CSS rules written in a file called main.css . The <link> syntax would
look like this:
<link href=”styles/main.css” type=”text/css” rel=”stylesheet” />
The href attribute provides the path to the external style sheet, and type specifies the kind of docu-
ment the browser can expect. The relationship of the HTML page to the linked file is defined by the
rel attribute; the two possible values are stylesheet and alternate stylesheet .
If you wanted to use the @import syntax, you would write code like this:
<style>
@import { url(“styles/main.css”); }
</style>
Notice that @import is actually a CSS rule with the single url property, written somewhat differ-
ently from standard CSS declarations. When used with an HTML page, the @import rule must be
within a <style> tag.
Complex site designs often use the @import rule within an external style sheet to
include additional style sheets. When used in an external style sheet, the @import
rule does not require a <style> tag.
So when do you use <link> and when do you use @import ? It really is a matter of choice at this
point in time. All modern browsers recognize both options. I prefer to use the <link> syntax
because it involves a single tag instead of a tag and a rule when associating an external style sheet
with an HTML page, and save @import for incorporating additional style sheets into CSS files.
Whichever technique you use, external style sheets have the tremendous advantage of being able to
affect multiple HTML pages simultaneously. Change any CSS rule, save the external style sheet,
publish it, and immediately the modification can be seen by any site visitor to any of the associ-
ated pages. You can see why external style sheets are widely used by web designers across the
industr y.