HTML and CSS Reference
In-Depth Information
Style Storage
Deciding how you will store your CSS declarations is a two-part question:
1.
Where on the server will the files live?
2.
How many style sheets will you have, and what exactly goes in each one?
The Path to Your CSS
The answer to the first question may depend, to some degree, on the back-end server and
application configuration you are using. In some web server setups, the server path to the CSS
files have a direct relationship with their URLs. In other setups, including several of the mod-
ern web application frameworks like Django (
http://djangoproject.com
) and Ruby on Rails
(
http://rubyonrails.com
), the URL structure is different from the server directory structure.
In either case, you'll want to consider both the ease of access for you and your team, as well as
the URL itself.
Although it's certainly not necessary, it is an established convention to store all CSS files
in one directory, often named
css
,
styles
, or something similar. Many times, this directory is
accessed at a URL directly off the root level of the site, as in
http://yoursite.com/css/
or
http://yoursite.com/styles/
. Some designers and developers prefer to maintain a directory
that contains all the linked resources of the site (such as CSS, images, or JavaScript), sometimes
called
resources
,
media
, or
site
. In this case, the URL structure often looks like
http://
yoursite.com/media/css/
,
http://yoursite.com/resources/images/
, or
http://yoursite.com/
site/js/
. Where you store your CSS files, in terms of both the path on the server and the URL
path relative to your domain root, is entirely up to you, but we do recommend keeping all CSS
files together in one directory and sticking with a structure once you've chosen one. Doing so
will help you develop habits that increase your production effectiveness.
Using Multiple Files As One Style Sheet
Deciding how many style sheets to maintain and what they should contain is more difficult. In
a small, simple site it may be fine to keep all of your declarations in one file. But as sites grow
larger, there seems to be a point at which it becomes simpler to deal with multiple files than it
is to find the declaration or attribute you're looking for in a mile-long single style sheet.
Because CSS includes the ability to import other style sheets, it's relatively simple to link
to one style sheet from your (X)HTML file, and then import additional style sheets from that
one. Take a look at the following example:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<link rel="stylesheet" type="text/css"
➥
href="http://yoursite.com/media/css/base.css" />
