CSS file not loading while being in a specific folder

Question

I am having this following code:

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Accueil</title>

    <link rel="stylesheet" href="css/header-search.css" />
    <link rel="stylesheet" href="css/header.css" />

</head>

<body>

    <header class="header-two-bars">

        <div class="header-first-bar">
            <div class="header-limiter">
                <h1><a href="#">Jeannot<span>Boutique</span></a></h1>

                <div class="member-area-buttons">
                    <a href="form-register.html" class="signup-button">Sign Up</a>
                    <a href="form-login.html" class="login-user">Log In</a>
                </div>


                <div class="container-1">
                    <span class="icon"><i class="fa fa-search"></i></span>
                    <input type="search" id="search" placeholder="Search..." />
                </div>
            </div>

            <div class="clear"></div>
        </div>

        <div class="header-second-bar">
            <div class="header-limiter">
                <nav>
                    <a href="#"><i class="fa fa-male"></i> Accueil</a>
                    <a href="#" class="selected"><i class="fa fa-female"></i> Chaussures</a>
                    <a href="#"><i class="fa fa-folder-o"></i> Vêtements</a>
                    <a href="#"><i class="fa fa-pencil"></i> Accessoires</a>
                    <a href="#"><i class="fa fa-check"></i> Sur mesure</a>
                    <a href="#" style="color: pink;"><i class="fa fa-pencil"></i> Blog</a>
                    <a href="#" style="color: pink;"><i class="fa fa-check"></i> Promo</a>
                </nav>
                <div class="nav-social-media">
                    <a href="#" style="background-color:#3b5998;"><i class="fa fa-facebook"></i></a>
                    <a href="#" style="background-color:#55acee;"><i class="fa fa-twitter"></i></a>
                    <a href="#" style="background-color:#dd4b39;"><i class="fa fa-google-plus"></i></a>
                    <a href="#" style="background-color:#125688;"><i class="fa fa-instagram"></i></a>
                </div>
                <div class="clear"></div>
            </div>
        </div>

    </header>
</body>

Basically, I am have a folder where my css files are. When I load the file header.css from the css folder, it does not have any effect, but once is in the same location with the index.html, everything is perfect.

I have struggling to find the answer but no way. My file system structure is the following:

Please kindly help me find out what is wrong with my code.

PS: I have used the W3 Validator and everything is ok.

where is your index.html located. Is it in the same folder where css folder is present.. — Sandeep Sukhija, Apr 16 '16 at 08:34
Please check your directories... where is your css file saved and where are you calling this css file from? **Solution** : open `Inspect Element` / `Inspect` in your browser then click on console to watch the error.. Have you written correct spelling of your file name in your html source file? — Phoenix, Apr 16 '16 at 08:35
I have tested with dummy styles and they work perfectly fine. Try clearing your browser history and refresh the page. — Dut A., Apr 16 '16 at 09:44

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

https://stackoverflow.com/a/9480801

Add
type="text/css"
to your link tag

While this may no longer be necessary in modern browsers the HTML4 specification declared this a required attribute.

and you may try this:

specify href="./style.css" which the . specifies the current directory

edited May 23 '17 at 12:31

Community

1
1

answered Apr 16 '16 at 09:00

CodeGust

831
3
15
36

score 0 · Answer 2 · answered Apr 16 '16 at 09:57

0

Use

<link rel="stylesheet" href="/css/header-search.css" />
<link rel="stylesheet" href="/css/header.css" />

instead of

<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />

answered Apr 16 '16 at 09:57

Mark

563
4
18

CSS file not loading while being in a specific folder

2 Answers2