Css is not working

Hello

I need some help, I’m currently working on the “Build Your Own Cheatsheet” project and I finished my html. However, CSS is not working at all. I’ve double checked my html and everything seems fine. I’ve been playing around with some css and nothing works. I’ve also tried plugging in my code into to Codepen and it works fine on there.

Can someone please provide some insight?

<!DOCTYPE html>
<html>

  <head>
  <title>Forms</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    </head>

<body>
    <header> 
      <h1> Cheatsheet: Forms</h1>
      </header>

      <div class="section"> 
        <table>
         <thead>
            <tr>
              <th>
                <h2> Tag</h2> 
                </th>
              <th>
                <h2> Name </h2>
                </th>
              <th>
                <h2> Description </h2>
                </th>
              </tr>
              </thead>

              <tbody>
                <tr>
                  <td>
                    <h3> &lt;Input&gt;</h3>
                    </td>
                    <td>
                      <h3> Checkbox Type</h3>
                      </td>
                      <td> 
                        When using an HTML input element, the type="checkbox" attribute will render a single checkbox item. To create a group of checkboxes related to the same topic, they should all use the same name attribute. Since it’s a checkbox, multiple checkboxes can be selected for the same topic.
                        </td>
                        </tr>

                        <tr>
                          <td>
                            <h3> &lt;Textarea&gt;</h3>
                            </td>
                            <td> 
                              <h3>Textarea</h3>
                              </td>
                              <td>
                                The textarea element is used when creating a text-box for multi-line input (e.g. a comment section). The element supports the rows and cols attributes which determine the height and width, respectively, of the element.
                                </td>
        </tr>
       <tr>
          <td>
            <h3>&lt;Form&gt;</h3>
            </td>
            <td> 
              <h3>Form</h3>
              </td>
              <td> This element is used to collect and send information to an external source.&lt;form&gt can contain various input elements. When a user submits the form, information in these input elements is passed to the source which is named in the action attribute of the form.</td>
         </tr>
         <tr>
         <td>
           <h3>&lt;Select&gt;</h3>
           </td>
        <td>
          <h3> Select</h3>
          </td>
        <td> The "Select" element can be used to create a dropdown list. A list of choices for the dropdown list can be created using one or more &lt;option&gt; elements. By default, only one &lt;option&gt; can be selected at a time.

The value of the selected &lt;select&gt;’s name and the &lt;select&gt;’ s value attribute are sent as a key-value pair when the form is submitted.</td>
</tr>
</tbody>

  </table>
  </div>
  <footer>
    <p> For more information about Forms click <a href="https://www.codecademy.com/learn/paths/web-development/tracks/learn-html-web-dev-path/modules/learn-html-forms/cheatsheet">here</a>.</p>
    </footer>
  </body>
  </html>
1 Like

Hi,

The most probable issue is in the location of your file. For this line to work: <link rel="stylesheet" type="text/css" href="style.css"/> your style.css has to be in the exact same directory as your .html file that loads it. Otherwise you would out a different href for it (to point to the correct directory.

Hello,

Thank you for your reply.

In regards to this project, the css and html files are within the same folder. So in this case, wouldn’t href="/style.css" work?

   /   = root directory
   ./  = current directory
   ../ = Parent of curr. directory
   ../../ = parent of parent
2 Likes