HTML & CSS Background problemn

[Saumyojit]

<div id="rt"></div> this line i have written in index.html file

#rt {
  background-color: red;
  width:70%;
  height: 300px;
}

this part i have written in .css file .
Output is showing the right : A red background color block is showing .

NOw if i use inline css here, there is no blue background coming .
But if i write some text in between div tag then the container with background blue is showing why so ?

<div style="height:60%; width:50%; background:blue;">
</div>

 

[Saumyojit]

in my experience, by default, the height of the <body> is the height of its content. So if there is text inside it, its height will match the height of the text and if there is nothing inside it, it will have a height of 0

absolutley right

 

[Saumyojit]

@LTomy

Why writing like this <div style="background:blue; width:200px;"></div> does not create anything .
But replacing width with height creates a block.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

So i was seeing this video about nbsp being used to force non line break .
So if this is my text suppose inside body element i have written this
Welcome to jits website I am hunting for a job Welcome here everyone to see the extra space please I am passionate for coding I am depressed and sad please help This is a non breaking text.
Now i see the text is breaking at after the word "non"
So acc to the video i place &nbsp; between every two words .
so my code looks like this

Welcome to jits website I am hunting for a job Welcome here everyone to see the extra space please I am passionate for 
coding I am depressed and sad please help This is a non breaking text.

STILL My output is :

 

[LTomy]

Hi,

Simply add the CSS style white-space: pre; to the text element. That way, no newline will be automatically added.

Basically, the text will be displayed exactly the way it is inserted inside the element.

The text will be displayed on one line:

<p style="white-space: pre;">The sky is blue.</p>

Here the text will be displayed on 3 lines:

<p style="white-space: pre;">The
sky is
blue.</p>

....

.... I am passionate for coding I am depressed and sad please help

Lol....

 

[LTomy]

Why writing like this <div style="background:blue; width:200px;"></div> does not create anything .
But replacing width with height creates a block.

About 'background:blue;', isn't it 'background-color:blue;'?

By default the height of an empty <div> will be about 0px, so it will not be displayed. You must give it an height/width or put content inside it.

 

[Saumyojit]

I haven't gone so deep into CSS tutorial .
I was unaware of the pre value of the white space .
But I was reading about HTML entities where I saw nbsp .
In the video that method works fine but why not in my case it is not working.
My editor is atom and browser is Chrome.

As for the div tag
<div style="background:blue; height:200px;"></div>

Here I haven't given any width but output is showing .
That means any block element must be given a height value in px if it has empty content.(height is necessary as it is block element right unlike inline element)

 

[Saumyojit]

I haven't gone so deep into CSS tutorial .
I was unaware of the pre value of the white space .
But I was reading about HTML entities where I saw nbsp .
In the video that method works fine but why not in my case it is not working.
My editor is atom and browser is Chrome.

As for the div tag
<div style="background:blue; height:200px;"></div>

Here I haven't given any width but output is showing .
That means any block element must be given a height value in px if it has empty content.(height is necessary as it is block element right unlike inline element)

I found out the solution to the for part .
I needed to write the whole text in a complete single line then only &nbsp works.

 

[Saumyojit]

As for the div tag
<div style="background:blue; height:200px;"></div>

Here I haven't given any width but output is showing .
That means any block element must be given a height value in px if it has empty content.(height is necessary as it is block element right unlike inline element)

Height is a necessary property that has to be given for any empty block elements to be visible on the browser.
Width can be given or not. It is not necessary right.
@LTomy
Am I right?
Is it something to do with inline and block elements?

 

[LTomy]

The value of the height property have to be specified only if there is nothing inside the block element.

 

[Saumyojit]

The value of the height property have to be specified only if there is nothing inside the block element.

Yes I got it.
But why only height is necessary?

 

[LTomy]

It seems that, by default, a <div> element takes all the horizontal space it can take.

 

[Saumyojit]

<!DOCTYPE html>
<html>
    <head>
        <title>Foo</title>
        <style type="text/css">
            a:link {
                color: red;
            }
            a:hover{
                color: green;
            }
        </style>
    </head>
    <body>
           <div class="foo">
            <a href="https://pharmeasy.in/online-medicine-order/becosules-z-strip-of-20-capsules-36990">Example</a>
        </div>
    </body>
</html>

When link is after hover why hover is not working?
I saw stack overflow and all they say is that the cascading rules will hide the 'color' property of the A:hover rule.
Is there any other reason??

 

[Saumyojit]

@LTomy

 

[BorkedSystem32]

@Saumyojit, please use the BBCode feature to format your code in. It makes it easier for us to read your code. Info here: https://codeforum.org/threads/how-to-post-your-code-into-threads.183/

Also, may I ask why you're asking so many questions over a background? Are you asking out of curiosity or are you hoping to try and understand how the code is read and processed? It'd be interesting to know because this thread has gone on for a while now over a single issue. Perhaps I'm just doing a bad job of keeping up, however.

 

[Saumyojit]

@Saumyojit, please use the BBCode feature to format your code in. It makes it easier for us to read your code. Info here: https://codeforum.org/threads/how-to-post-your-code-into-threads.183/

Also, may I ask why you're asking so many questions over a background? Are you asking out of curiosity or are you hoping to try and understand how the code is read and processed? It'd be interesting to know because this thread has gone on for a while now over a single issue. Perhaps I'm just doing a bad job of keeping up, however.

asking out of curiosity
Now the doubt is new please explain the answer of user31782
in https://stackoverflow.com/questions...o-avisited-selector-override-ahover-aactive-s

 

[LTomy]

asking out of curiosity
Now the doubt is new please explain the answer of user31782
in https://stackoverflow.com/questions...o-avisited-selector-override-ahover-aactive-s

You will have to be more specific, he wrote a bunch of things.

What you want to do should not be hard. Here the link will be red, and blue when hovered:

a{
    color: red;
}
a:hover{
    color: blue;
}

 

[Saumyojit]

<style type="text/css">
           
            a:hover{
                color: green;
            }

a:link {
                color: red;
            }
        </style>
       
        Why this does not work?

We see that both :link and :hover pseudo classes are capable to define the hover state -- So if you assign these two pseudo-classes to a particular element then the one mentioned at last in the css file wins. This is the reason we say :link will override :hover when the former is mentioned below the later

What does he say by the above line?
When we write link then hover then both selector wins but he says last one should win .

 

[LTomy]

a:link is used to define the style of an unvisited link. a:visited is used to define the style of a visited link.

Basically, the last style defined wins:

p{
    color: red;
}
p{
    color: grey;
}

The text will be grey.

I do not get what he means though, since 'hover' and 'link' do not seem to have the same effect.

By the way, you can do the following to define the hover color of already visited links:

a:visited:hover{
    color: purple;
}

 

[Saumyojit]

I still don't understand why hover then link does not work .all they say is that the cascading rules will hide the 'color' property of the A:hover rule.

 

[LTomy]

What browser are you using?

 

[LTomy]

Look at the following styles:

a{
    color: blue;
}
a:hover{
    color: red;
}
a:visited{
    color: orange;
}

If a link gets visited. Then, the property a:hover will not apply to it anymore. You then have to define a:visited:hover if you want to change its color when hovered.

However, if you only define the following styles:

a{
    color: blue;
}
a:hover{
    color: red;
}

The link will always stay in 'unvisited' state and therefore the styles will always apply to them.