Reputation: 199

html not linking css

I'm having an issue with linking html and Css and have no idea why. I'm doing everything like the book and tutorials says. However, I'm not getting to do the external configuration of css.

This is the code(just a test):

<!DOCTYPE html>
<html lang = "eng">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <title>title</title>
        <meta name="description" content="">
        <meta name="keywords" content="">

        <link rel="stylesheets" type="text/css" href="/styles.css">
    </head>

    <body>
        <h1>test</h1>
    </body>
</html>

and CSS:

body {
    background-color:#CCCCCC;
}

h1 {
    color:#0000EE;
}

Maybe I miss something, because when I do internal css (within my html code with ) it goes ok and the web browser is able to read that. It seems like the html is not linked with css, but it's even on the same folder so the path shouldn't be the problem.

I'm using Linux and Aptana Studio.

I've searched a lot the last 2 hours and cannot find where the mistake is.

Upvotes: 9

Answers (12)

Aqsa Asif

Reputation: 9

Place your link in the head tag or body tag, it is best to put it in the head tag.

Upvotes: 0

pedro echavarria

Reputation: 27

just try tasking off the / in front of the style.css

Upvotes: 1

PotatoHead333

Reputation: 31

I found out while Using Visual Studio Code and adding quotes that it was quoting automatically. So when I put in quotes and looked in the index.html of the index it was quoting the quotes (Bad News). Try link <href=FILENAME.css rel=stylesheet type=text/css />

Hope this works! Also, if you want Multiple CSS files, organize them in a folder, if you do so in FILENAME put /FOLDERNAME/FILENAME.css BUT make SURE it is under the main folder where your Index is!

Upvotes: 1

Muradtheoz

Reputation: 580

If your CSS file are in another folder then use

<link rel="stylesheet" type="text/css" href="folder-name/styles.css">

Upvotes: 1

DAve Dori

Reputation: 11

If all the above not working:

1- Make sure you have no inline/internal CSS > Delete all style code from the Html page (it ll prevent external css link)

Upvotes: 1

Jeff

Reputation: 41

If the other suggestions don't work, you can try re-saving the HTML and CSS sheets with "UTF-8" encoding and declare UTF-8 encoding in the HTML under the <head> with <meta charset="utf-8>"

Upvotes: 4

Taranjit Randhawa

Reputation: 21

I had the same problem correct the correct directory structure solved my problem. This is a good visualiton on how to organize your directory structure.

http://rosebusch.net/jeff/miscellaneous/tree.html

That is, the index.html folder is on the same level as the CSS folder. If you want to put index.html in a HTML folder, to link to the CSS folder you would have to backout first by linking href="../css/stylesheet.css". The ".." will take you up a level.

Upvotes: 2

Charaf JRA

Reputation: 8334

I invite you to read this article Absolute and Relative Paths

Then we pass to your code:

<link rel="stylesheets" type="text/css" href="/styles.css">

Should be :

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

Your styles.css should be in the same folder as your html file.

To verify that you have an error , check Console of your browser,you will be noticed that your file doesn't exist(404 error).

An other way to make your css working is to integrate it inside your page without separation:

Example:

 <style type='text/css'>

    body {
        background-color:#CCCCCC;
   }

    h1 {
        color:#0000EE;
    }
</style>

Upvotes: 11

Michael Giovanni Pumo

Reputation: 14764

Try this instead:

<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <title>title</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
        <link rel="stylesheet" type="text/css" href="./styles.css">
    </head>

    <body>
        <h1>test</h1>
    </body>
</html>

Upvotes: 1