লিঙ্ক কালার

HTML Link গুলো ভিজিট করা হয়েছে কিনা তার উপর ভিন্য রং দেখাতে পারে ।  আবার লিংক এর উপর মাউচ নিয়ে গেলেও ভিন্য রং দেখানো যায় ।

ডিফল্ট  লিংক কালার বৈশিষ্ট্য গুলো

ডিফল্ট ভাবে একটি লিংক সব ওয়েব ব্রাউজার এ নিচের বৈশিষ্ট গুলো নিয়ে প্রদর্শিত হবে

• যে লিংক টি ভিজিট করা হয়নি সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে নীল
• যে লিংক টি ভিজিট করা হয়েছে সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে পারপাল
• যে লিংক টি একটিভ, অর্থাৎ আপনি ক্লিক করেছেন কিংবা ধরে আছেন,  সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে লাল

আমরা এই বৈশিষ্ট গুলো করে নিতে পারি CSS ব্যবহার করে ।

নিচের উদাহরণ এ  যে লিংক ভিডিট করা হয়নি সেটি কোনও আন্ডারলাইন ছাড়াই সবুজ হবে। সিলেক্টর হয় a:link

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
</style>

নিচের উদাহরণ এ  যে লিংক ভিডিট করা হয়েছে সেটি কোনও আন্ডারলাইন ছাড়াই সবুজ হবে। সিলেক্টর হয় a:visited

<style>
a:visited{
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
</style>

নিচের উদাহরণ এ  যে লিংকটির উপর মাউচ নিয়েছেন সেটির নিচে আন্ডারলাইন সহ লাল হবে। সিলেক্টর হয়  a:hover

<style>
a:hover{
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
</style>

নিচের উদাহরণ এ  যে লিংক ক্লিক করা হয়েছে করা হয়েছে কিংবা ক্লিক করে ধরে আছেন সেটির নিচে আন্ডারলাইন সহ হলুদ হবে। সিলেক্টর হয়  a:active

<style>
a:active{
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}
</style>

সবগুলো একসাথে করলে দাড়ায়

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

নিজে চেষ্টা করুন

লিংক এর বাটন

HTML  লিংক গুলোকে বাটন ও করা যায় CSS ব্যবহার করে । নিচের বাটন টি দেখুন

ভিজিট কিভাবে কোড

a {
  background-color: blueviolet;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover {
  background-color: DeepPink;
}

নিজে চেষ্টা করুন

CSS tutorial এ আমরা আরো বিস্তারিত শিখবো