Why using span tag give me result that is not to be expected?

santosh shah 0
Viewed 34

I wanted to get the result like this. enter image description here

My code is :

<!DOCTYPE html>
<html>
<head>
<style>
span{ background-color: rgb(33, 30, 47);
            color: rgb(147, 149, 152);}
</head>
<body>
<pre>
<code>
<span>// Prints 5 to the console</br>
                console.log(5);
</span>
</code>
</pre>
</body>
</html>

But I got:

enter image description here

html
2 Answers

Firstly your style tag isn't closed properly. I have written the code to exactly simulate the styling you need. You have to embed all your elements into a div container, adjust the width and then apply box properties.

<html>
<head>
    <style>
        div {
            background-color: rgb(33, 30, 47);
            color: rgb(147, 149, 152);
            width: 200px;
            padding: 25px;
        }
        .red{
            color:red
        }
        .blue{
            color:skyblue
        }
        .white{
            color:white
        }
    </style>
</head>

<body>
    <div>
<pre>
// Prints 5 to the console
<span class="red">console</span><span class="white">.</span><span class="blue">log</span><span class="white">(</span><span class="red">5</span><span class="white">);</span>

</pre>
    </div>
</body>

</html>

Himani Dadem0

I took some time to play around with your code. Your <style> tag in HTML should be all together, or housed if that makes sense. Your <style> attribute is now all together at the top.

<style>
    span {
        background-color: rgb(33, 30, 47);
        color: rgb(147, 149, 152);
    }
</style>
Marjonni0
Related