CODEWITHSUNDEEP
htmlcssloading
coloradopowpow
coloradopowpow

Reputation: 55

CSS file not loading in basic HTML

this is very basic code as I'm still a beginner, I'm having trouble getting it to load into Chrome via Brackets on OSX.

When I load the file locally it displays everything but the CSS is not loading, everything else is functioning properly.

My troubleshooting so far:

  1. index.html and my tutoringservices.html are in the same directory as style.css.
  2. I've saved and restarted my computer to make sure it wasn't a refresh issue
  3. Cleared Chrome's cache to make sure the CSS was being loaded properly
  4. I've copypasted CSS code from w3schools.com and other basic websites to make sure the basic code would function properly. I removed everything but the .button styling, as that's what I was originally trying to troubleshoot, not so much the font import.

I don't know how open Firefox thru Brackets so I have not loaded Firebug.

I have not yet linked the CSS to my index.html as in theory it should work on tutoringservices.html anyhow. Here's my code:

tutoringservices.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Contact</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
   
    <link href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
    
    
</head>

<body>
    
    <header>
      <a href="index.html">Home</a>

    </header>
  <main>
      <h1>Get in Touch</h1>
      <hr>
      <p>
          Thank you for your interest. Inquiries usually receive a response within 24 hours. 
          <br>If you do not receieve a timely response, please feel free to send another!</p>
      
    <form class="contact-form" action="contactform.php" method="post">
      <input type="text" name="name" placeholder="Full name">
        <br><br>
      <input type="text" name="mail" placeholder="Your E-Mail">
        <br><br>
      <input type="text" name="phone" placeholder="Phone Number (optional)">
        <br><br>
      <input type="text" name="subject" placeholder="Subject">
        <br><br>
      <textarea name="message" placeholder="Message"></textarea>
        <br><br>
      <button type="submit" name="submit">SEND</button>
    </form>
  </main>
</body>
</html>

style.css

@charset "UTF-8";

.paragraph {
    font-size: 50px;
    line-height: 62px;
    font-family: 'Amatic SC', cursive;
}

font-family: 'Amatic SC', cursive;

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Be happy to answer any additional questions, thanks for your time.

Upvotes: 3

Views: 2888

Answers (4)

PLW
PLW

Reputation: 200

  1. Use classes in your HTML code. In your CSS you use, for example, .paragraph - so use it in HTML as well: <p class="paragraph">, and the same for button.

  2. Second issue is a little bit more tricky to spot, but easier to fix. You have a wayward CSS declaration outside of any selector in your style.css file, on line 9. Simply remove it:

    font-family: 'Amatic SC', cursive;

Do those two fixes and you will be golden.

Upvotes: 1

Aubrey Sledzinski
Aubrey Sledzinski

Reputation: 1

You man not need the ./ if it is in the same directory in the href="style.css". When it comes to the paragraph and button, your css is referring to them as classes by adding a "." before them. If you just want to call them by html tag

p {
 // put style for all paragraph tags here
}
 
button {
 // put styling for all buttons here
}

Upvotes: 0

Dev
Dev

Reputation: 31

Ok the problem as I see it (assuming the directory of css file is correct), is that your referring in your css code the classes ".paragraph" and ".button" which do not exist in your html code. When you refer in css to some part of html, you do it as follows:

  • for id ex:

    html

    <div id="my_id">

    css

    #my_id{}

- "." for class

html

`<div class="my_id">`

css

`.my_id{}`

- just the tag name for the tag itself

html

`<div>`

css

`div {}`

you must be careful when referring by tag names.

Upvotes: 0

Qodeer
Qodeer

Reputation: 166

The .name in the css file indicates it is styling a class, but the classes are not used in the HTML file. So .button means it styles the button class instead of the button element. Two options:

  1. Style the element instead of the class by removing the dot

  2. Add the class to the css file, for example on the button:

      <button class="button" type="submit" name="submit">SEND</button>

Upvotes: 3

Related Questions