SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Embedding CSS

  1. #1
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Embedding CSS

    Hi Guys,

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

    Cheers,
    Mike

  2. #2
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Azizur Rahman
    Web Application Developer

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <link rel="stylesheet" href="/pathto/mystylesheet.css" type="text/css">

    and your stylesheet is made up solely of your CSS definitions, nothing else.

  4. #4
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2002
    Location
    Ireland
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

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

    That should fix it.

    Sean

  6. #6
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mate

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

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote 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 .

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  11. #11
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote 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>
    ?
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •