The use of the display property that specifies how to display an element. now create a web page named display.html to understand the working of display property .
<!DOCTYPE HTML>
<HEAD>
<TITLE>DISPLAY PROPERTY </TITLE>
<STYLE type="text/css">
p
{
display:inline;
}
span
{
display:block;
}
h1
{
display:none;
}
</STYLE>
</HEAD>
<BODY>
<H2>HELLO DEAR ALL</H2>
<p>THIS IS </p>
<p>WEB PAGE PARAGRAPH</p>
<H2>HELLO DEAR ALL</H2>
<span>This is </span>
<span>Web page paragraph</span>
<h1>hello world</h1>
</BODY>
</HTML>
Both the P elements have been assigned with the inline value of display property. Therefore both P elements appear on the same line. The SPAN elements are assigned with the block value of the display property therefore they appear in a block form with line breaks before and after them. finally, you notice that the H1 element is assigned with the none value of the display property. Therefore the H1 element is not displayed on the Web page.
The output of the above Web page :
<!DOCTYPE HTML>
<HEAD>
<TITLE>DISPLAY PROPERTY </TITLE>
<STYLE type="text/css">
p
{
display:inline;
}
span
{
display:block;
}
h1
{
display:none;
}
</STYLE>
</HEAD>
<BODY>
<H2>HELLO DEAR ALL</H2>
<p>THIS IS </p>
<p>WEB PAGE PARAGRAPH</p>
<H2>HELLO DEAR ALL</H2>
<span>This is </span>
<span>Web page paragraph</span>
<h1>hello world</h1>
</BODY>
</HTML>
Both the P elements have been assigned with the inline value of display property. Therefore both P elements appear on the same line. The SPAN elements are assigned with the block value of the display property therefore they appear in a block form with line breaks before and after them. finally, you notice that the H1 element is assigned with the none value of the display property. Therefore the H1 element is not displayed on the Web page.
The output of the above Web page :
No comments:
Post a Comment