ওয়েব ডিজাইনের জগতে CSS (Cascading Style Sheets) হলো এমন একটি প্রযুক্তি যা HTML ওয়েব পেজকে আকর্ষণীয় ও সুন্দর করে তোলে। CSS ব্যবহার করার বিভিন্ন পদ্ধতির মধ্যে Internal CSS অন্যতম জনপ্রিয় একটি পদ্ধতি।
Internal CSS কী?
Internal CSS হলো এমন একটি CSS পদ্ধতি যেখানে স্টাইলিং কোড সরাসরি HTML ফাইলের <head> সেকশনের ভেতরে <style> ট্যাগ ব্যবহার করে লেখা হয়। এর ফলে নির্দিষ্ট HTML পেজের সকল এলিমেন্টকে একই জায়গা থেকে ডিজাইন করা যায়।
এই CSS শুধুমাত্র সেই নির্দিষ্ট ওয়েব পেজের জন্য কার্যকর হয় এবং অন্য কোনো পেজে স্বয়ংক্রিয়ভাবে প্রযোজ্য হয় না।
Internal CSS কোথায় লেখা হয়?
Internal CSS সবসময় HTML ডকুমেন্টের <head> ট্যাগের মধ্যে <style> ট্যাগের ভেতরে লেখা হয়।
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS উদাহরণ</title>
<style>
body{
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1{
color: darkblue;
text-align: center;
}
p{
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>হ্যালো, বাংলাদেশ!</h1>
<p>এটি Internal CSS-এর একটি সাধারণ উদাহরণ।</p>
</body>
</html>Internal CSS কীভাবে কাজ করে?
যখন ব্রাউজার HTML ফাইল লোড করে, তখন <style> ট্যাগের মধ্যে থাকা CSS কোডগুলো পড়ে এবং সেই অনুযায়ী পেজের ডিজাইন প্রদর্শন করে।
বৈশিষ্ট্য
✅ HTML ফাইলের মধ্যেই CSS থাকে
✅ শুধুমাত্র একটি নির্দিষ্ট পেজে প্রযোজ্য
✅ ছোট বা একক পেজের জন্য উপযোগী
✅ আলাদা CSS ফাইল তৈরি করার প্রয়োজন হয় না
Internal CSS-এর সুবিধা
১. সহজ ব্যবস্থাপনা
HTML এবং CSS একই ফাইলে থাকার কারণে ছোট প্রজেক্টে কাজ করা সহজ হয়।
২. দ্রুত সম্পাদনা
একটি নির্দিষ্ট পেজের ডিজাইন পরিবর্তন করতে আলাদা CSS ফাইলে যেতে হয় না।
৩. অতিরিক্ত ফাইলের প্রয়োজন নেই
External CSS ফাইল লিংক করার ঝামেলা থাকে না।
৪. ছোট ওয়েবসাইটের জন্য উপযুক্ত
Landing Page, Demo Page বা Single Page Website তৈরিতে Internal CSS বেশ কার্যকর।
Internal CSS-এর অসুবিধা
১. কোড বড় হয়ে যায়
স্টাইলিং বেশি হলে HTML ফাইল জটিল ও দীর্ঘ হয়ে পড়ে।
২. পুনর্ব্যবহারযোগ্য নয়
একই CSS অন্য পেজে ব্যবহার করতে চাইলে কোড কপি করতে হয়।
৩. রক্ষণাবেক্ষণ কঠিন
বড় ওয়েবসাইটে অনেক পেজ থাকলে প্রতিটি পেজ আলাদাভাবে আপডেট করতে হয়।
Internal CSS, Inline CSS এবং External CSS-এর পার্থক্য
| CSS Type | কোথায় লেখা হয় | ব্যবহার |
|---|---|---|
| Inline CSS | HTML Element-এর style Attribute-এ | নির্দিষ্ট Element |
| Internal CSS | <style> Tag-এর মধ্যে | নির্দিষ্ট Page |
| External CSS | আলাদা .css ফাইলে | পুরো Website |
কখন Internal CSS ব্যবহার করবেন?
- Single Page Website
- Landing Page
- Testing ও Demo Project
- ছোটখাটো HTML Project
- নির্দিষ্ট কোনো পেজে আলাদা ডিজাইন প্রয়োজন হলে
উপসংহার
Internal CSS হলো HTML পেজের ভেতরে CSS যুক্ত করার একটি সহজ এবং কার্যকর পদ্ধতি। ছোট ওয়েবসাইট বা নির্দিষ্ট কোনো পেজকে দ্রুত ডিজাইন করতে এটি অত্যন্ত উপযোগী। তবে বড় ওয়েবসাইটের ক্ষেত্রে কোড ম্যানেজমেন্ট এবং পুনর্ব্যবহারের সুবিধার জন্য সাধারণত External CSS ব্যবহার করাই সবচেয়ে ভালো সমাধান।