CSS-এ ভেরিয়েবল (Variables in CSS)

CSS-এ ভেরিয়েবল (কাস্টম প্রোপার্টি) ব্যবহার করে আপনি আপনার ওয়েব পেজে কাস্টম প্রোপার্টি মান সংজ্ঞায়িত করতে পারেন। একটি কাস্টম নাম নির্ধারণ করে সেটির জন্য মান সেট করা হয়।

উদাহরণ

নিচের কোডটি চালিয়ে CSS ভেরিয়েবল ব্যবহার করে ব্যাকগ্রাউন্ড এবং টেক্সট রঙ পরিবর্তন করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      :root { 
        --my-bg-color: blue; 
        --my-color: white; 
      } 
      #demo { 
        background-color: var(--my-bg-color); 
        color: var(--my-color); 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Heading One</h1> 
    <div id="demo">This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</div> 
    <br> 
  </body> 
</html>

ব্যাখ্যা: এখানে :root পসিউডো-ক্লাসে দুটি কাস্টম প্রোপার্টি (--my-bg-color এবং --my-color) সংজ্ঞায়িত করা হয়েছে। পরে var() ফাংশন ব্যবহার করে সেগুলো #demo এলিমেন্টে প্রয়োগ করা হয়েছে।