Internal HTML Styles Not Applying to Elements? (HTML/CSS)
Question
I would like to use an internal style sheet instead of an external style sheet, but for some reason, the styles are not applying to my HTML?
How can I get my styles to apply to my HTML, without making an external CSS sheet, or using inline styles?
<!DOCTYPE html> <html lang="en"> <head> <title>Contact Us</title> <style type=”text/css”> form{ height: 350px; width: 200px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: red; } </style> </head> <body> <header> <h1>Contact</h1> </header> <nav></nav> <main> <h2>Send us feedback</h2> <form action="" method="post" autocomplete="on"> <label for="fName">First name</label> <input type="text" name="fName" placeholder="First name"> <label for="lName">Last name</label> <input type="text" name="lName" placeholder="Last name"> <label for="email">Email</label> <input type="email" name="email" autocomplete="off" placeholder="Email"> <label for="pNumber">Phone number</label> <input type="number" name="pNumber" placeholder="Phone number"> <label for="comments">Comments</label> <textarea name="comments" cols="" rows="" placeholder="Comments"></textarea> <input name="submit" type="submit"> </form> </main> <footer></footer> </body> </html>
2 answers
solution1
2 ACCPTED 2021-07-07 00:26:10
Remove type="text/css" from your style tag, that is only needed for importing a stylesheet with a <link /> tag
<!DOCTYPE html> <html lang="en"> <head> <title>Contact Us</title> <style> form { height: 350px; width: 200px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: red; } </style> </head> <body> <header> <h1>Contact</h1> </header> <nav></nav> <main> <h2>Send us feedback</h2> <form action="" method="post" autocomplete="on"> <label for="fName">First name</label> <input type="text" name="fName" placeholder="First name"> <label for="lName">Last name</label> <input type="text" name="lName" placeholder="Last name"> <label for="email">Email</label> <input type="email" name="email" autocomplete="off" placeholder="Email"> <label for="pNumber">Phone number</label> <input type="number" name="pNumber" placeholder="Phone number"> <label for="comments">Comments</label> <textarea name="comments" cols="" rows="" placeholder="Comments"></textarea> <input name="submit" type="submit"> </form> </main> <footer></footer> </body> </html>
solution2
1 2021-07-07 00:26:29
Looks like for some reason the type attribute was making it mad. Removing it fixes it:
<!DOCTYPE html> <html lang="en"> <head> <title>Contact Us</title> <style> form{ height: 350px; width: 200px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: red; } </style> </head> <body> <header> <h1>Contact</h1> </header> <nav></nav> <main> <h2>Send us feedback</h2> <form action="" method="post" autocomplete="on"> <label for="fName">First name</label> <input type="text" name="fName" placeholder="First name"> <label for="lName">Last name</label> <input type="text" name="lName" placeholder="Last name"> <label for="email">Email</label> <input type="email" name="email" autocomplete="off" placeholder="Email"> <label for="pNumber">Phone number</label> <input type="number" name="pNumber" placeholder="Phone number"> <label for="comments">Comments</label> <textarea name="comments" cols="" rows="" placeholder="Comments"></textarea> <input name="submit" type="submit"> </form> </main> <footer></footer> </body> </html>
For what it's worth MDN seems to indicate the way you were using the type here attribute should be valid . However, they also note:
Note: There is very little reason to include this attribute in modern web documents.
... and a bit further down in the browser compatibility section they mark it "deprecated"-- so seems like it is best omitted.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.