Linking of style sheets - Using HTML and CSS

Linking of style sheets using HTML

One of the best methods of adding an external style sheet to a web page is to use HTML <link> tag. You can write the tag in a slightly different manner depending upon whether you are using HTML or XHTML.

For example, here is an HTML:

<link rel="stylesheet" type="text/css" href="css/global.css">

Here’s XHTML:

<link rel="stylesheet" type="text/css" href="css/global.css" />

The only difference is how you need to end the tag. The link tag is an empty element, since it has only an opening tag and no matching, closing </link> tag. In XHTML, you need to add closing slash (like this: />) to terminate the tag; HTML does not require the extra slash.

Otherwise, the link tag remains the same in HTML and XHTML and requires three attributes:

• rel indicates the type of link - in this case, a link to the style sheet
• type lets the web browser know what kind of data can be expected - a text file, containing CSS
• href points to the location of the external CSS file on the site. The value of this property is an URL, and works the same as the src attribute you use when adding an image to a page, or the href attribute of a link pointing to another page.

Tip: you can attach multiple style sheets to the web page by adding multiple <link> tags, each of them pointing to a different style sheet file. This technique is basically a great way to organize the CSS styles

Linking a style sheet using CSS

CSS includes a built-in way to add external style sheets - the @import directive. You can add the directive inside of an HTML <style> tag, like the following:

<style type="text/css">
    @import url (global.css);
</style>

Unlike HTML’s <link> tag, @import is part of the CSS language and contains some definite un-HTML-like qualities:

To make any connection to the external CSS file, you should use url instead of href, and encloses the path in parentheses. So in this example, css/global.css is the path to external CSS file. Since quotes around the URL are optional, so url(css/global.css) and url(”css/global.css”) both work.

Note: Not only does quoting the path of an URL in CSS add a couple of extra characters to the file, Internet Explorer 5 for the Mac has trouble understanding URLS with quotes.

As with <link> tag, you can include multiple external style sheets using move than one @import:

<style type="text/css">
    @import url(css/global.css);
    @import url(css/forms.css);
</style>

You can add regular CSS styles after the @import directives if, for example, you want to create a rule that applies just to that one page, but take advantage of the same design rules used throughout the site to format the rest of the web page.

Here is an example:

<style type="text/css">
    @import url (css/global.css);
    @import url(css/forms.css);
    p {
        color: red;
    }
</style>

Technically, you should be placing all the @import lines before any of the CSS rules, but does not create any problem, in case you don’t. web browsers are supposed to ignore any style sheets you import after a CSS rule, but all current web browsers ignore that particular restriction.

Popularity: 100% [?]

Categories: CSS Tips, CSS Tutorials, Posted on February 25, 2008 by Choppr | Login