CSS-এ font-size প্রপার্টিতে পিক্সেল (px) একক ব্যবহার করা যায়। এটি টেক্সটের পিক্সেল-সঠিক আকার নিশ্চিত করতে সাহায্য করে।
উদাহরণ ১: বিভিন্ন পিক্সেল সাইজ
<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} #demo3 {background-color: hsla(190, 100%, 50%, 0.4);} #demo4 {background-color: hsla(170, 100%, 50%, 0.3);} #demo5 {background-color: hsl(150, 100%, 60%);} #demo6 {background-color:rgba(108,111,35,0.6); font-size:30px; color:yellow; transform: rotate(45deg); } </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Australian Cricketers</p> </body> </html>
আউটপুট
উদাহরণ ২: টেক্সট ডেকোরেশনসহ পিক্সেল সাইজ
<!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline; text-decoration-color: yellow; font-size: 25px; } </style> </head> <body> <h1>Examination Details</h1> <p class="demo">Exam on 20th December.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
আউটপুট
পিক্সেল এককের বৈশিষ্ট্য
- এবসোলিউট একক — প্যারেন্টের ফন্ট সাইজের ওপর নির্ভরশীল নয়
- পিক্সেল-পরফেক্ট ডিজাইন নিশ্চিত করে
- রেসপনসিভ ডিজাইনে কম ফ্লেক্সিবল (rem/em ভালো)
- ১px = ১/৯৬ ইঞ্চি (স্ট্যান্ডার্ড সংজ্ঞা)
সুবিধা: জটিল লেআউটে যেখানে সঠিক আকার জরুরি, সেখানে px আদর্শ।
