CSS আমাদের লিংকগুলোকে ইচ্ছামতো স্টাইল করার অনুমতি দেয়। আমরা রঙ, ব্যাকগ্রাউন্ড, আকার বৃদ্ধি ইত্যাদি যোগ করে টেক্সট ফরম্যাট করতে পারি। আরো বêsর, ভিজ্যুয়াল ইফেক্ট তৈরি করতে অ্যানিমেশনও যোগ করা যায়।
সঠিক কার্যকারিতার জন্য সিউডো সিলেক্টরها এর ক্রম
সঠিক ফাংশনালিটির জন্য, সিউডো সিলেক্টরها এর ক্রম হলো: :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:user@example.com">Demo link</a> </p> <p> <a id="mod" href="mailto:user@example.com">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>
আউটপুট
এটি নিচের আউটপুট দেয়:
দ্বিতীয় লিংক 위로 হোভার করলে:
