CODEWITHSUNDEEP
htmlcss
Sukces Tuber
Sukces Tuber

Reputation: 21

Why is <style> tag not working in this code?

So tag never seemed to like me a lot. It always caused me problems, but it was always turning out that their solution was obvious and I was just stupid. But this time, I am spending 4TH HOUR trying to figure out what could've gone wrong (this is exactly why I even named a body content div "body", IK this is unnecessary lol). Here is the code:

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

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

<body>
<div class="body">
<strong>
<p style="position:absolute;top:100px;left:20px;font-size:40px;">Hello</p>
<p style="position:absolute;top:140px;left:20px;">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>

</div>
</body>


<!--break-->

</html>`

Upvotes: 1

Views: 1801

Answers (4)

l2aelba
l2aelba

Reputation: 22167

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)

Upvotes: 1

Mayukh Chakraborty
Mayukh Chakraborty

Reputation: 175

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>`

Upvotes: 1

RoToRa
RoToRa

Reputation: 38400

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:

  1. Learn to use the browser's debugger (DOM Inspector). It will show you information about the elements such as their size and applied styles.

  2. 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>.

Upvotes: 5

vanowm
vanowm

Reputation: 10201

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

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

Upvotes: -1

Related Questions