Uddeshyo | Student Super App

14. React CSS Styling

📘 কনসেপ্ট (থিওরি)

সিএসএস (CSS) দিয়ে রিঅ্যাক্ট স্টাইল করার অনেক উপায় আছে, এই টিউটোরিয়ালটি তিনটি সাধারণ উপায় ঘনিষ্ঠভাবে দেখবে:
- ইনলাইন স্টাইলিং (Inline styling)
- সিএসএস স্টাইলশিট (CSS stylesheets)
- সিএসএস মডিউল (CSS Modules)

**ইনলাইন স্টাইলিং**
ইনলাইন স্টাইল অ্যাট্রিবিউটের সাহায্যে কোনো এলিমেন্টকে স্টাইল করতে, মানটি অবশ্যই একটি জাভাস্ক্রিপ্ট অবজেক্ট হতে হবে:
Hello Style!

দ্রষ্টব্য: প্রপার্টির নাম অবশ্যই ক্যামেলকেস (camelCase) হতে হবে (যেমন, background-color এর পরিবর্তে backgroundColor)।

**সিএসএস স্টাইলশিট**
আপনি আপনার সিএসএস স্টাইলিং একটি আলাদা ফাইলে লিখতে পারেন, ফাইলটিকে শুধু .css ফাইল এক্সটেনশন দিয়ে সংরক্ষণ করুন এবং এটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করুন।

💡 উদাহরণ

স্টাইলিংয়ের উদাহরণ:

// ইনলাইন স্টাইল অবজেক্ট
const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      Hello Style!
    
  );
}

🎯 আপনার কাজ (প্র্যাকটিস)

এমন একটি কম্পোনেন্ট তৈরি করুন যা একটি  ট্যাগ রিটার্ন করে। টেক্সটের রঙ "blue" এবং ফন্ট সাইজ (fontSize) "20px" করতে ইনলাইন স্টাইল ব্যবহার করুন।

main.react

OUTPUT

Run your code to see the output here...