CSS Links In Hindi – Styling Links In CSS In Hindi

CSS

CSS Links In Hindi – Styling Links In CSS In Hindi – Css Ki Help Se Ham Html Links Ko Bahut Attractive Bna Skte Hai , Links Ko Different-Different Style Dekar | Links Ko Style Isliye Di Jati Hai Kyoki , Style Dene Se Links Bahut Achhe Dikhte Hai,Jisse User Experience Badta 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 |

(adsbygoogle = window.adsbygoogle || []).push({});

CSS Links In Hindi

Links Ko Css Ki Bahut Sari Properties (Eg – Color,Font-Family,Background etc.) Se Bahut Attractive Bnaya Ja Skta Hai |

Styling Links

Chaliye Ek Example Se Samjhate Hai Ki Link Ko Style Kese Di Jati Hai | Ek Link Lete Hai ,Jise Color Property Ki Help Se Blue Color Dete Hai |

Example :

<html>
<head>
<style>
a {
  color: blue;
  font-size : 30px;
}
</style>
</head>
<body>

<h2>Master Programing CSS Links Tutorial</h2>
<p><b><a href="https://masterprograming.com/" target="_blank">This is a link</a></b></p>

</body>
</html>

Output :

Links Ko Bahut Sare Tariko Se Style Di Ja Sakti Hai , Ab Kb Konsi Style Di Jani Chahiye Ye Is Bat Par Depend Krta Hai Ki, Vo Link Konsi State( Avastha) Me Hai |

Kisi Bhi Link Ki Mainly 4 States Hoti Hai : –

  1. a : link – Normal Link Ya Aisa Link Jo Abhi Tak Visit Nhi Kiya Gya Ho
  2. a : visited – Aisi Link Jo Click Ki Ja Chuki Hai Ya Visit Ho Chuki Hai
  3. a : hover – Aisi Link Jis Par User Mouse Leke Gya Ho Ya Cursor Leke Gya Ho
  4. a : active – Aisa Link Jis Par User Ne Just Click Kiya Hi Ho

Chaliye Links Ki In Sabhi States Ko Ek Example Se Sakmjhate Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Master Programing CSS Links Tutorial</h2>
<p><a href="https://masterprograming.com/" target="_blank">This is a link</a></p>

</body>
</html>

Upar Diye Gye Example Me Hmne Dekha Ki , Links Ko Kese Style Di Ja Sakti Hai, Jab Tak Link Visit Nhi Kiya Tha Tab Tak Vo Red Dikhai Dega, Jab Link Ko Visit Kiya To Vo Green Dikhai Dega , Mouse Cursor Ko Jb Link Pe Le Jaya Gya To Vo Hotpink Dikhai Dega Aur Jab Link Par Click Kiya Jata Hai To Vo Thodi Der Ke Liye Blue Dikhayi Deta Hai |

a : hover , a : link Aur a : visited Ke Bad Kam Karta Hai Aur a : active , a : hover Ke Bad Kam Karta Hai |

(adsbygoogle = window.adsbygoogle || []).push({});

Text Decoration

Text Decoration Ka Use Mainly Link Ke Niche Jo Underline Dikhayi Deti Hai , Us Underline Ko Remove Karne Ke liye Kiya Jata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Master Programing CSS Links Tutorial</h2>
<p><b><a href="https://masterprograming.com/" target="_blank">This is a link</a></b></p>

</body>
</html>

Upar Diye Gye Example Me Ham Dekhte Hai Ki Kese Text Decoration Ko Use Kiya Jata Hai, Ek Link Ko Kis Parkar Different-Different States Me Underline Aur Bina Underline Dikha Skte Hai |

Background Color

Ab Ham Samjhte Hai Ki Link Ki Different-Different States Me Link Ke Background Color Ko Kis Parkar Style Di Ja Sakti Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 
</style>
</head>
<body>

<h2>Master Programing CSS Links Tutorial</h2>
<p><b><a href="https://masterprograming.com/" target="_blank">This is a link</a></b></p>

</body>
</html>

Upr Diye Gye Example Me Hmne Link Ki Different – Different States Me ,Link Ke Background Ko Alg-Alg Color Diya Hai | Jab Link Visit Nhi Ki Gyi Thi Tab Yellow ,Jab Link Visit Ki Ja Chuki Tab Cyan Color, Jab Hover Kiya Jata Hai Tab Lightgreen Aur Jab Link Par Click Kiya Jata Hai Tab Kuchh Pal Ke Liye Hotpink Color Dikhayi Deta Hai |

Link Buttons

Ek Link Ko Button Ya Box Banane Ke liye Ham CSS Ki Bahut Sari Properties (eg – color, padding, text-decoration , display etc ) Ko Use Kiya Jata Hai |

Example :

<html>
<head>
<style>
a:link, a:visited {
  background-color: black;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
}
</style>
</head>
<body>

<h2>Master Programing CSS Link Button Tutorial</h2>
<p>A link styled as a button:</p>
<a href="https://masterprograming.com/" target="_blank">This is a link</a>

</body>
</html>

Upar Diye Gye Example Me Hmne Sbse Pahle Ek Link Liya Hai ,Fir Us Link Ko CSS Properties Ki Help Se Button Ya Box Me Change Kiya Aur Fir Use Link Ki States Ke Anusar Alg-Alg Color Diya Hai |

(adsbygoogle = window.adsbygoogle || []).push({});

Leave a Reply

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