CSS is not being applied to the html

user_16570427 0
Viewed 51

I have a form in HTML as follows:

<form action="CreateArticle.php" method="POST">
    <label for="text-input">Title</label>
    <br>
    <div>
        <input class="input" id="text-input" type="text" style="width:800px;"/>
        <br>
        <label for="textarea">Abstract</label>
        <br>
        <textarea class="input-width" id="textarea"></textarea>
    </div>
</form>

And I have applied simple CSS to the textarea from an external file as follows:

textarea.input-width {
  width:800px;
  height:200px;
}

I have included the style sheet in the html as:

 <link rel="stylesheet" type="text/css" href="styles.css"/>

still the width and height are not being applied to the HTML. I am not a front-end developer, so I am pretty dumb when it comes to HTML and CSS, so please any help is appreciated.

css html
2 Answers

It seems to have an effect when I do that example in local files.

With CSS:
enter image description here

Without CSS: enter image description here

So I think perhaps your code is fine, and it's just that your website is still cached by your browser. Try reloading with CtrlShiftR or if it works in a different browser.

user_25504060

(This answer should be comment, but I needed a code snippet)

Your CSS and HTML seem correct, if you run the code snippet below you'll see that the styling is actually being applied.

This lets me believe that your stylesheet is not being loaded properly. Can you verify in your devtools that the <link /> tag exists and the styles load properly? You can do this by right clicking on the textarea element and clicking inspect element. You should now see several columns or rows depending on your devtools window orientation which show the HTML and CSS for the selected element. Your CSS code should be visible over there.

textarea.input-width {
  width:800px;
  height:200px;
}
<form action="CreateArticle.php" method="POST">
    <label for="text-input">Title</label>
    <br>
    <div>
        <input class="input" id="text-input" type="text" style="width:800px;"/>
        <br>
        <label for="textarea">Abstract</label>
        <br>
        <textarea class="input-width" id="textarea"></textarea>
    </div>
</form>

user_83274580
Related