HTML CSS:
এইচটিএমল ডকুমেন্টের যেকোন এলিমেন্টকে স্টাইলিং বা একটা রুপ দিতে সিএসএস
ব্যবহার হয়।
একটা প্যারাগ্রাফ (<p></p>) বা হেডিং (<h1></h1>) বা
যেকোন এলিমেন্ট কে ধরুন রং করতে চান, ফন্ট বড় ছোট করতে হবে, অবস্থান এক দিক
থেকে অন্যদিকে নিতে হবে, ব্যাকগ্রাউন্ড রং বদলাতে হবে এরুপ শত ধরনের স্টাইল
পরিবর্তন সিএসএস দিয়ে করা হয়। এইচটিএমএল এলিমেন্টের বিপরীতে সিএসএস রুল লেখা
হয়।
বর্তমানে CSS 3 জনপ্রিয়তা ও ব্যবহার দিন দিন বেড়েই চলছে।
CSS এর পূর্ণরুপ - Cascading Style Sheets
আর একটি কথা না বললেই নয় সিএসএস শেখার আগে অবশ্যই এইচটিএমএল সম্বন্ধে ভাল
জানতে হবে। এইচটিএমএল না জানলে সিএসএস এ ভালো করা সম্ভব না।
প্রোপার্টি এবং এর মানের মাঝে কোলন (:) চিহ্ন দিতে হবে এবং মানের শেষে
সেমিকোলন (;) দিতে হবে তা নাহলে কোড কাজ করবেনা।
ইনলাইন সিএসএসঃ
এইচটিএমএল এলিমেন্টে style এট্রিবিউট দিয়ে সিএসএস রুল লেখা যায় এটাই ইনলাইন
সিএসএস। এর আগে এইচটিএমএল টিউটোরিয়ালে বেশ কয়েক জায়গায় ইনলাইন সিএসএস ব্যবহার
করেছি। খুব প্রয়োজন না হলে ইনলাইন সিএসএস লেখা উচিৎ নয়। মুলত সবসময় এক্সটার্নাল
সিএসএস ই্ ব্যবহার করা উচিৎ।
যেহেতু এলিমেন্টের ভিতরেই সিএসএস লেখা হয় তাই ইনলাইন সিএসএস এর জন্য সিলেক্টর
প্রয়োজন হয়না। যেমন
<h2 style="background-color: #ff0000; color: #fff;">This is inline CSS</h2>
সেমিকোলন (;) দিয়ে প্রতিটি লাইন আলাদা রাখতে হবে যেমন আমি দুটি লাইন আলাদা
করেছি। এভাবে যত ইচ্ছা প্রোপার্টি লিখতে পারেন।
ইন্টার্নাল সিএসএসঃ
এইটা খুব সহজ যেকোন এইচটিএমএল ডকুমেন্টে <head></head> এর ভিতর
style ট্যাগ ব্যবহার করে ইন্টারনাল সিএসএস লেখা হয়। যেমন
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: #f00;
background: yellow;
text-align: center;
}
</style>
</head>
<body>
<p>Content</p>
</body>
</html>
এক্সটার্নাল সিএসএসঃ
ইন্টারনাল বা ইনলাইন সিএসএস খুব প্রয়োজন ছাড়া লেখা হয়না, লেখা উচিৎ ও নয়। কারন
এতে এইচটিএমএল ফাইল দেখতে নোংড়া লাগে এবং অনেক বড় হয়ে যায়। তাই সব সিএসএস রুলকে
একসাথে করে একটা ফাইলে রেখে সেটা .css এক্সটেনশন নাম দিয়ে (যেমন style.css) সেভ
করে HTML ফাইলে সংযুক্ত করে দিলেই হয়ে যায়। এটার নামই হচ্ছে এক্সটার্নাল
সিএসএস। এইচটিএমএল এ link নামে একটা ট্যাগ আছে এটা দিয়েই সংযোগ দেয়া যায়। একটা
উদাহরন
<!DOCTYPE html>
<html>
<head>
<link href="/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Test</h1>
</body>
</html>
এডভ্যান্স লিংক পোপার্টিঃ
এখানে আমরা জানার চেস্টা করবো একটা লিংক কিভাবে আরো জীবন্ত করা যায়।
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="http://wikijana.com" target="_blank">Test Link</a></b></p>
</body>
</html>
এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি
বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর
পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই
আর্টিকেলটি WikiJana.Com সাইটের সম্পদ
তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট
কপিরাইটের অধিনে চলে যেতে পারে।