সিএসএস লিংক - CSS link

সিএসএস লিংক প্রপার্টি গুলো ব্যবহার করে এইচটিএমএল লিংক কে বিভিন্ন ভাবে স্টাইল করা যায়।

লিংক স্টাইলের জন্য প্রোপার্টি

কিছু সিএসএস প্রপার্টি যেমন - background, font-family, color, border, border-shadows, text-shadow ইত্যাদি ব্যবহার করে লিংক স্টাইলিং করা যায়।

কোন লিংক এর ৪টি অবস্থায় বা state এ বিভিন্ন স্টাইল করার জন্য সিএসএস এর আরও কিছু প্রোপার্টি ব্যবহার করা যায়, সেগুলো হল - a:link, a:visited, a:hover এবং a:active.

a:link

কোন স্বাভাবিক বা normal লিংক যা ইতোপূর্বে visit করা হয় নি এমন অবস্থার স্টাইল নির্ধারণ করার জন্য a:link প্রপার্টি ব্যবহার করা হয়। সিএসএস এর বিভিন্ন স্টাইলিং প্রপার্টি যেমন - color, background-color, text-shadow ইত্যাদি এর সাথে ব্যবহার করা যায়।

নীচে a:link প্রপার্টি ব্যবহার করে একটি উদাহরন দেখুন -

উদাহরণ

a:link{
   text-color: red;
   font-family: sarif
   text-decoration: none;
   text-size: 16px;
   font-weight: bold;
   }

কোড এডিটর

a:visited

কোন লিংক যা ইতোপূর্বে visit করা হয়েছে এমন অবস্থার স্টাইল নির্ধারণ করার জন্য a:visited প্রপার্টি ব্যবহার করা হয়। সিএসএস এর বিভিন্ন স্টাইলিং প্রপার্টি যেমন - color, background-color, text-shadow ইত্যাদি এর সাথে ব্যবহার করা যায়।

নীচে a:visited প্রপার্টি ব্যবহার করে একটি উদাহরন দেখুন -

উদাহরণ

a:visited{
   text-color: red;
   font-family: sarif
   text-decoration: none;
   text-size: 16px;
   font-weight: bold;
   }

কোড এডিটর

a:hover

কোন লিংক এর ওপর মাউস পয়েন্টার স্থাপন করলে কি রকম স্টাইল সৃষ্টি হবে তা নির্ধারণ করার জন্য a:hover প্রপার্টি ব্যবহার করা হয়। সিএসএস এর বিভিন্ন স্টাইলিং প্রপার্টি যেমন - color, background-color, text-shadow ইত্যাদি এর সাথে ব্যবহার করা যায়।

নীচে a:hover প্রপার্টি ব্যবহার করে একটি উদাহরন দেখুন -

উদাহরণ

a:hover{
   text-color: red;
   font-family: sarif
   text-decoration: none;
   text-size: 16px;
   font-weight: bold;
   }

কোড এডিটর

a:active

লিংকের ওপর মাউস পয়েন্টার স্থাপন করে ক্লিক করার সময় লিংকে কি রকম স্টাইল সৃষ্টি হবে তা নির্ধারণ করার জন্য a:active প্রপার্টি ব্যবহার করা হয়। সিএসএস এর বিভিন্ন স্টাইলিং প্রপার্টি যেমন - color, background-color, text-shadow ইত্যাদি এর সাথে ব্যবহার করা যায়।

নীচে a:active প্রপার্টি ব্যবহার করে একটি উদাহরন দেখুন -

উদাহরণ

a:active{
   text-color: red;
   font-family: sarif
   text-decoration: none;
   text-size: 16px;
   font-weight: bold;
   }

কোড এডিটর

class ব্যবহার

এইচটিএমএল লিংক এলিমেন্ট এর সাথে class সিলেক্টর ব্যবহার করে কোন লিংক এর স্টাইল করা যায়।

নিচে একটি উদাহরণ দেখুন, যেখানে class ব্যবহার করা হয়েছে।

উদাহরণ

<style>
.home a{
   color: forestgreen;
   text-decoration: none;
   }
   
.home a:hover{
   color: teal;
   text-decoration: underline;
   }
<style>

<body>
   
   <a="url" class="home">websschool.com</a>

</body>

কোড এডিটর

id ব্যবহার

এইচটিএমএল লিংক এলিমেন্ট এর সাথে id সিলেক্টর ব্যবহার করে কোন লিংক এর স্টাইল করা যায়।

নিচে একটি উদাহরণ দেখুন, যেখানে id ব্যবহার করা হয়েছে।

উদাহরণ

<style>
#home a{
   color: forestgreen;
   text-decoration: none;
   }
   
#home a:hover{
   color: teal;
   text-decoration: underline;
   }
<style>

<body>
   
   <a="url" id="home">websschool.com</a>

</body>

কোড এডিটর

লিংক সহ Button তৈরি

সিএসএস এর কয়েকটি প্রোপার্টি ব্যবহার করে একটি লিংক সহ Button তৈরি করা যায়।

নিচে একটি উদাহরন দেখুন, যেখানে কিছু সিএসএস প্রোপার্টি ব্যবহার করে একটি button তৈরি করা হয়েছে।

উদাহরণ

<style>
a{
   background-color: #ff6666;
   color: white;
   font-weight:900;
   border:1px solid #ff6666;
   padding:0.70em 2.1em;
   text-decoration: none;
   }

a:hover{
   background-color: #ff7777;
   color: white;
   font-weight:900;
   padding:0.70em 2.1em;
   text-decoration: none;
   border:1px solid red;
   border-shadows:5px 5px 10px black;
   }
</style>
<a href="example.html">Simple Link</a>

কোড এডিটর