HTML and CSS Reference
In-Depth Information
Where Do I Create My CSS?
Most of the time, you should create style rules in an external style sheet attached to the web page. But styles can
also be defined in:
<style>
block
•
A
style
attribute
•
A
I'll cover each way of adding styles, but let's begin with the most important—external style sheets.
Using External Style Sheets
This is the most common and effective way of using CSS. The styles in external style sheets affect all pages to
which they're linked. Typically an external style sheet is used for an entire site or subsection of a site, making
it easy to update multiple pages by editing only one file. What's more, the browser caches the style sheets, so
they need to be downloaded only once regardless of how many pages are viewed in your site. This speeds up the
display of subsequent pages and reduces bandwidth usage. You can link more than one style sheet to a page.
Create your style rules in a separate file, and save the file with the file name extension
.css
. An external style
sheet can be anywhere within your website, but the normal practice is to put all style sheets in a dedicated folder
called
styles
or
css
.
You attach an external style sheet in the
<head>
section of your web page using a
<link>
tag or a CSS
@import
rule. A
<link>
tag looks like this:
<link href="css/basic.css" rel="stylesheet">
In HTML5, the
<link>
tag requires two attributes:
href
This is the path to the external style sheet.
rel
This tells the browser that the file is a style sheet. Note that the value
stylesheet
is
written as one word. This attribute also accepts the value
alternate stylesheet
, but
it's of little practical value because browsers give no obvious indication of a choice of
styles, and the user needs to select the alternate styles manually on each page.
To validate in HTML 4.01 and XHTML 1.0, you also need to add
type="text/css"
in a
<link>
tag. he
type
attribute was dropped in HTML5 because CSS is the only type of style sheet used in web pages.
If you're using an HTML editor, such as Dreamweaver or Expression Web, the
<link>
tag is created
automatically when you select the option to attach a style sheet.
The alternative to using a
<link>
tag is to use a CSS
@import
rule. This technique was frequently used in the
past to hide styles from older browsers that didn't support
@import
. All current browsers now support
@import
,
so there's no real advantage in using it to link a style sheet directly to a web page. However, I have included it here
so you know what it's for if you come across it in an existing site. The
@import
rule goes inside an HTML
<style>
block in the
<head>
of the page like this:
<style>
@import url(css/basic.css);
</style>
The location of the style sheet is specified by putting it between the parentheses of
url()
. he path to the
style sheet can optionally be enclosed in quotes.
The main purpose of
@import
is to import styles from one style sheet into another. This can be useful when
you organize your rules in several style sheets. Instead of linking each style sheet separately to your web pages,
you can link just one, which then imports the rules from the other style sheets. If you do this, the
@import
rule
must
come before any other style rules in the external style sheet. Also, because it's in an external style sheet,
