Search code examples
htmlcssvisual-studio-codelinker-errorscodepen

Html and CSS linked in text editor but does not show in web browser

I'm new to coding just learning HTML and CSS so there is probably a simple solution I cannot see.

I have written HTML code and linked it to my CSS file in Visual Studio Code. I have test the link in the editor and it worked and I have also checked my class tags.

The weird thing is the CSS is displayed in browser if I run it in Code Pen with no problems however this is not the case in VSC.

Any ideas would be really helpful,

Following is my code blocks,

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title> Designer Form </title> 
        <meta charset=”utf-8”>
        <link type="stylesheet" href="designerform.css">
   </head> 
    <center> <h1>Fill out this form</h1> </center>
        <body> 
            <form class = "all"> 
                <!--Input for a text box-->
                <form1>
                    <h2> 1.</h2>
                <label for="Name">Name </label> 
                <input id="Name" type="text" name="Name"> 
                </form1>

                <!--Input for a number -->
                <form2> 
                <h3> 2. </h2>
                <label for="Age"> Age </label>
                <input id="Age" type="number" name="Age"> 
                </form2>

                <!--Input for telephone-->
                <form3> 
                <h4> 3. </h4>
                <label for="telephone">Telephone</label>
                <input id="telephone" type="tel" name="Telephone">
                </form3>

                <!--Input for email-->
                <form4> 
                <h5> 4. </h5>
                <label for="email"> Email:</label >
                <input id="email" type="email" name= "Email">
                </form4>

                <!--Input for calender-->
                <form5> 
                <h6> 5. </h6>
                <label for="calender"> Calender</label>
                <input id="calender" type="month" name= calender> 
                </form5>

                <!-- Input for search -->
                <form6> 
                <h7> 6. </h7>
                <label for="search">search</label>
                <input id="search" type="search" name="search">
                </form6>

            
                <!--Text area for longer form responses-->
                <form7> 
                <h8> 7. </h8>
                <label for="long response"> Tell me more...</label>
                <textarea id="long response" name= "long response"></textarea>
                </form7>
                    
                <!--Predertimed responses-->
                <form8> 
                <h9> 8. </h9>
                <label for= "Fav colours"> What is your colour?</label>
                <select id= "Fav colours"> 
                    <option value="colorRed"> Red</option>
                    <option value="colorBlue"> Blue</option>
                    <option value="colorYellow"> Yellow</option>
                </select>
                </form8>

                <!--Radio inputs-->
                <input type ="submit" value="Finish">
            </form> 
        </body> 
 </html>

and CSS

.all {background-color:  rgb(238, 129, 238);
  font-family: fantasy; }

h1 {text-align: center;
    color: #FFF;
    background-color:  rgb(102, 155, 204); }

Thanks in advance for your time.

Solution

  • the problem is with your link tag stylesheet should be rel not type. yours

    <link type="stylesheet" href="designerform.css">

    and should be like this

    <link rel="stylesheet" href="designerform.css">