Hi, ich baue gerade eine Website mit HTML und CSS in VS Code. Wenn ich die HTML Datei im Browser öffne wird allerdings nur das rohe HTML Dokument ausgeführt, ohne das CSS design. Wenn ich die Website aber mit Live Server öffne sieht die Website so aus wie sie aussehen sollte, also mit dem CSS design. Was habe ich falsch gemacht? Habe es auch schon in verschiedenen Browsern getestet (Chrome, Opera GX, Edge, Firefox).
Der HTML Code:
Der CSS Code:
Screenshot des Ordners, falls ich die CSS Datei falsch verlinkt habe.
Der HTML Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/CSS/style.css">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<section class="red">
<h1>Text 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis ex eveniet possimus unde impedit atque accusamus aut alias? Labore esse odit, aperiam explicabo excepturi illo a illum tempora et magni!</p>
</section>
<section class="dark">
<h1>Text 2</h1>
<p>Fuga porro itaque iste error vero delectus debitis, sed, adipisci aliquam, necessitatibus impedit recusandae illo quam magnam saepe earum nemo quasi reiciendis blanditiis! Ullam vero et ad eius, nostrum voluptatum.</p>
</section>
<section class="pink">
<h1>Text 3</h1>
<p>Eius, a sapiente. Commodi nesciunt, necessitatibus consequuntur, saepe iure natus vel voluptates nostrum ab debitis a nulla itaque sapiente soluta illum! Dolorum laboriosam quam commodi labore doloremque aut ducimus amet.</p>
</section>
<section class="blue">
<h1>Text 4</h1>
<p>Ad officia obcaecati repellendus, similique adipisci alias ratione fugit facere deleniti doloremque porro harum optio maiores culpa sapiente tenetur animi esse voluptatum. Voluptatem veritatis velit minima eos esse distinctio eaque!</p>
</section>
<section class="red">
<h1>Text 5</h1>
<p>Ut ipsum necessitatibus temporibus eligendi quia labore, repudiandae unde tenetur. Officiis amet minima explicabo quisquam porro possimus, unde iste, molestiae qui libero, aperiam quae aspernatur. Itaque error amet aut consectetur.</p>
</section>
<section class="dark">
<h1>Text 6</h1>
<p>Voluptatibus laborum, saepe eaque omnis quis illum, placeat nihil quibusdam architecto ullam nostrum optio minus rem ratione iste repellat cumque repudiandae nam aperiam aut aliquid nesciunt. Autem veritatis ut quaerat!</p>
</section>
<section class="turquoise">
<h1>Text 7</h1>
<p>Quam aspernatur ipsum, ratione iure modi voluptatem a quo commodi fugiat enim nisi delectus blanditiis quae officia accusamus laborum consectetur non aperiam unde totam? Labore totam iusto debitis assumenda repudiandae.</p>
</section>
<section class="pink">
<h1>Text 8</h1>
<p>Illum sit atque facilis incidunt vitae facere dicta dolorem, assumenda iusto commodi exercitationem similique, velit accusamus non, in enim! Facilis cum accusamus magni omnis voluptas eius doloremque, quaerat eum dolorem?</p>
</section>
</body>
</html>Der CSS Code:
CSS:
body {
margin: 0;
font-family: "Roboto";
color: white;
background: #202731;
}
section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: 400px;
padding: 100px;
}
.blue {
background: #3c31dd;
}
.red {
background: #d91e1e;
}
.pink {
background: #ff0066;
}
.dark {
background: #0f0f10;
}
.turquoise {
background: #16c9a0;
}Screenshot des Ordners, falls ich die CSS Datei falsch verlinkt habe.
