Embedding CSS

**webmasternovis** · May 8, 2003 08:51

Hi Guys,

Would someone please tell me how I actually link to css files in the <head> section of my code?

Cheers,
Mike

**azizur_rahman** · May 8, 2003 08:54

Here's the code you want:

Code:

<link rel="stylesheet" href="style.css">

assuming you have your style sheet in the same derectory as your HTML Page.

**jetboy** · May 8, 2003 08:55

**webmasternovis** · May 8, 2003 09:04

Sorry guys, but neither works:S

The underline of the links still haven't gone, here is my css anyway:

Code:

<style type="text/css">
a.menu:link
{
text-decoration:none;
}
a:menu:visited
{
text-decoration:none;
}
a.menu:active
{
text-decoration:none;
}
a:menu:hover
{
text-decoration:none;
}
</style>

The page which it is on is: http://www.gawmir.com/Templatestorm/books.html

(Sorry if this is seen as advertising, but the site isn't launched yet)

Please could someone help?

**seandeasy** · May 8, 2003 09:10

Hi,

You shouldn't include the <style> and </style> tags in an external css file.

That should fix it.

Sean

**webmasternovis** · May 8, 2003 09:15

Thanks mate

Also, thanks to jetboy and azizur rahman for the previous postings.

**vgarcia** · May 8, 2003 12:15

Another way to link to a CSS file that older browsers won't understand:

Code:

<style type="text/css" media="screen">
   @import url('/styles/mystyle.css');
</style>

You can do this to hide advanced CSS (using positioning, etc.) from older browsers like Netscape 4.x.

**redux** · May 8, 2003 12:57

Originally Posted by vgarcia

Another way to link to a CSS file that older browsers won't understand:

Code:

<style type="text/css" media="screen">
   @import url('/styles/mystyle.css');
</style>

You can do this to hide advanced CSS (using positioning, etc.) from older browsers like Netscape 4.x.

an even more elegant solution i found to hide css from ns4.x using import: make a proper stylesheet, with all the advanced styles, and then a dummy stylesheet which only contains the @import rule. add the <link rel...> as per usual. voila'...nice and clean, using less lines of code...

**vgarcia** · May 8, 2003 13:12

Originally Posted by redux

an even more elegant solution i found to hide css from ns4.x using import: make a proper stylesheet, with all the advanced styles, and then a dummy stylesheet which only contains the @import rule. add the <link rel...> as per usual. voila'...nice and clean, using less lines of code...

I've done this too and it works pretty well. Put the basic styles in your <linked> stylesheet, and in your stylesheet use the @import rule. Nice combo

.

**redux** · May 8, 2003 13:19

Originally Posted by vgarcia

I've done this too and it works pretty well. Put the basic styles in your <linked> stylesheet, and in your stylesheet use the @import rule. Nice combo

.

the only problem i found with this approach is: if you have the @import rule at the beginning of your basic stylesheet to import the complex styles, it needs to be at the beginning of the basic sheet. now, the modern browsers would presumably read the advanced styles first, THEN carry on reading the simple styles. if the simple styles overwrite some of the advanced styles, you may end up getting simple styles in modern browsers...if that makes sense
the approach i've taken: have two <link rel...> links, one with the simple styles first, then one going to the dummy/advanced ones. this way modern browsers see the simple ones first, but these are then overwritten by the advanced ones...
geeez...what a convoluted way of explaining it...hope it made some sense

**TheOriginalH** · May 8, 2003 13:46

Originally Posted by webmasternovis

Sorry guys, but neither works:S

The underline of the links still haven't gone, here is my css anyway:

Code:

<style type="text/css">
a.menu:link
{
text-decoration:none;
}
a:menu:visited
{
text-decoration:none;
}
a.menu:active
{
text-decoration:none;
}
a:menu:hover
{
text-decoration:none;
}
</style>

The page which it is on is: http://www.gawmir.com/Templatestorm/books.html

(Sorry if this is seen as advertising, but the site isn't launched yet)

Please could someone help?

Should that not be:

Code:

<style type="text/css">
a.menu:link
{
text-decoration:none;
}
a.menu:visited #changed : to .
{
text-decoration:none;
}
a.menu:active
{
text-decoration:none;
}
a.menu:hover #changed : to .
{
text-decoration:none;
}
</style>

?

User Tag List

Thread: Embedding CSS

Thread Tools

Display

Embedding CSS

Bookmarks

Bookmarks

Posting Permissions