CSS কি ? কি ভাবে ব্যবহার করবেন ?

কমেন্ট

Shahin

Published: September 7, 2016

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>
একটি ফাইল তৈরি করুন। তার নাম দিন style.css এবং নিচের কোড গুলো তার ভেতর লিখে সংরক্ষন/সেভ করুন।
.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>