Visual Studio Code Extension: HTML Preview; External CSS it's not working
Question
I'm struggling for hours now why the HTML Preview is not working, I search on Google even on this site and nothing helped, so that's why I post this question.
I tried to make a separate CSS file and also embedded CSS style into the page.
Here is my code
Head
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Ana Sayfa</title>
Body
<div id="sayfa">
<header>
<div id="banner">
Banner
</div>
<div id="logo">
Logo
</div>
<div id="sosyalmedya">
Sosyal Medya
<div class="face"></div>
<div class="twit"></div>
<div class="insta"></div>
</div>
</header>
<nav>
<div id="ana-menu">
Ana Menü
</div>
</nav>
<section>
<div id="icerik">
İçerik
</div>
</section>
<aside>
<div id="yan-menu">
Yan Menü
</div>
</aside>
<footer>
<div id="alt-menu">
Alt Menü
</div>
</footer>
</div>
1 answers
solution1
0 2021-10-30 19:21:45
There are a couple of things that you should look at.
First you probably need to wrap your head and body in a document to have a full valid html document.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
You also want to close your single tags in the head. Most of the time we open and close tag like this.
<div></div>
Single Tags, like an image will be represented as one tag tag is closing within itself.
<img attr="..." />
The forward slash is closing that single tag. Your Meta tags are not closed.
They should be.
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
I'm not sure this will fix your issue because but it will get you closer to a standard html document.
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.