What's wrong with my Code?

HTML-CSS
1

I made this code using freecodecamp. But when I saved it as an html file, along with its css style, the code wont work.
Can someone help me fix this?

HTML CODE

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="vedetian.css" rel="stylesheets" />
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, inital-scale=1.0"/>
  <title>Survey Form</title>
  </head>
  <body>
    <h1 id="title">Vedetian Survey Form</h1>
    <p id="description"><em>Let us know on how we can improve our service</em></p>
    <div class="container">
    <form id="survey-form">
      <fieldset>
        <label for="name" id="name-label">Name: 
         <input id="name" type="text" required placeholder="Juan Dela Cruz">
        </label>
        <label for="email" id="email-label">Email Address: <input id="email" type="email" required placeholder="juandc@gmail.com">
        </label>
         <label for="number" id="number-label">Age(in years): <input id="number" type="number" min="13" max="65" placeholder="18">
         </label>
         <label>Sex</label>
         <select id="dropdown">
           <option value="0">--</option>
           <option value="1">Male</option>
           <option value="2">Female</option>
         </select>
      </fieldset>
<fieldset>        <legend>Where have you heard us from?
         </legend>
      <label for="friend"><input type="radio" class="inline" name="heard" checked value="friend" id="friend">Friend</label>
      <label for="fb ads"><input type="radio" class="inline" name="heard" value="Facebook ads" id="fb ads">Facebook Ads</label>
      </fieldset>
      
      <fieldset><label>What product is/are your favorite?(Select all that apply)</label>     <label><input type="checkbox" class="inline" value="puto-cheese"> Puto Cheese</label>
<label><input type="checkbox" class="inline" value="kutsinta"> Kutsinta</label>      <label><input type="checkbox" class="inline" value="puto-flan"> Puto Flan</label>
<label><input type="checkbox" class="inline" value="sapin"> Sapin-sapin</label></fieldset>
<fieldset>
<label>What can you say about our products?</label>
<textarea placeholder="It tastes good and I can't wait to order again..."></textarea>
<fieldset>
  <input type="submit" value="Submit" id="submit">
    </div>
    </form>
    <footer>Visit our <a href="https://www.facebook.com/vdnhomemade">Facebook Page</a></footer>
  </body>
</html>

CSS CODE

body {
background-color: pink;
font-family: Calibri;
}

.container {
  width: 80%;background-color: #fea3aa;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
  font-family: Arial;
}

footer {
  text-align: center;
}

label {
  display: block;
  padding: 2 0;
}

input, select {
  display: block;
  width: 100%

}

fieldset {
  border: none;
  margin: 0.5em 0;
}

.inline {
  width: unset;
  display: inline-block
}

h1, p {
  text-align: center;
}

input, textarea, #number, #dropdown { background-color: #f9b7ff
}

textarea {
  width: 100%;
  height: 15%
}

input[type="submit"] {
  border-color: #ffffff;
}
a {
  color: blue;
}

a:hover {
  color: #C25A7C;
}

a:active {
  color: white;
}
2

Can you provide more context? What’s this code for? What errors do you have?

3

Code is used for the survey form certification project,
Error is that I think the html code wont read the .css file on my browser(Chrome).

4

Welcome to our community!

You don’t need to save HTML and CSS files on the FCC platform. Only change the name of your CSS file into styles.css. On the other hand, if you want to save your code locally, you should put both files in the same folder, and your CSS file should be named vedetian.css.

5

is the css file named like that? are they in the same folder?

7

Yes the css is named like that, and yes they are on the same folder.

8

double check the name of the file. You could also try writing "./filename.css" in the html

9

It still won’t work, styles are not seen on the web browser. :smiling_face_with_tear:

10

I tried doing that, but the styles are still not showing.

11

Code is supposed to like this:

image
image1366×768 51 KB

12

Are you plugging this code into the freeCodeCamp editor?

13

But when I saved the html and css file locally and opened it in the browser, it looked like this:

image
image1366×768 59.7 KB

14

You should have two files put in the same folder:

  • index.html
  • vedetian.css (the practice is to name this file as styles.css)

Then, follow the instructions:

15

Your rel value for the link element is wrong, it should be stylesheet not stylesheets

2 Likes
16

Ahhh thank you so much, this was the error :sweat_smile:. Thanks for your help! :grin:

17

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.