首页 > 解决方案 > CSS code fails to make changes to HTML code

问题描述

I have HTML code that is not linking with the CSS file.

I have posted the code below.

When ever I try to make changes to the CSS file and save, nothing happens to the browser preview.

I used CSS code that I have used before, and know it is correct.

But that CSS file doesn't show up on the browser preview.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Moses Saygbe LAb 3 </title><!--Title of page-->

<link rel="stylesheet" type="tex/css" href="style.css">
</head>

<body>
<main>
<form id="apptf" class="header">
  <h2>Family Medicine Practice</h2>
  <header class="header">
    Patient Information
  </header>
  <fieldset class="header">
    <legend>Personal Information</legend>
  <div>
    <label for="first">First Name</label><br>
    <input type="text" name="first" id="first" class="header">
  </div>  
  <div>
    <label for="last">Last Name</label><br>
    <input type="text" name="last" id="last" class="header">
  </div>
  <div>
    <label for="dphone">Daytime Phone</label><br>
    <input type="text" name="dphone" id="dphone" class="header">
  </div>
  <div>
    <label for="ephone">Evening Phone</label><br>
    <input type="text" name="ephone" id="ephone" class="header">
  </div>
  <div id="visit-first">
    <label for="visit">Is this your first time visiting our office?</label><br>
    <input name="visit" type="radio" id="visit" value="Yes"> Yes
    <input name="visit" type="radio" id="novist" value="No"> No
  </div>
  </fieldset>
  <header class="header">
    Appointment Information
  </header>
  <fieldset class="header">
    <legend>Appointment Time</legend>
    <div>
      <label for="appointment">Date</label>
      <input type="date" name="appointment" id="appointment" class="header">
    </div>
    <div>
      <label for="time">Time</label>
      <select name="time" id="time" class="header">
        <option value="8am">8AM</option>
        <option value="10am">10AM</option>
        <option value="12pm">12PM</option>
        <option value="4pm">4PM</option>
      </select>
    </div>
    <div class="moreinfo">
      <label for="moreinfo">Please describe the reason for the visit</label><br>
      <textarea class="moreinfoh" name="moreinfo" id="moreinfo" cols="10" rows="10">. 
      </textarea>
    </div>
   </fieldset>
   <button type="submit" value="submit" class="header">Submit</button>
   </form>
   <footer>
    Moses Saygbe 2020
   </footer>
   <script>
  window.onload=function(){ //diable right click
      document.addEventListener("contextmenu", function(e){
      e.preventDefault();
  },false);}            
   </script>
</main>

And here is the CSS code. I tried relinking it, opening in a new browser. Still nothing fixes it.

@charset "utf-8";
html, body{ 
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(7, 7, 7);
    background: url(../Week3lab/graphic/aldebaran-s-zzi-6FCQtF8-unsplash.jpg) no-repeat 
center center fixed;
    background-size: cover;
    z-index: -1;
}

标签: htmlcss

解决方案


Does making your CSS this work?

  @charset "utf-8";
html, body{ 
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url("https://images.unsplash.com/photo-1588894167282-408680bb62f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=756&q=80");
    z-index: -1;

推荐阅读