CSS Layout In Hindi – Display Property In Hindi

CSS

CSS Layout In Hindi- Display Property In Hindi – Display Property Batati Hai Ki Web Page Me Koi Element (Heading, Paragraph, Link Etc.) Kese Dikhega Ya Fir Nhi Dikhega. Ek Web Page Ka Layout Bnane Me Display Property Bahut Kam Ati Hai Kyoki Display Property Se Hi Ham Element Ko Web Page Me Sahi Tarike Se Set Kr Pate Hai, Isliye Display Property CSS Ki Sabse Important Property Hai |

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

Display Property In CSS In Hindi

Har Ek HTML Element (Heading,Paragraph,Div Etc. ) Ki Ek Default Display Value Hoti Hai Aur Ye Is Bat Par Depend Karta Hai Ki Vo Element Kis Prakar Ka Hai , Mostly Html Element Ki Default Display Value Block Ya Inline Hoti Hai |

Block-level Elements In CSS In Hindi

Ek Block Level Element Hamesha Ek Nyi Line Se Start Hota Hai, Aur Jitni Width Available Hai Vo Puri Width Le Leta Hai |

Block-Level-Element Ke Examples :

  • <div>
  • <h1> – <h6>
  • <footer>
  • <p>
  • <form>
  • <header>
  • <section>

Example :

<!DOCTYPE html>
<html>
<head>
<style>
 p {
  border : 2px solid red;
}

h4 {
	border : 2px solid green;
}
</style>
</head>
<body>

<h2 style="text-align:center">Master Programing CSS Display Tutorial</h2>

<p>This is paragraph tag</p>
<h4>This is Heading-4 tag</h4>
</body>
</html>

Output :

To Hmne Dekha Ki <p> Aur <h4> Jinki Default Display Value Block Hai , Vo Ek Nyi Line Se Start Hote Hai Sath Hi Full Width Lete Hai |

Inline Elements In CSS In Hindi

Ek Inline Element Nyi Line Se Start Nhi Hokar Same Line Se Hi Start Hota Hai Aur Sirf Utni Hi Width Leta Hai Jitni Us Element Ko Jarurt Hai |

Inline Element Ke Examaples :

  • <a>
  • <img>
  • <span>

Example :

<!DOCTYPE html>
<html>
<head>
<style>
span {
  border : 2px solid red;
}

a{
	border : 2px solid green;
}
</style>
</head>
<body>

<span>This is paragraph tag</span>
<a href="">This is link</a>
</body>
</html>

Output :

To Hmne Dekha Ki <span> Aur <a> Tag Jinki Default Display Inline Hai , Vo Same Line Me Hi Start Hote Hai Aur Jitni Width Ki Required Hai Vo Unti Hi Width Lete Hai |

Display: none In CSS In Hindi

display: none; Set Krne Se Element Display Nhi Hoga , Is Property Ka Use Mainly JavaScript Ke Sath Kisi Element Ko Bina Delete Ya Dubara Create Kre Us Element Ko Hide Aur Show Krne Ke Liye Kiya Jata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.a{
  display : none;
}

</style>
</head>
<body>

<p class="a">Paragraph from class a</p>
<p class="b">Paragraph from class b </p>
</body>
</html>

Output :

Hmne Class a ki Display None Set Ki Thi ,Isliye Class a Ka Content Dikhayi Nhi Deta |

Override The Default Display Value In CSS In Hindi

Jaisa Ki Hmne Dekha Tha Ki Har Ek HTML Element Ki Kuchh Na Kuchh Default Display Value Hoti Hai , But Ham Us Default Display Value Ko Change Bhi Kar Skte Hai ,Use Override Kar Skte Hai Aur Apni Jarurt Ke Hisab Se Use Kuchh Bhi Display Value De Skte Hai , Matlb Ek Block Element Ko Inline Ya Inline Element Ko Block Element Bna Skte Hai |

Example : <span> Tag Ki Default Display Value Inline Hoti Hai ,Ham Display Value Ko Override Krke Dekhte Hai

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display:block ;
  border : 2px solid red;
}
</style>
</head>
<body>

<a href="">This is Link</a> 
<span>CSS Display Property In Hindi</span>

</body>
</html>

Output :

Upr Example Me Hmne Do Inline Display Wale Tag Liye Hai , But Hmne <span> Ki Display Inline Se Override Kr Ke Block Kr Di , Isliye <span> Tag Ka Content ,Ek Nyi Line Se Start Hota Hai Aur Full Width Leta Hai |

Hide An Element In CSS In Hindi

display:none; Aur visibility:hidden; Properties Set Kr Ke Kisi Bhi Element Ko Hide Kiya Ja Skta Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.a {
	display : none;
}

.b {
	visibility: hidden;	
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="a">This is a hidden heading</h1>
<h1 class="b">This is a hidden heading</h1>
</body>
</html>

Output :

Upr Example Me Hmne Tin <h1> Liye Hai, Jinme Se Ek Ke Style Me display : none ; Aur Ek Ke Style Me visibility : hidden ; Set Ki Hai , Jisse Vo Dono , Hide Ho Gye , To In Do Properties Ki Help Se Ham Kisi Bhi Element Ko Hide Kar Skte Hai |

Leave a Reply

Your email address will not be published. Required fields are marked *