Html and CSS Are Not Linking/ Communicating

My CSS and HTML files are not communicating properly to each other

Your code is working ensure you put lockproject.css and your html file in the same directory

{font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;border-collapse: collapse;width: 100%;}h1 {border-bottom: 2px solid rgba(255, 255, 255, 0.5);color: white;font-weight: 120;font-size: 36px;line-height: 30px;padding-bottom: 20px;text-align: center;width: 100%;}h3 {color: #F81B1D
}
td, th {border: 2px solid #ddd;padding: 14px;}
tr:nth-child(odd){background-color: #f2f2f2;} tr:nth-child(even){background-color: #214CD2;}

th { padding-top: 14px; padding-bottom: 14px; text-align: left; background-color: #000000; color: white;}body {background-color: #4D4949;}a:link, a:visited {background-color: #f44336;color: white;padding: 14px 25px;text-align: center;text-decoration: none;display: inline-block;}

a:hover, a:active {background-color: red;}
<html><head><link href="lockproject.css" type="text/css" rel="stylesheet"><title>Locks Out Form</title><h1>Facilities Departmental Lock Checkout Entry Form </h1><h3> *All fields must be populated </h3></head><body><form action="insert.php" method="post"><table style="width:100%"><thead><tr><th>Lock Number</th><th>Equipment # or description:</th><th>Work Order #:</th><th>Date OUT::</th><th>Supervisor Inital OUT:</th><th>Comments/Tradesmen:</th></tr></thead><tbody><td>    <input type="text" name="lock_number" id="locknumber"   required="required">    </td>   <td>    <input type="text" name="equipment_number" id="equipmentnumber"  required="required">  </td>  <td>    <input type="text" name="work_order" id="workorder" required="required">  </td>  <td>    <input type="date" name="date_out" id="dateout" required="required">  </td>  <td>    <input type="text" name="supervisor_out" id="supervisorout"   required="required">  </td>  <td>    <input type="text" name="comments_out" id="commentsout"    required="required">  </td>  </tbody>  </table>  <input type="submit" value="Submit" >  <br><br>  </body>  <a href="http://152.116.203.115/lockcheckin.php" target="_blank">Lock Check  In Form</a>  <a href="http://152.116.203.115/dataout.php" target="_blank">Lock Check Out  History</a>  </html>

Complete list of reasons why a css file might not be working

  1. Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.

  2. (If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?

CSS file refuses to link to HTML file

Sometimes you need to force the browser to use the latest styelsheet. You can achieve this by adding a query string in the link.

Like this:

<link rel="stylesheet" href="Joe.css?v=1.1" "type="text/css"/>

As you can see I've added ?v=1.1 after "Joe.css

Then simply change version number every time you have done some changes in your CSS file. So in this case, when you have updated the CSS file you can change the number to ?v=1.2 and so on. By doing this you are forcing the browser to use the latest css.

But please note that you should only add this to the link not to the actual filename Joe.css - that stays the same.

Hope that helps!

CSS file linking issue

If you want to use the relative path to the CSS file, then the link href needs to be relative to your html file:

<link rel="stylesheet" href="../css/9a.css">

The .. indicates that you want to navigate outside the "html" folder where your html file is located, then find the "css" folder, then find your css file.

External CSS file is not loading with link tag

link tag uses href attribute as opposed the the src as you have specified. Please change and check.



Related Topics



Leave a reply



Submit