Creative IT Blog Just another WordPress site
Related Articles
Types of CSS:
HTML এর সাথে CSS যুক্ত করার বিষয়টি খুবই গুরুত্বপূর্ণ। HTML এর সাথে CSS যুক্ত করার জন্য তিনটি পদ্ধতি রয়েছে। যথা-
- Inline CSS
- Internal CSS
- External CSS
1.Inline CSS
HTML এলিমেন্টে style এট্রিবিউট দিয়ে CSS রুল লেখা যায় এটাই ইনলাইন CSS । খুব প্রয়োজন না হলে inline css লেখা উচিৎ নয়। মুলত সবসময় External css ব্যবহার করা উচিৎ। যেহেতু এলিমেন্টের ভিতরেই css লেখা হয় তাই inline css এর জন্য সিলেক্টর প্রয়োজন হয়না। যেমন-
<h2 style=”background-color: #555; color: #fff;”> inline css h2 code </h2>
<p style=”color:#ccc; text-align:justify;”> inline css code </p>
এখানে একটা পার্থক্য হচ্ছে কোন সিলেক্টর দিতে হয়না আর curly braces ও নেই।
সেমিকোলন (;) দিয়ে প্রতিটি লাইন আলাদা রাখতে হবে । এভাবে যত ইচ্ছা প্রোপার্টি লিখতে পারেন।
2. Internal css:
এ পদ্ধতিতে <head>………….</head> এর মধ্যে <style>..</style> বা স্টাইল ট্যাগ ব্যাবহার করা হয়। এবং <style>….</style> এর মধ্যেই CSS এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ রাখা হয়।
যেকোন HTML ডকুমেন্টে <head></head> এর ভিতর style ট্যাগ ব্যবহার করে ইন্টারনাল CSS লেখা হয়। যেমন-
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: #f00;
background: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1> Internal css demo heading</h1>
<p> Internal css demo content here </p>
</body>
</html>
CSS কিভাবে লিখতে হয় সেটা এখানে খুব ভালভাবে দেখে নিন। এভাবেই CSS লেখা হয় অর্থ্যাৎ প্রথমে সিলেক্টর এরপর দ্বিতীয় বন্ধনীর (curly braces ) মধ্যে একটা একটা করে প্রেপার্টি এবং তার মান দেয়া হয়। প্রোপার্টি এবং এর মানের মাঝে কোলন (:) চিহ্ন দিতে হবে এবং মানের শেষে সেমিকোলন (;) দিতে হবে তা নাহলে কোড কাজ করবেনা।
ইন্টারনাল সিএসএস <head></head> ট্যাগের ভিতর লেখাই নিয়ম তবে ডকুমেন্টের অন্য কোথাও দিলেও কাজ করবে (সাধারনত body এলিমেন্টর ভিতরও দেয়া যায়)।
প্রোপার্টি গুলির মান নির্দিষ্ট থাকে তাই শুধু সেগুলিই ব্যবহার করতে পারবেন। যেমন text-align প্রেপার্টি টির মান ৫ ধরনের হতে পারে “left”, “right”, “center”, “justify”, “inherit
3. External css
Internal বা Inline CSS খুব প্রয়োজন ছাড়া লেখা হয়না কারন এতে HTML ফাইল অনেক বড় হয়ে যায়। তাই সব CSS একসাথে করে একটা ফাইলে রেখে সেটা .css এক্সটেনশন নাম দিয়ে (যেমন style.css) সেভ করে HTML ফাইলে সংযুক্ত করে দিলেই হয়ে যায়। এটার নামই হচ্ছে এক্সটার্নাল সিএসএস। HTML এ link নামে একটা ট্যাগ আছে এটা দিয়েই সংযোগ দেয়া যায়। একটা উদাহরন-
<!DOCTYPE html>
<html>
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
<h1> Internal css demo heading</h1>
<p> Internal css demo content here </p>
</body>
</html>
এখানে দেখুন Internal CSS এর জায়গায় link ট্যাগ দিয়ে কিভাবে style.css ফাইলটি যোগ করেছি। href হচ্ছে এট্রিবিউট, এখানে ফাইলটির উৎস বা কোথায় আছে সেটা দেখিয়ে দিতে হয়। rel এট্রিবিউটট দিয়ে HTML ডকুমেন্ট টি এবং CSS ফাইল এর মধ্যে সম্পর্ক টা কি (stylesheet) সেটা ব্রাউজারকে বুঝানো হয়, এটা দিতে হবে। আর type এট্রিবিউট এর মান text/css দিয়ে বুঝানো হচ্ছে এটা একটা CSS ফাইল।এবার এই ফাইলটি index.html নামে সেভ করুন।
h1{
color: #555;
background: #f1f1f1;
text-align: center;
}
আর এই কোড টুকু style.css file এ লিখুন তাহলে দেকবেন কাজ করছে ।
এরপর index.html browser রান করিয়ে দেখুন সব CSS গুলি সেখানে কাজ করছে ।
প্রফেশনালি সবাই External CSS ব্যবহার করে কেননা একটা HTML ফাইলের জন্য হাজার হাজার লাইন পর্যন্ত CSS লিখতে হয়। ফলে HTML এবং CSS ফাইল আলাদা করাটা জরুরি হয়ে পরে এবং পরবর্তীতে কোড মেইনটিনেন্স এর কাজ অত্যন্ত সহজ হয়ে যায়।
