আপনার ওয়েব পেজের জন্য স্টাইল নির্ধারণ করতে CSS ব্যবহার করা হয়, যার মধ্যে রয়েছে ডিজাইন, লেআউট এবং বিভিন্ন ডিভাইস ও স্ক্রিন সাইজের জন্য প্রদর্শনের ভিন্নতা।
HTML কখনোই একটি ওয়েব পেজ ফরম্যাট করার জন্য ট্যাগ রাখার উদ্দেশ্যে তৈরি হয়নি!
HTML তৈরি হয়েছিল একটি ওয়েব পেজের কনটেন্ট বর্ণনা করার জন্য, যেমন:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
যখন <font>-এর মতো ট্যাগ এবং কালার অ্যাট্রিবিউট HTML 3.2 স্পেসিফিকেশনে যোগ করা হয়েছিল, তখন এটি ওয়েব ডেভেলপারদের জন্য একটি দুঃস্বপ্নের শুরু হয়েছিল। বড় ওয়েবসাইট তৈরি করা, যেখানে ফন্ট ও কালার তথ্য প্রতিটি পেজে আলাদাভাবে যোগ করতে হতো, একটি দীর্ঘ এবং ব্যয়বহুল প্রক্রিয়ায় পরিণত হয়েছিল।
এই সমস্যা সমাধানের জন্য, World Wide Web Consortium (W3C) CSS তৈরি করে।
CSS HTML পেজ থেকে স্টাইল ফরম্যাটিং সরিয়ে দিয়েছিল!
HTML কী তা যদি আপনি না জানেন, তাহলে আমাদের HTML টিউটোরিয়াল পড়ার পরামর্শ দিচ্ছি।
স্টাইল ডেফিনিশন সাধারণত বাইরের .css ফাইলে সংরক্ষণ করা হয়।
একটি বাইরের স্টাইলশিট ফাইল দিয়ে, শুধু একটি ফাইল পরিবর্তন করে আপনি পুরো ওয়েবসাইটের চেহারা পরিবর্তন করতে পারেন!
CSS প্রয়োগ করার তিনটি উপায় আছে: internal, external, এবং inline স্টাইল। চলুন এগুলো বিস্তারিত জেনে নিই।
Internal বা এমবেডেড CSS ব্যবহারের জন্য আপনার HTML ডকুমেন্টের <head> সেকশনে <style> ট্যাগ যোগ করতে হয়।
এই CSS স্টাইল একটি একক পেজ স্টাইল করার একটি কার্যকর পদ্ধতি। তবে, একাধিক পেজে এই স্টাইল ব্যবহার করা সময়সাপেক্ষ, কারণ আপনাকে আপনার ওয়েবসাইটের প্রতিটি পেজে CSS নিয়ম দিতে হয়।
Internal CSS কীভাবে ব্যবহার করবেন তা এখানে দেওয়া হলো:
<head> ওপেনিং ট্যাগ খুঁজুন।<head> ট্যাগের ঠিক পরে নিচের কোডটি বসান<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>Learn Computer Academy Tutorials</h1>
<p>This is our paragraph.</p>
</body>
</html>.class {
property1 : value1;
property2 : value2;
property3 : value3;
}
#id {
property1 : value1;
property2 : value2;
property3 : value3;
}External CSS দিয়ে, আপনি আপনার ওয়েব পেজগুলোকে একটি বাইরের .css ফাইলের সাথে লিঙ্ক করবেন, যা আপনার ডিভাইসের যেকোনো টেক্সট এডিটর দিয়ে তৈরি করা যায় (যেমন, Notepad++)।
এই CSS ধরনটি বেশি কার্যকর পদ্ধতি, বিশেষ করে একটি বড় ওয়েবসাইট স্টাইল করার ক্ষেত্রে। একটি .css ফাইল এডিট করে, আপনি একবারে আপনার পুরো সাইট পরিবর্তন করতে পারেন।
External CSS ব্যবহার করতে এই ধাপগুলো অনুসরণ করুন:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}
<head> সেকশনে, <title> ট্যাগের ঠিক পরে আপনার বাইরের .css ফাইলের একটি রেফারেন্স যোগ করুন:<link rel="stylesheet" type="text/css" href="style.css" />মনে রাখবেন: style.css-এর জায়গায় আপনার .css ফাইলের নাম বসাতে ভুলবেন না।
একটি নির্দিষ্ট HTML এলিমেন্ট স্টাইল করতে Inline CSS ব্যবহার করা হয়। এই CSS স্টাইলের জন্য, সিলেক্টর ব্যবহার না করে আপনাকে শুধু প্রতিটি HTML ট্যাগে style অ্যাট্রিবিউট যোগ করতে হবে।
এই CSS ধরনটি সত্যিই প্রস্তাবিত নয়, কারণ প্রতিটি HTML ট্যাগ আলাদাভাবে স্টাইল করতে হয়। শুধু inline CSS ব্যবহার করলে আপনার ওয়েবসাইট ম্যানেজ করা খুব কঠিন হয়ে যেতে পারে।
তবে, HTML-এ inline CSS কিছু পরিস্থিতিতে উপকারী হতে পারে। উদাহরণস্বরূপ, যেসব ক্ষেত্রে আপনার CSS ফাইলে অ্যাক্সেস নেই বা শুধু একটি এলিমেন্টের জন্য স্টাইল প্রয়োগ করতে হবে।
চলুন একটি উদাহরণ দেখি। এখানে, আমরা <p> এবং <h1> ট্যাগে একটি inline CSS যোগ করি:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
</html>এই টিউটোরিয়ালে, আপনি CSS-এর তিনটি ধরনের মধ্যে পার্থক্য শিখেছেন: internal, external, এবং inline। এখানে একটি সারসংক্ষেপ দেওয়া হলো:
<head> সেকশনে <style> ট্যাগ যোগ করা