Why is – MattHamer5 Sep 06 '21 at 12:39

Question

It's because the <div class="body"> has a height of 0. It only contains absolute positioned elements, which don't take up any space, so its basically empty.

Some suggestions:

Learn to use the browser's debugger (DOM Inspector). It will show you information about the elements such as their size and applied styles.
Avoid absolute positioning. It basically breaks how CSS works which makes it difficult for beginners.

EDIT: One more thing: You have a opening <strong> tag without a closing </strong>. Keep in mind you can't put block elements (such as <p>) inside inline elements such as <strong>.

score 4 · Answer 1 · answered Sep 06 '21 at 12:40

It's because the <div class="body"> has a height of 0. It only contains absolute positioned elements, which don't take up any space, so its basically empty.

Some suggestions:

Learn to use the browser's debugger (DOM Inspector). It will show you information about the elements such as their size and applied styles.
Avoid absolute positioning. It basically breaks how CSS works which makes it difficult for beginners.

EDIT: One more thing: You have a opening <strong> tag without a closing </strong>. Keep in mind you can't put block elements (such as <p>) inside inline elements such as <strong>.

DevMayukh · Answer 2 · 2021-09-06T12:44:33.227

I found your mistake.

Navigate to html tag, there you can see the style attribute, with color=white. This is making all the text white, which is same as canvas therefore it is invisible.

Now, the text tags are absolutely positioned, meaning they are outside the flow, so the height and width of the DIV is 0, so you cannot see any color because the div is essentially a 0x0 box.

I have adjusted the changes, please check:

<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>

<style>
    .body {
    background-color:#1A2B30;
    }
    </style>
<!--break-->

<body>
<div class="body">
<strong>
<p>Hello</p>
<p>This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</strong>
</div>
</body>


<!--break-->

</html>`

l2aelba · Answer 3 · 2021-09-06T12:47:51.210

1

I don't think it's about where <style> is.

But it's your children (elements) are postition: absolute; so .body is 0 height.

Try:

<div class="body" style="height:100px">

So you I will see the problem

(This is just testing, please look at RoToRa's answer)

edited Sep 06 '21 at 12:47

answered Sep 06 '21 at 12:40

l2aelba

21,591
22
102
138

Don't teach beginners to hard code things like heights. – RoToRa Sep 06 '21 at 12:45
1

Well, thanks, that fixed my problem. And I am not a beginner, I actually did things like this on my previous websites, but now it seems like it worked quite differently. Thanks Y'all anyway – Sukces Tuber Sep 06 '21 at 12:53

score -1 · Answer 4 · answered Sep 06 '21 at 12:34

-1

Because it's outside of closing </head> and opening <body>

It supposed to be between <head> and </head>

answered Sep 06 '21 at 12:34

vanowm

9,466
2
21
37

Style can be anywhere – DevMayukh Sep 06 '21 at 12:39
While that is true, it's not the reason it doesn't work. – RoToRa Sep 06 '21 at 12:41

4 Answers4