Linking to external CSS files

You can type make a webpage containing only a CSS file and link it to the current webpage using the <LINK> tag. Linking the CSS file to the current webpage works just as if that CSS file had been typed into the head of the current page.

<HEAD>
<LINK REL=stylesheets TYPE="text/css" href="filename">
</HEAD>






Comments

You can hide the CSS code from non-CSS browsers using the HTML comment tags.

<HEAD>
<STYLE>
<!--
Insert CSS rules here
-->
</STYLE>
</HEAD>



You can also add notes in your code to let you or someone else viewing your code know what each part does using comments. There are // single line comments and the /* */ multi-line comments

<HEAD>
<STYLE>
// This gives the bold text a yellow background
B {background-color: yellow;}
/* The italic text will have a red background
The big text will have a green background
The cite text will have an orange background */

I {background-color: red;}
BIG {background-color: green;}
CITE {background-color: orange;}
</STYLE>
</HEAD>






Cascading Order & Important

Some browsers will allow the visitor to your page to use their own CSS rather than the author of the page's CSS. Determining whos CSS is used on the page is determined by the cascading order.

Using the !important attribute will give that property top priority. If the person visiting your page uses the !important attribute in their CSS the page author's still comes out on top. However if the page author doesn't use the !important attribute the visitor's CSS will come out on top.

The more specific a rule is the higher its cascade priority. ID selectors count as 100, classes count as 10, and HTML selectors count as 1. Thus the selectors B B B.bean would count as 13 (1+1+1+10=13). While B alone would only count as 1.

Inline selectors will override those listed in the head of the document.