CODEWITHSUNDEEP
htmlcss
lexer
lexer

Reputation: 77

Problem using an external Style sheet for CSS

I'm trying to use an external Style Sheet for putting my CSS code, When I put the CSS on the same file It works, but when the CSS code and is in an external sheet It does nothing, for testing I create a php file with and input field and use the css for background color of page and style of an Input field called "account_name":

This is my code with css code in the same file:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <title>Add Account</title>
    
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
    
    <script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
     
    <script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script> 
     
    <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
        
    <link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">   
   
    
           <!--  Alertify Librery-->
                <link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
                <link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
                <script src="alertify/alertify.js"></script>
               
                <!-- Modal librery-->
                <script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
                <script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
                <link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
                <link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">   
    
    
    <style type="text/css">
            body{
            color: #fff;
            background: #3598dc;
            font-family: 'Roboto', sans-serif;
        }
        
            .signup-form {
            width: 600px;
            margin: 0 auto;
            padding: 5px 0;
        }
        
        .signup-form form {
            color: #9ba5a8;
            border-radius: 3px;
            margin-bottom: 15px;
            background: #F0FFF0;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            padding: 30px;
        }
        .signup-form h2 {
            color: #333;
            font-weight: bold;
            margin-top: 0;
        }
        
    input#account_name {
      border-radius: 10px;
      border: 1px solid #73AD21;
      padding: 5px; 
      width: 400px;
      height: 35px;
      float: left;
    color: #0000CD; 
    background-color :  #ffee88; 
    }   
    </style>
    </head>
    <body>
    </br>
    </br>
    <div class="signup-form">
        <form  method="post" id="add_form">
            <h2>Add Account</h2>
    
            <hr>
            <div class="form-group">
        <div class="row">
         <div class="col-xs-6">  
          <label>Please Enter Account Name</label>
                <input type="text" class="form-control" id="account_name" name="account_name" required="required">
                <input type="hidden" name="key" value="addcuenta" >
        </div>
        </div>
        </br>
    
            </br>
                </br>
                    </br>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-lg">Accept</button>
            </div>
        </form>
    </div>
    </body>
    </html>  
    
    
    <script>  
            
            
                //Send Data to Add
        $(document).on('submit', '#add_form', function(e){
            e.preventDefault();
            var data = $(this).serialize();
            $.ajax({
                //Send Data To add
                url: 'processAddAccount.php',
                type: 'POST',
                dataType: 'json',
                data : data,
                success: function(data)
                {
                    
                    alert('Account Add');
    
                },
                error: function(errorThrown)
                {
                    alert(errorThrown);
                }
    });
    });  
     
     </script>

But If I put the css code in a external sheet called: "style.css", the css format makes nothing, these are the php and css file: php code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">

<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
 
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
    
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">

<!--  Load css style file-->
<link rel="stylesheet" type="text/css" href="css/style.css">


       <!--  Alertify Librery-->
            <link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
            <link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
            <script src="alertify/alertify.js"></script>
           
            <!-- Modal librery-->
            <script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
            <script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
            <link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
            <link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">


</head>
<body>
</br>
</br>
<div class="signup-form">
    <form  method="post" id="add_form">
        <h2>Add Account</h2>

        <hr>
        <div class="form-group">
    <div class="row">
     <div class="col-xs-6">  
      <label>Please Enter Account Name</label>
            <input type="text" class="form-control" id="account_name" name="account_name" required="required">
            <input type="hidden" name="key" value="addcuenta" >
    </div>
    </div>
    </br>

        </br>
            </br>
                </br>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg">Accept</button>
        </div>
    </form>
</div>
</body>
</html>  


<script>  
        
        
            //Send Data to Add
    $(document).on('submit', '#add_form', function(e){
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
            //Send Data To add
            url: 'processAddAccount.php',
            type: 'POST',
            dataType: 'json',
            data : data,
            success: function(data)
            {
                
                alert('Account Add');

            },
            error: function(errorThrown)
            {
                alert(errorThrown);
            }
});
});



 
 </script>

The css file style.css:

        body{
        color: #fff;
        background: #3598dc;
        font-family: 'Roboto', sans-serif;
    }
    
        .signup-form {
        width: 600px;
        margin: 0 auto;
        padding: 5px 0;
    }
    
    .signup-form form {
        color: #9ba5a8;
        border-radius: 3px;
        margin-bottom: 15px;
        background: #F0FFF0;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }
    .signup-form h2 {
        color: #333;
        font-weight: bold;
        margin-top: 0;
    }
    
input#account_name {
  border-radius: 10px;
  border: 1px solid #73AD21;
  padding: 5px; 
  width: 400px;
  height: 35px;
  float: left;
color: #0000CD; 
background-color :  #ffee88; 
}

Please any Ideas?

Upvotes: 0

Views: 87

Answers (2)

lexer
lexer

Reputation: 77

I'm testing, please, Why for example If I change input ID in the HTML code and then I change my CSS to formar the new input ID, the css style doesn't apply to my Input? Do I have to reset something in the browser?

Upvotes: 0

Sanmeet
Sanmeet

Reputation: 1410

The problem is you need to link your CSS file just before the closing head tag ! All because of specificity rule of CSS ! Try this

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <title>Add Account</title>

  <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">

  <script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>

  <script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>

  <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">


  <!--  Alertify Librery-->
  <link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
  <link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
  <script src="alertify/alertify.js"></script>

  <!-- Modal librery-->
  <script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
  <script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
  <link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
  <link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">

 <!-- Linking external custom CSS --> 

 <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
 
</head>
<body>
  <br />
  <br />
  <div class="signup-form">
    <form method="post" id="add_form">
      <h2>Add Account</h2>

      <hr>
      <div class="form-group">
        <div class="row">
          <div class="col-xs-6">
            <label>Please Enter Account Name</label>
            <input type="text" class="form-control" id="account_name" name="account_name" required="required">
            <input type="hidden" name="key" value="addcuenta">
          </div>
        </div>
        <br />

        <br />
        <br />
        <br />
        <div class="form-group">
          <button type="submit" class="btn btn-primary btn-lg">Accept</button>
        </div>
      </div>
    </form>
  </div>

  <script>


    //Send Data to Add
    $(document).on('submit', '#add_form', function(e) {
      e.preventDefault();
      var data = $(this).serialize();
      $.ajax({
        //Send Data To add
        url: 'processAddAccount.php',
        type: 'POST',
        dataType: 'json',
        data: data,
        success: function(data) {

          alert('Account Add');

        },
        error: function(errorThrown) {
          alert(errorThrown);
        }
      });
    });

  </script>
</body>
</html>

Remember : Your style.css file should be in css folder of root directory .

Upvotes: 2

Related Questions