Menu
I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem?
index.html
<!DOCTYPE html> <html> <head> <title>Home Page</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta name="viewport" content="width=1100"> </head> <body> <div id="main"> Hello </div> </body> </html> style.css
body{ background-color: #F9F9F9; background-image: url(images/bg3.png); background-position: center top; background-repeat: repeat; text-shadow: #FFFFFF 0px 1px 0px; font-family: "Georgia", "Times", serif; -webkit-font-smoothing: antialiased; } a{ text-decoration: none; } #main{ margin: 50px auto 50px auto; width: 1000px; min-height: 500px; padding: 0px 20px 0px 20px; } The above doesn't work. Adding the css inline in index.html works fine though
<!DOCTYPE html> <html> <head> <title>Homepage</title> <style type="text/css" media="screen"> body { background-color: #F9F9F9; background-image: url(images/bg3.png); background-position: center top; background-repeat: repeat; text-shadow: #FFFFFF 0px 1px 0px; font-family: "Georgia", "Times", serif; -webkit-font-smoothing: antialiased; } a { text-decoration: none; } #main { margin: 50px auto 50px auto; width: 1000px; min-height: 500px; padding: 0px 20px 0px 20px; } </style> <meta name="viewport" content="width=1100"> </head> <body> <div id="main"> Hello </div> </body> </html> 
514
Make sure the link tag is at the right place If you put the <link> tag inside another valid header tag like <title> or <script> tag, then the CSS won't work. The external style CAN be put inside the <body> tag, although it's recommended to put it in the <head> tag to load the style before the page content.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section.
Make sure that your CSS and HTM/HTML files use the same encoding ! If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well. IE and Edge are not fussy : stylesheets are rendered regardless of the encodings. But Chrome is totally intolerant of unmatched encodings.
Add
type="text/css" to your link tag
While this may no longer be necessary in modern browsers the HTML4 specification declared this a required attribute.
type = content-type [CI]
This attribute specifies the style sheet language of the element's contents and overrides the default style sheet language. The style sheet language is specified as a content type (e.g., "text/css"). Authors must supply a value for this attribute; there is no default value for this attribute.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
