CSS wont load after refresh on my register(signup) form in PHP

Question

I'm learning PHP and I found useful tutorials online, so I'm trying to build my very first site in PHP. I have a problem with CSS implementation. I keep my tab with localhost always on so I dont have to run it every single time when I change something. Problem is, when I code some CSS it loads on my registration form, but when i refresh the page, it's like I never coded CSS for that page. (sorry for bad english I hope You guys understand what I wanted to say..)

Here's the signup.php code :

     <div class="container">
    <div class="row" style="text-align:center;">
        <h3>EPO - Sistem - Registracija </h3>
    </div>

    <div class="row sub_msg">
        <p> Veb aplikacija za evidenciju predispitnih obaveza. </p>
    </div>

    <div class="row signup">
        <div class="row">
            <h3> Dobrodosli, molimo Vas, unesite podatke za registraciju. </h3>
        </div>

        <form action="" method="post" class="form-horizontal">

            <div class="row form-group input_group">
                <label for="" class="col-sm-2" >E-mail:</label>

                <div class="col-sm-10">
                    <input type="text" name="email" class="form-control">
                </div>
            </div>

            <div class="row form-group input_group">
                <label for="" class="col-sm-2" >Firstname:</label>

                <div class="col-sm-10">
                    <input type="text" name="firstname" id="firstname" class="form-control">
                </div>
            </div>

            <div class="row form-group input_group">
                <label for="" class="col-sm-2" >Lastname:</label>

                <div class="col-sm-10">
                    <input type="text" name="lastname" id="lastname" class="form-control">
                </div>
            </div>

            <div class="row form-group input_group">
                <label for="" class="col-sm-2" >Password:</label>

                <div class="col-sm-10">
                    <input type="password" name="password" id="password" class="form-control">
                </div>
            </div>

            <div class="row form-group" style="margin:0px 10px 20px 10px">
                <div class="col-xs-12">
                    <input type="submit" name="submit" id="Registruj se" class="form-control">
                </div>
            </div>





        </form>

    </div>

</div>

And here's the Index page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EPO - Pocetna stranica</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href=" ./css/custom.css">

</head>
<body>

    <nav class="navbar" style="background-color: #c40707">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand crud" style="color: darkgray !important" href="#">EPO Aplikacija</a>
    </div>
   </div>
</nav>

   <div class="container">
     <ul class="nav nav-tabs">
         <li><a data-toggle='tab' href="#index">Pocetna stranica</a></li>
         <li><a data-toggle='tab' href="#login">Ulogujte se</a></li>
         <li><a data-toggle='tab' href="#signup">Prijavite se</a></li>
     </ul>


<div class="tab-content">
    <div id="index" class="tab-pane fade in">
         <p>Index</p>  
    </div>

    <div id="login" class="tab-pane fade in">
           <p>Login</p>
    </div>

    <div id="signup" class="tab-pane fade in">
           <?php include("./user/signup.php"); ?>

    </div>


    </div>  


   </div>




</body>
</html>

And here's the css code:

body{
    background-color: darkgray;
    font-size: 22px;
    margin: 0;
    padding: 0;
}


.crud{

    width:auto;
    color: #605d5d !important;
    font-size: 25px;
    font-weight: 800;
}


.sub_msg{
    text-align: center;
    padding: 10px 0px 20px 0px;
}

.signup{
    border: 1px solid #c40707;
    text-align: center;
    width: 60%;
    height: auto;
    margin: auto;
}

.input_group{
    margin: 0px 20px 20px 20px;
}

.input_group input{
    height: 40px;
    font-size: 20px;

}

input[type="submit"]{
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    background-color: #c40707;
    color: #605d5d !important;

}

I'm stuck her for over two hours, and I'm pretty sure it's some beginners silly mistake but I can't find it..

href=" ./css/custom.css" - remove the space character - should be - href="./css/custom.css" — Karlo Kokkak, Mar 22 '18 at 12:21
you could try reading this: [Html Cache Control](https://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers) — Rob Wmaster, Mar 22 '18 at 12:31
Thanks for upvote. Feel free to accept this as answer if the solution addressed your concern. — Darshan Jain, Mar 22 '18 at 13:09

score 1 · Answer 1 · edited Apr 03 '18 at 17:42

1

Correct the path of from <link rel="stylesheet" href=" ./css/custom.css"> to <link rel="stylesheet" href="./css/custom.css">

If still not work then force your browser to refresh the stylesheet.

edited Apr 03 '18 at 17:42

Martijn Pieters

1,048,767
296
4,058
3,343

answered Mar 22 '18 at 12:24

Darshan Jain

479
2
10

Karlo Kokkak · Answer 2 · 2018-03-22T12:29:12.930

In the code below href attribute has unneeded space in it.

<link rel="stylesheet" href=" ./css/custom.css">

Should be:

<link rel="stylesheet" href="./css/custom.css">

Also sometimes you may need to clear cache for the changes in your css to appear.

In this case, cause it can become tiresome pressing the refresh button, rather than do a refresh, I add a random value at the end of the css url to make it appear like a new url so no caching will happen.

Like

<link rel="stylesheet" href="./css/custom.css?<?php echo rand(1,300);?>">

score 0 · Answer 3 · answered Mar 22 '18 at 12:23

0

Check by adding version number like

<link rel="stylesheet" type="text/css" href="./css/custom.css?version=51">

answered Mar 22 '18 at 12:23

SF..MJ

862
8
19

WHere should I insert that? (sorry Im a beginner) – Dvenee Mar 22 '18 at 12:27
Thank you very much anyway! The answer above from Justin and Darshan Jain helped me. – Dvenee Mar 22 '18 at 15:17

score 0 · Answer 4 · answered Mar 22 '18 at 14:00

0

Try to change this line (assuming that your css folder in in the same level as you index.php)

<link rel="stylesheet" href=" ./css/custom.css">

To this this

<link rel="stylesheet" href="css/custom.css?t=<?php echo time(); ?>">

Remove the <?php echo time(); ?> once you go on production as it meant on for development so you don't need to clear the cache or the hard reload if the changes in your css are not reflected in the browser.

answered Mar 22 '18 at 14:00

Amine Kacem

3
3

Noted Buddy. Thank You very much also! Clearing the cache, actually, ctrl+F5 worked for me. Appreciate the tip extremely! – Dvenee Mar 22 '18 at 15:18

CSS wont load after refresh on my register(signup) form in PHP

4 Answers4