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
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.
(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
Failed to Load Resource: the Server Responded With a Status of 404 (Not Found) CSS
Placing Two Divs on Top of Each Other Without Using Position:Absolute
Using Mailto to Send Email With an Attachment
Html5 Input Type Date Format to Mm/Dd/Yyyy Causing Issue in Chrome
Children Not Staying Inside Parent Divs
Make a Div Fill the Height of the Remaining Screen Space
What Are the Implications of Using "!Important" in Css
Transform3D' Not Working With Position: Fixed Children
List of Html5 Elements That Can Be Nested Inside P Element
In Angular 4, How to Dynamically Set Min Date and Max Date in Date Picker
How to Change the Time Format (12/24 Hours) of an <Input>
How to Avoid Element from Expanding When Its Content Text Font-Size Gets Bigger
How to Make Flex Box Work in Safari
How to Make Custom Dots in Owl Carousel
Bootstrap Row With Columns of Different Height