CSS বাংলা টিউটোরিয়াল-2
<h2 style="background-color: #f00; color: #fff;">A new background and
font color with inline CSS</h2>এখানে একটা পার্থক্য হচ্ছে কোন সিলেক্টর দিতে হয়না আর curly braces (দ্বিতীয় বন্ধনী) ও নেই। ** সেমিকোলন (;) দিয়ে প্রতিটি লাইন আলাদা রাখতে হবে যেমন আমি দুটি লাইন আলাদা করেছি। এভাবে যত ইচ্ছা প্রোপার্টি লিখতে পারেন।সিএসএস নিয়ে মৌলিক আলোচনা হয়েছে এবার শিখতে হবে কোথায় এবং কিভাবে সিএসএস লিখব। ৩ ভাবে সিএসএস রুল লেখা যায়
১. ইনলাইন (Inline CSS) : এর আগে এইচটিএমএল টিউটোরিয়ালেগুলিতে অনেক ইনলাইন সিএসএস ব্যবহার করেছি। এইচটিএমএল এলিমেন্টের start tag এর ভিতরই style এট্রিবিউট দিয়ে সিএসএস লেখা যায়।
২. ইন্টারনাল (Internal CSS) : নিচের লাইনগুলিতে বিষদ আলোচনা দেখুন
৩. এক্সটার্নাল (External CSS) : নতুন একটা .css এক্সটেনশন দিয়ে ফাইল বানিয়ে সেখানে সিএসএস লেখা হয় আর এইচটিএমএল ফাইলে link ট্যাগ দিয়ে সংযুক্ত করে দিলেই কাজ হয়।ইন্টারনাল (Internal CSS) :
================================
খুব সহজ। যেকোন এইচটিএমএল ডকুমেন্টে <head></head> এর ভিতর style ট্যাগ ব্যবহার করে ইন্টারনাল সিএসএস লেখা হয়। যেমন
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: #f00;
background: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1> projukti heading</h1>
<p> projukti content goes here.</p>
</body>
</html>
ব্যাখ্যা : ৪ থেকে ১০ নম্বর লাইন পর্যন্ত ইন্টারনাল সিএসএস লেখা হয়েছে। সিএসএস কিভাবে লিখতে হয় সেটা এখানে খুব ভালভাবে দেখে নিন। এভাবেই সিএসএস লেখা হয় অর্থ্যাৎ প্রথমে সিলেক্টর (৪ নম্বর লাইনে h1) এরপর দ্বিতীয় বন্ধনীর (curly braces ) মধ্যে একটা একটা করে প্রেপার্টি এবং তার মান দেয়া হয়। যেমন ৬ নম্বর লাইনে color একটা প্রেপার্টি এবং এর মান দিয়েছি #f00 (এটা একটা কালার কোড যেটা লাল রং প্রদর্শন করায়) এভাবে বাকিগুলিও একইরকম। ** প্রোপার্টি এবং এর মানের মাঝে কোলন (:) চিহ্ন দিতে হবে এবং মানের শেষে সেমিকোলন (;) দিতে হবে তা নাহলে কোড কাজ করবেনা।
** ইন্টারনাল সিএসএস <head></head> ট্যাগের ভিতর লেখাই নিয়ম তবে ডকুমেন্টের অন্য কোথাও দিলেও কাজ করবে (সাধারনত body এলিমেন্টর ভিতরও দেয়া যায়)।
** প্রোপার্টি গুলির মান নির্দিষ্ট থাকে তাই শুধু সেগুলিই ব্যবহার করতে পারবেন। যেমন text-align প্রেপার্টি টির মান ৫ ধরনের হতে পারে "left", "right", "center", "justify", "inherit"
left দিলে এলিমেন্টের লেখাটি বামে দেখাবে। right দিলে ডানে, justify দিলে দুদিকে সমান করে দেখাবে যেমন পত্রিকার কলামগুলি দেখায়। center দিলে মাঝে এবং inherit দিলে প্যারেন্ট এলিমেন্টের টা প্রয়োগ হবে।
আবার color এর মান শুধু যেকোন বৈধ কালার কোড বা কালারের নামই হতে হবে তবে যেকোন রং হতে পারেন যেমন আমি #foo দিয়েছি আপনি চাইলে #000 (কালো) বা অন্য কোন রং দিতে পারেন এমনকি রংয়ের নামও দেয়া যায় যেমন maroon। যেমন আমি background প্রোপার্টির মান দিয়েছি yellow এভাবে..
No comments