External CSS style sheets offer numerous benefits to web site design. This tutorial assumes that you already know something about the use of cascading style sheets. Our focus is on helping you to implement it better with your web site.
First, they centralize CSS rules, which means that making a change in one file affects the entire web site; therefore, site maintenance is much simpler. Second, an external style sheet reduces the amount of web page code, which makes it easier for spiders to dissect the code and get at the content. Third, most browsers cache this file, which speeds up the loading and rendering of a web page.
There are three methods for using CSS styles with your web pages.
An inline style is embedded in an HTML tag like the following. An inline style is typically used when the CSS rule being applied is unique to that HTML tag. An inline style is defined using the style attribute.
<img src="/images/logo.png" style="float:left;margin:0 10px 0 0;" />
An embedded style is a block of code that is added to the head section of the HTML script. An embedded style is used when the CSS rules are unique to that page. This block should always be contained in the head section of the script.
<style type="text/css">
.imageleft
{
float:left;
margin:0 10px 0 0;
}
</style>
An external style sheet is a separate file filled with CSS rules that is referenced from each HTML script that uses it. Ideally, that should be every page in a web site. The external file can be located in the same directory as your HTML scripts, or can be placed in another directory. Because the file serves a specific purpose, external style sheets are commonly placed in their own directory, which may be named “styles” or “css” or something that clearly identifies the type of files found there.
An external style sheet is referenced within the head section of an HTML script. The file uses a .css file extension.
<link rel="stylesheet" href="http://www.domainname.com/css/style.css" type="text/css" />
You can fully specify an absolute path to the external style sheet file, as shown above, or you can use a relative path, as shown below. It is a good idea to make a relative path root-relative (starting with the root directory) so that you can reference it from scripts within different directories. If it looks like your defined styles are not working, check the path to the file
<link rel="stylesheet" href="/css/style.css" type="text/css" />
Other than the use of the .css file extension, there is nothing special about the format of an external file. You just need to define and list your CSS rules.
The Cascading Effect
The cascading part of CSS has to do with which CSS rule has priority. An inline style rule has priority over an embedded block style rule or an external style rule. An embedded block style has priority over an external style rule. Within an external style sheet, that last occurrence of a rule overrides previous occurrences. Generally speaking, the closer the rule definition gets to the specific HTML tag affected, the higher the priority.
Use of Multiple CSS Style Sheets
You can use as many style sheets as you wish, but it makes the most sense if you only call 1 or 2 from a web page. Style rules should be consolidated based upon how they are used. Normally, there would be a central external style sheet. If you have a number of pages that use a different set of CSS rules, you can either reference a different style sheet or an additional style sheet can be referenced. If you do this, remember to watch out for the cascading effects regarding which rules take priority.
Multiple Formats for Style Sheet Rules
Different developers use different methods for formatting CSS rules. Shown below are a couple of popular methods that are commonly used.
h1
{
font-family: Arial, sans-serif;
font-size: 18px;
color: #000;
}
.imageleft
{
float:left;
margin:0 10px 0 0;
}
Some purists prefer the format shown below because it saves a few bytes of code by eliminating some carriage returns and spaces.
h1 { font-family:Arial, sans-serif;font-size:18px;color:#000; }
.imageleft { float:left;margin:0 10px 0 0; }
It doesn’t matter which format you prefer to use. All of them work the same.
The World Wide Web Consortium establishes and maintains the specifications for CSS. They do offer an online CSS validator. If you are having problems getting a rule to work properly or would just like to make sure that your code meets the specifications, check out this freebie tool.