CSS আমাদের পছন্দ অনুযায়ী লিঙ্ক স্টাইল করার অনুমতি দেয়। আমরা রঙ, পটভূমি, আকার বৃদ্ধি ইত্যাদি যোগ করে টেক্সট ফরম্যাট করতে পারি। উপরন্তু, একটি মনোরম ভিজ্যুয়াল এফেক্ট তৈরি করতে অ্যানিমেশন যোগ করা যেতে পারে।
সঠিক কার্যকারিতার জন্য, ছদ্ম নির্বাচকদের ক্রম এর দ্বারা দেওয়া হয়:- :link, :visited, :hover, :active.
উদাহরণ
নিম্নলিখিত উদাহরণগুলি CSS -
-এর সাথে লিঙ্কগুলির স্টাইলিং চিত্রিত করে<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
#mod {
padding: 10px;
color: darkturquoise;
border: thin solid;
background-color: lemonchiffon;
}
#mod:hover {
color: white;
box-shadow: 0 0 0 1px black;
background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:[email protected]">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:[email protected]">Modified demo link</a>
</p>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
দ্বিতীয় লিঙ্কটি হোভার করার সময়, আমরা নিম্নলিখিত আউটপুট −
পাই
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
display: flex;
float: left;
border: thin solid;
background-color: snow;
padding: 20px;
}
body * {
border-radius: 5%;
}
#mod {
padding: 10px;
color: royalblue;
text-decoration: none;
}
#mod:hover {
box-shadow: 0 0 10px 2px black;
text-decoration: overline;
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html>৷ আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
দ্বিতীয় লিঙ্কটি হোভার করার সময়, আমরা নিম্নলিখিত আউটপুট পাই
