ইনলাইন সিএসএস একটি এলিমেন্টের এইচটিএমএল ট্যাগের ভিতরে একটি সিএসএস স্টাইল প্রয়োগ করে। স্টাইল এইচটিএমএল অ্যাট্রিবিউট একটি এলিমেন্টের স্টাইল সেট করে। ইনলাইন সিএসএস রুল অন্যান্য সিএসএস ডকুমেন্ট থেকে শৈলী ওভাররাইড করে কারণ এগুলো সরাসরি একটি এলিমেন্টে প্রয়োগ করা হয়।
এইচটিএমএল প্রোগ্রামিং ভাষা একটি ওয়েব পেজের কাঠামো ডিফাইন করতে ব্যবহৃত হয়। সিএসএস আপনাকে এইচটিএমএল এলিমেন্টগুলোর সাথে আপনার নিজস্ব স্টাইল যোগ করতে দেয়।
এটি আপনাকে একটি ওয়েব পেজের এলিমেন্টগুলোর এইস্থেটিক্স কাস্টমাইজ করার ক্ষমতা দেয়। একটি ওয়েব পেজে সিএসএস যোগ করার তিনটি পদ্ধতি রয়েছে: ইনলাইন সিএসএস, ইন্টারনাল সিএসএস, এবং এক্সটার্নাল সিএসএস। এই টিউটোরিয়ালের জন্য, আমরা ইনলাইন সিএসএস-এ ফোকাস করব।
এই টিউটোরিয়াল ইনলাইন সিএসএস ব্যবহার করে একটি ওয়েব পেজে সিএসএস যোগ করার পদ্ধতি এবং ইনলাইন স্টাইলসের সাথে জড়িত সিন্ট্যাক্স আলোচনা করবে।
সিএসএস স্টাইলস
১৯৯৬ সালে, সিএসএস পরিচিত করা হয়েছিল। সিএসএস একটি ওয়েবসাইটের প্রেজেন্টেশন এবং কন্টেন্ট আলাদা করা সম্ভব করে দিল। সিএসএস ব্যবহার করে, আপনি সহজে একটি ওয়েব পেজে স্টাইল যোগ করতে পারেন, এবং ওই স্টাইলগুলো ওয়েব পেজের নির্দিষ্ট এলিমেন্টগুলোর সাথে প্রয়োগ করতে পারেন।
একটি ওয়েব পেজে স্টাইল প্রয়োগ করার তিনটি মেথড রয়েছে:
- ইনলাইন সিএসএস: এই মেথডে একটি নির্দিষ্ট এলিমেন্টে একটি ইউনিক স্টাইল প্রয়োগ করা হয়।
- এক্সটার্নাল সিএসএস: এই মেথডে একটি আলাদা সিএসএস ফাইল তৈরি করা হয় যা একটি ওয়েব পেজের স্টাইলগুলো সংরক্ষণ করে।
- ইন্টারনাল সিএসএস: এই মেথডে একটি
<style>ট্যাগ ব্যবহার করে একটি এইচটিএমএল ফাইলের জন্য স্টাইল ডিফাইন করা হয়।
এই টিউটোরিয়ালে, আমরা ইনলাইন সিএসএস লিখার বিষয়ে গভীরে আলোচনা করব।
ইনলাইন সিএসএস: একটি গাইড
ইনলাইন সিএসএস একটি এইচটিএমএল এলিমেন্টে একটি স্টাইল প্রয়োগ করে। ইনলাইন সিএসএস এলিমেন্টগুলো নির্দিষ্ট করা হয় প্রতিটি এলিমেন্টের জন্য যেগুলোর সাথে আপনি একটি স্টাইল প্রয়োগ করতে চান। এগুলো একটি নির্দিষ্ট এলিমেন্টের সাথে কাজ করার জন্য সিলেক্টর ব্যবহার করার একটি অ্যালটারনেটিভ।
মান লেইয়া আপনি একটি ওয়েব পেজে টেক্সটের একটি প্যারাগ্রাফের রঙ বা ফন্ট সাইজ পরিবর্তন করতে চান। একটি আলাদা স্টাইলশীতে রুল লিখার বদলে, আপনি সেই প্যারাগ্রাফে সরাসরি স্টাইলটি যোগ করতে পারেন যার রঙ আপনি পরিবর্তন করতে চান।
ইনলাইন প্রয়োগ করা রুলগুলো ইন্টারনাল বা এক্সটার্নাল স্টাইলশীতে প্রয়োগ করা যেকোনো স্টাইল ওভাররাইড করে।
ইনলাইন সিএসএস ব্যবহার করতে, আপনি একটি এলিমেন্টের "style" অ্যাট্রিবিউটে সরাসরি একটি সিএসএস স্টাইল নির্দিষ্ট করতে পারেন। চলুন একটি উদাহরণের মাধ্যমে দেখি এটি কীভাবে কাজ করে।
মান লেইয়া আমরা একটি ওয়েব পেজে একটি একক হেডিং-এর টেক্সট রঙ গ্রিন করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
<h1 style="color: green;">This is a Heading</h1>
উপরের কোড আমাদের হেডিং-এর সিএসএস ফন্ট রঙকে গ্রিন সেট করে। যেহেতু আমরা আমাদের স্টাইল শুধু এই হেডিং-এ প্রয়োগ করতে চাই, আমরা এটি সরাসরি ইনলাইন সিএসএস ব্যবহার করে যোগ করেছি।
সিএসএস ইনলাইন স্টাইল কখন ব্যবহার করবেন
সিএসএস ইনলাইন স্টাইল একটি ওয়েব পেজে পরিবর্তন প্রিভিউ করতে বা একটি পেজে একটি এলিমেন্টে স্টাইল যোগ করতে ব্যবহৃত হয়।
ইনলাইন স্টাইল নির্দিষ্ট পরিবর্তন প্রিভিউ করতে ব্যবহৃত হয় কারণ আপনি একটি নির্দিষ্ট এলিমেন্টের সাথে কাজ করতে পারেন সিএসএস সিলেক্টর মিলে যাওয়া সব এলিমেন্টের বদলে। আপনাকে একটি পরিবর্তন প্রিভিউ করার জন্য একটি স্টাইলশীট পরিবর্তন করার চিন্তা করতে হবে না।
ইনলাইন স্টাইল একটি ওয়েব পেজে একটি এলিমেন্টে সিএসএস রুল যোগ করতে ব্যবহৃত হয়। সুতরাং, আপনি যদি একটি প্যারাগ্রাফ টেক্সটের প্রস্থ 500px সেট করতে চান, তবে আপনি করতে পারেন। কিন্তু আপনি যদি একাধিক প্যারাগ্রাফ টেক্সটের প্রস্থ 500px সেট করতে চান, তবে আপনাকে স্টাইলিং-এর অন্য কোনো মেথড ব্যবহার করা উচিত।
যখন সযত্নপূর্বক ব্যবহার করা হয়, ইনলাইন সিএসএস একটি ওয়েব পেজে এলিমেন্টগুলোর সাথে স্টাইল প্রয়োগ করার একটি ভালো উপায়। যাইহোক, ইনলাইন সিএসএস-এর অতি ব্যবহার সহজেই মেসি কোড তৈরি করতে পারে।
ইনলাইন স্টাইল আপডেট করা কঠিন কারণ আপনাকে প্রতিটি স্টাইল ম্যানুয়ালি পরিবর্তন করতে হবে। অন্যদিকে, একটি স্টাইলশীতে স্টাইলগুলো ব্রড সিলেক্টর ব্যবহার করতে পারে। এই সিলেক্টরগুলো একটি এইচটিএমএল ডকুমেন্টে একাধিক এলিমেন্টকে প্রভাবিত করতে পারে।
অনেক রুল একটি এলিমেন্টে প্রয়োগ করার זמן ইন্টারনাল বা এক্সটার্নাল সিএসএস ব্যবহার করা প্রায়শই ভালো। সুতরাং, আপনি যদি ছয় বা সাতটি সিএসএস প্রপার্টি একটি এলিমেন্টে প্রয়োগ করতে চান, তবে আপনি ইনলাইন সিএসএস এড়াতে চাইতে পারেন।
এর কারণ হলো, আমরা যেমন বলেছি, ইনলাইন সিএসএস-এর অতি ব্যবহার আপনার কোডকে মেসি করে তুলতে পারে। আপনি যদি একটি এইচটিএমএল এলিমেন্টের ভিতরে ছয়টি সিএসএস রুল রাখেন, তবে এটি আপনার কোডে এলিমেন্টটি দেখাকে আরও কঠিন করে তোলে।
উপসংহার
ইনলাইন সিএসএস স্টাইল একটি ওয়েব পেজে একটি নির্দিষ্ট এলিমেন্টে একটি স্টাইল প্রয়োগ করে। সাধারণত, ইনলাইন সিএসএস ব্যবহার করা সেরা যখন আপনি একটি পরিবর্তন প্রিভিউ করতে চান বা একটি ওয়েব পেজে শুধু কয়েকটি এলিমেন্ট স্টাইল করতে চান। আপনি যদি একটি এলিমেন্টে আরও স্টাইল প্রয়োগ করতে চান, তবে ইন্টারনাল বা এক্সটার্নাল স্টাইলশীট ব্যবহার করা সাধারণত পছন্দনীয়।
এই টিউটোরিয়াল উদাহরণসহ সিএসএস-এ স্টাইলিং-এর বেসিক এবং ইনলাইন সিএসএস স্টাইল কীভাবে ব্যবহার করবেন সে সম্পর্কে আলোচনা করেছে। এখন আপনি একটি প্রফেশনাল ওয়েব ডেভেলপারের মতো ইনলাইন সিএসএস ব্যবহার করার জন্য প্রস্তুত।
সিএসএস-এ কোডিং সম্পর্কে আরও জানতে, আমাদের How to Learn CSS-এ সম্পূর্ণ গাইড পড়ুন।
