যেকোনো CSS প্রপার্টি দিয়ে লিঙ্ক স্টাইল করা যায় (যেমন color, font-family, background ইত্যাদি)।
a {
color: hotpink;
}এছাড়াও, লিঙ্ক তার স্টেট অনুযায়ী ভিন্নভাবে স্টাইল করা যায়।
লিঙ্কের চারটি স্টেট হলো:
a:link - একটি সাধারণ, না-দেখা লিঙ্কa:visited - ব্যবহারকারী দেখেছেন এমন একটি লিঙ্কa:hover - ব্যবহারকারী মাউস নিয়ে গেলে একটি লিঙ্কa:active - ক্লিক করার মুহূর্তে একটি লিঙ্ক/* না-দেখা লিঙ্ক */
a:link {
color: red;
}
/* দেখা লিঙ্ক */
a:visited {
color: green;
}
/* মাউস ওভার লিঙ্ক */
a:hover {
color: hotpink;
}
/* সিলেক্টেড লিঙ্ক */
a:active {
color: blue;
}একাধিক লিঙ্ক স্টেটের জন্য স্টাইল সেট করার সময়, কিছু ক্রম নিয়ম মেনে চলতে হয়:
text-decoration প্রপার্টি বেশিরভাগ সময় লিঙ্ক থেকে আন্ডারলাইন সরাতে ব্যবহৃত হয়:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}লিঙ্কের জন্য একটি ব্যাকগ্রাউন্ড কালার নির্ধারণ করতে background-color প্রপার্টি ব্যবহার করা যায়:
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}এই উদাহরণটি আরও অ্যাডভান্সড একটি উদাহরণ দেখায়, যেখানে আমরা লিঙ্ককে বক্স/বাটন হিসেবে দেখাতে একাধিক CSS প্রপার্টি একত্রে ব্যবহার করি:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}