Creative IT Blog Just another WordPress site
Related Articles
Cascading Style Sheets (CSS) হল একটি ভাষা যা দিয়ে কোন ডকুমেন্ট কিভাবে দেখানো হবে বা সোজা কথায় ডকুমেন্টের স্টাইল নিয়ন্ত্রণ করা সম্ভব।কিন্তু আমরা যদি একটি ভালো মানের ওয়েব সাইট তৈরি করতে চাই, তাহলে দরকার সিএসএস। CSS এর পূর্ন রূপ হচ্ছে Cascading Style Sheets। একটি এইচটিএমএল ফাইলের বিভিন্ন উপাদান গুলো কিভাবে দেখাবে যেমন রঙ, ফন্ট সাইজ, মার্জিন, প্যাডিং ইত্যাদি সিএসএস দিয়ে নির্ধারণ করা হয়।
এইচটিএমএল এ সিএসএস যোগ করার তিনটি পদ্ধতি রয়েছেঃ
- External style sheet
- Internal style sheet
- Inline style …।
1.External style sheet
একই স্টাইল একের অধিক এইচটিএমএল ফাইলে যুক্ত করার জন্য External style sheet ব্যবহার করা হয়। আমরা যত ওয়েবসাইট দেখি, সব গুলোই External style sheet দিয়ে তৈরি করা। External style sheet এর সুবিধে হচ্ছে একই সাথে সব গুলো ওয়েব পেইজে স্টাইল দেওয়া বা স্টাইল পরিবর্তন করা । যা অনেক কাজ কমিয়ে দেয়। একটি css ফাইল তৈরি করে সব স্ট্যাইল ঐ css ফাইলে লেখা হয়। তারপর তা এইচটিএমএল ফাইলে যুক্ত করা হয়।
External style sheet এইচটিএমএল ফাইলে যুক্ত করার জন্য head ট্যাগ এর ভেতর নিচের মত করে লেখা হয়।
<head> <linkrel="stylesheet"type="text/css"href="style.css"></head>.div { background: url(../img/ima01.jpg) no-repeatcentercenterfixed;}#container{ width:960px; margin:70auto; padding:40px; background:#০০০; opacity:.5;}h1{ color:#০০০; text-align:center;}2.Internal Style Sheet
একটি নির্দিষ্ট এইচটিএমএল ফাইলে স্টাইল দেওয়ার জন্য Internal Style Sheet ব্যবহার করা হয়। Internal Style Sheet ব্যবহার করলে যতগুলো ওয়েব পেইজ থাকবে সব গুলোর জন্য আলাদা আলাদা ভাবে সিএসএস কোড লিখতে হবে। Internal Style Sheet ও ওয়েব পেইজ / এইচটিএমএল পেইজের head ট্যাগ এর ভেতর লিখতে হয়। তার জন্য head ট্যাগ এর ভেতর style নামে আরেকটা ট্যাগ এর ভেতর সিএসএস এর রুল গুলো লেখা হয়। নিচের মত করে একটি এইচটিএমএল ফাইলে Internal Style Sheet লেখা হয়..
<head> <style> .div {background:#cccccc;} h1 {color:#c2c2c2;} </style></head>
3.Inline Styles
এইচটিএমএল এর একটা নির্দিষ্ট ইলিম্যান্ট এ স্টাইল দেওয়ার জন্য Inline Styles ব্যবহার করা হয়। যদিও এটা এইচটিএমএল ফাইলে স্টাইল দেওয়ার জন্য একটা ভালো উপায় নয়। একটা এইচটিএমএল ট্যাগ এর ভেতর Inline Styles নিচের মত করে লেখা হয়ঃ
<h4style="color:red; font-size:25px">This is a heading.</h4><p style="color:green; font-size:14px">This is a paragraph.</p><h6style="color:black; font-size:18px">This is a sub heading.</h6>
