CSS Lists In Hindi – Styling Lists In CSS In Hindi – List Html Ka Bahut Hi Important Topic Hai, Kyoki Ek Webpage Me List Bnane Ki Jarurt Hoti Hi Hai , Kyoki List Ki Wajah Se Webpage Bahut Hi Organized Lagta Hai Aur Uske Points Ko Pdhna Bhi Asaan Ho Jata Hai. Html Se Ham List Bna Skte Hai But Lists Ko Style Dene Ke Liye CSS ki Jarurut Hoti Hai ,Jisse Ki Hamari Lists Jyada Attractive Dikhe |
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 |
Styling Lists In CSS In Hindi
Contents
Ham Is Tutorial Me Sikhenge Ki Ek Simple Html List Ko Css Ki Help Se Attractive Kese Bna Skte Hai | Html Lists Ko Style Dene Se Phle Apko Html List Ki Knowledge Hona Bahut Jaruri Hai|
Html Lists Learn Kre – HTML Lists In Hindi – How To Insert Lists In HTML In Hindi
CSS List Properties
Ek List Ko In 4 Tariko Se Stylish Bnaya Ja Skta Hai –
- Ordered Lists Ke Item Ke Liye Different-Different Markers (eg – upper-roman ,lower-roman etc.) Use Krke.
- Unordered Lists Ke Item Ke Liye Different-Different Markers (eg – circle ,square etc.) Use Krke.
- List Item Ke Marker Ke Rup Me Image Set Krke.
- Lists Ke Background Me Ya Iist Item Ke Background Me Color Add Krke.
Different List Item Markers In CSS Hindi
Ek List Ko Stylish Banane Ke Liye ,Ydi Ham Usme Ek Achha Sa List Item Marker Use Kre To List Bahut Attractive Lgne Lgti Hai |
list-style-type Property Se Ham List Itam Marker Set Krte Hai |
Example : Ham Kuchh Lists Bnate Hai Aur Unko Different-Different list-style-type Dete Hai
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Master Programing CSS Lists Tutorial</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Maths</li>
<li>Physics</li>
<li>English</li>
</ul>
<ul class="b">
<li>Maths</li>
<li>Physics</li>
<li>English</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Maths</li>
<li>Physics</li>
<li>English </li>
</ol>
<ol class="d">
<li>Maths</li>
<li>Physics</li>
<li>English</li>
</ol>
</body>
</html>Output :
Upar Diye Gye Example Me Hmne Dekha Ki list-style-type Property Ko Use Krke Kis Prkar Item Marker Set Kiya Ja Skta Hai |
An Image as The List Item Marker In CSS In Hindi
List Item Marker Ke Rup Me Image Ka Bhi Istemal Kiya Ja Skta Hai, Iske Liye list-style-image Property Ka Use Kiya Jata Hai | Agr Browser Ko Proper Image Nhi Milti To Browser List Type Ke According Default Marker Show Krta Hai |
Example : list-style-image property me apni Image Ka Path Url Me Set Krke Image Ko Marker Ke Rup Me Set Kr Skte Hai | Iske Liye Apko Image Bahut Chhoti Size Me Change Krna Hoga |
<!DOCTYPE html>
<html>
<head>
<style>
/* Image Path Set Kre */
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<h2>Master Programing CSS Lists Tutorial</h2>
<ul>
<li>Maths</li>
<li>Physics</li>
<li>English</li>
</ul>
</body>
</html>Upr Diye Gye Example Me Browser Ko Proper Image Milti Nhi Hai , Isliye Browser Unordered List Jo Ki Hmne Bnai Hai Uske Default Marker Bullets Ko Show Krta Hai |
Position The List Item Markers In CSS In Hindi
List Item Marker (eg – circle,square etc.) Ki Position Ko Set Krne Ke Liye list-style-position property Ka Use Kiya Jata Hai |
list-style-position: outside; Set Kre To Item Marker (Bullets Points) List Item Ke Bahar Rhte Hai , By Default Bhi List Hme Is Prkar Ki Hi Dikhayi Deti Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-position: outside;
}
ol {
list-style-position: outside;
}
</style>
</head>
<body>
<h1>Master Programing CSS Lists Tutorial</h1>
<ul>
<li>Math</li>
<li>Physics</li>
<li>English</li>
</ul>
<ol>
<li>Math</li>
<li>Physics</li>
<li>English</li>
</ol>
</body>
</html>Output :
Jaisa Upr Diye Gye Example Me Ham Dekh Skte Hai Ki List Item Marker Bullet Aur Numbers Actual List Ke Bahar Dikh Rhe Hai |
list-style-position: inside; Set Kre To Item Marker (Bullets Points) List Item Ke Sath/Andar Rhte Hai |
Example : Ham Do Unorder List Aur Ek Ordered List Lete Hai , Aur Unme Se Ek Unorderd List Ke lIye list-style-position: outside; Set Krte Hai , Aur Dusri Unorderd List And Ordered List Ke Liye list-style-position: inside; Set Krte Hai Taki Hme Difference Pta Chl ske |
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
ol {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Master Programing CSS Lists Tutorial</h1>
<ul class="a">
<li>Math</li>
<li>Physics</li>
<li>English</li>
</ul>
<ul class="b">
<li>Math</li>
<li>Physics</li>
<li>English</li>
</ul>
<ol>
<li>Math</li>
<li>Physics</li>
<li>English</li>
</ol>
</body>
</html>Output :
Upr Diye Gye Example Me Hmne Pahli List Me list-style-type : outside Set Kiya Hai Isliye List Item Marker (Bullets Point) List ke Bahar Dikh Rhe Hai , Lekin Niche Ki Do List Me Hmne list-style-type : inside Set Kiya Hai Isliye List Item Marker (Bullets & Numbers) Hme Actual List Jha Se Start H ,Vha Se Dikh Rhe Hai |
Remove Lists Default Settings In CSS In Hindi
Html Lists Ki Kuchh Default Settings Hoti Hai Matalab By Default Lists Me Item Marker, Margin, Padding Etc. Hote Hai | Aur Yadi Hame Simple List Banani Hai To In Default Setting Ko CSS Properties Ki Help Se Remove Kr Skte Hai |
list-style-type:none Property Item Marker/Bullets Ko Remove Kar Deti Hai , List Se Margin Aur Padding Ko Ko Remove Krne Ke Liye margin:0 , padding:0 Set Krna Hota Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>Master Programing CSS List Tutorial</h2>
<p>Default list:</p>
<ul>
<li>Maths</li>
<li>Physics</li>
<li>English</li>
</ul>
<p>Remove bullets, margin and padding:</p>
<ul class="a">
<li>Maths</li>
<li>Physics</li>
<li>English</li>
</ul>
</body>
</html>Output :
List – Shorthand property In CSS In Hindi
list-style Property Shorthand Property Hai , Is Property Ki Help Se Ham Lists Ki Sari Properties Ek Sath Ek Hi Line Me Apply Kar Skte Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: circle outside;
}
ul.b {
list-style: square inside;
}
</style>
</head>
<body>
<h2>Master Programing CSS Lists</h2>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Output :
Styling List With Colors In CSS In Hindi
Ham Lists Ko Color Ki Help Se Bhi Style De Skte Hai , Jo Simple Lists Ko Bahut Hi Attractive Look Deta Hai |
Jab Ham <ul> Aur <ol> Tag Ke Andar Kuchh Bhi Add Krte Hai To Yah Puri List Par Prbhav Dalta Hai Jabki <li> Tag Me Kuchh Add Krte Hai To Yah Sirf Us <li> Wale Item Par Prbhav Dalta Hai |
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: red;
padding: 25px;
}
ul {
background: green;
padding: 25px;
}
ol li {
background: yellow;
padding: 5px;
margin-left: 35px;
}
ul li {
background: violet;
margin: 5px;
}
</style>
</head>
<body>
<h2>Master Programing CSS List Tutorial</h2>
<ol>
<li>Maths</li>
<li>Physics</li>
<li>English</li>
</ol>
<ul>
<li>Maths</li>
<li>Physics</li>
<li>English</li>
</ul>
</body>
</html>Output :
Upr Diye Gye Example Me Hmne Dekha Ki Kis Prkar <ol> Aur <ul> Tag Me CSS Properties Use Krke Puri List Ko Background Color etc Diya Aur <li> Tag Ko CSS Properties Dekar List Items Ko Background Color Etc. Diya |
