X

X

X

HTML -এ CSS -এর ব্যবহার


CSS = স্টাইল এবং রং

টেক্সট (লিখা) রং বেরং করণ
Colors,
 Boxes

 


CSS -দিয়ে ইচ্ছেমত যেকোনো লেখা রং বেরং করা যায়

CSS এর পুরো অর্থ Cascading Style Sheets.

একটি HTML ইলামেন্ট কিভাবে উপস্থাপিত হবে তা CSS দিয়ে সুন্দরভাবে উপস্থাপণ করা যায়। এমনকি ওয়েবসাইটের কোনো পেজ কিভাবে প্রিন্টারে পিন্ট হবে তাও নির্ধারণ করা যায়। CSS সত্যিই একটি অসাধারণ ভাষা। মনে রাখবেন এটি কোনো প্রোগ্রামিং ভাষা নয়। এটি শুধুমাত্র HTML ইলামেন্টকে স্টাইল করার জন্য ব্যবহৃত হয়।

একটি ওয়েবপেজকে সুন্দরভাবে উপস্থাপন করার জন্য CSS খুবই সময় সাশ্রয়ী একটি প্রযুক্তি। এর মাধ্যমে পুরো ওয়েবসাইটের লেআউট নিয়ন্ত্রণ করা যায়।

তিনটি উপায়ে ওয়েব পেজে CSS যুক্ত করা যায় :

  • Inline – HTML attribute এর মাধ্যমে যুক্ত করা যায়।
  • Internal – <style> ইলামেন্ট ব্যবহার করে ওয়েব পেজের <head> অংশে যুক্ত করা যায়।
  • External – অন্য একটি আলাদা ফাইলে CSS কোড রেখে, সেটিকে মুল পেজে অন্তর্ভুক্ত করা যায়।

যদিও তিনটি উপায়ে CSS ওয়েব পেজে যুক্ত করা যায়, তার মধ্যে সবচেয়ে সেরা উপায় হচ্ছে CSS কোডকে অন্য কোনো ফাইলে রেখে মুল পেজের সাথে অন্তর্ভুক্ত করা। কেননা এতে খুব সহজে পেজটিকে মেইনটেইন করা যায়। অর্থাৎ, ৩নং পদ্ধতিটিই সবচেয়ে ভালো উপায়। তবে প্রয়োজনভেদে এবং যদি কোডের পরিমান খুব অল্প হয়, তবে ইনলাইন বা ইন্টার্নাল CSS ব্যবহার করা ভালো। সেক্ষেত্রে কম HTTP Request দিয়ে পুুরো পেজটি লোড হবে। লোডিং টাইমও কম লাগবে।

টিপস: CSS সম্পর্কে বিস্তারিত আমাদের  CSS Tutorial. এ জানতে পারবেন।


Inline CSS (ইলামেন্ট ভিত্তিক CSS)

কেবলমাত্র একটি ইলামেন্টের জন্য ইনলাইন CSS ব্যবহার করা হয়। অর্থাৎ, কোনো স্টাইল যদি শুধুমাত্র একটি ইলামেন্টের জন্য প্রযোজ্য হয়ে থাকে তবে ঐ ইলামেন্টে ইনলাইন CSS ব্যবহার করা উত্তম। style attribute -এর মাধ্যমে ইনলাইন CSS লিখা হয়।

নিচে ইনলাইন CSS এর মাধ্যমে <h1> ইলামেন্টের টেক্সটের রং নির্ধারণ করা হয়েছে।

HTML এ CSS এর ব্যবহার

<h1 style="color:blue;">This is a Blue Heading</h1>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Internal CSS (পেজভিত্তিক CSS)

যদি একই কোড অন্যান্য ইলামেন্টের ক্ষেত্রেও প্রযোজ্য হয়, তবে internal CSS ব্যবহার করা উত্তম। সেক্ষেত্রে একই কোড বারবার লিখতে হবে না। মনে রাখবেন internal CSS পেজ ভিত্তিক। অর্থাৎ, এক পেজে লিখিত internal CSS অন্য পেজে কাজ করবে না। যদি একই CSS কোড অন্য পেজেও প্রয়োজন হয়, তবে সেটিকে internal CSS দিয়ে আবার সেই পেজে লিখতে হবে। এক্ষেত্রে সমাধান হচ্ছে external CSS ব্যবহার করা। যেটি আমরা কিছুক্ষণ পরেই জানবো।

internal বা পেজভিত্তিক CSS কে HTML page -এর <head> section -এ লিখা হয়।

HTML অভ্যন্তরীন (Internal) CSS এর ব্যবহার

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


External CSS (ওয়েবসাইট ভিত্তিক CSS)

যেকোনো পেজের জন্য কমন CSS লিখার জন্য external CSS ব্যবহার করা হয়। অর্থাৎ, যদি একই CSS স্টাইল আমাদের অন্য পেজের জন্যও প্রয়োজন হয়, তবে CSS স্টাইল কোডকে অন্য একটি ফাইলে লিখে সেটিকে আমাদের কাঙ্খিত যেকোনো পেজে যুক্ত করা যায়।

শুধুমাত্র একটি একক CSS file – কে পরিবর্তন করে পুরো ওয়েবসাইটের ডিজাইন পরিবর্তন করা যায়, external CSS ব্যবহারের মাধ্যমে। যে ফাইলে CSS কোড লিখা হয়, তাকে CSS ফাইল বলে। এই ফাইলগুলো শেষে .css (ডট সিএসএস) থাকে।

HTML এর <head> section -এ <link> ইলামেন্ট ব্যবহার করে external style কোনো ওয়েব পেজে যুক্ত করতে হয়। href attribute এ কাঙ্খিত css ফাইলটির এড্রেস সেট করে দিতে হয়।

HTML বাহ্যিক(External) CSS এর ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

যেকোনো টেক্সট এডিটর-এ external CSS লিখা যায়। এই ফাইলে কোনো ভাবেই কোনো HTML code রাখা যাবে না এবং অবশ্যই ফাইলটিকে .css এক্সটেনশন দিয়ে সংরক্ষণ (save) করতে হবে। ইদানিং .css extension না দিলেও চলে , তবে প্রথম শর্তটি অর্থাৎ, কোনোভাবেই এতে CSS ছাড়া অন্য কোনো কোড রাখা যাবে না, এটি বাধ্যতামূলক।

নিচে styles.css নামে একটি ফাইলের বর্ণনা দেওয়া হল। এটি খুবই সাধারণ একটি CSS ফাইল। আমাদের আরো অনেক CSS কোডিং শিখতে হবে। কাজেই ধৈর্য্য ধরুন। আপনিও পারবেন। লেগে থাকুন শিখতে মজা পাবেন।

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

CSS ফন্ট (অক্ষর স্টাইলকরণ)

CSS color property এর মাধ্যমে কোনো ইলামেন্টের অক্ষরসমূহের রং নির্ধারণ করা হয়। রং সম্পর্কে আলোচনা আগের অধ্যায়ে করা হয়েছে। কিভাবে HTML এ বিভিন্ন রং ব্যবহার করতে হয়, তা ঐ অধ্যায়ে পাবেন।

CSS font-family property -এর মাধ্যমে কোনো ইলামেন্টের ফন্ট ফ্যামিলি নির্ধারণ করা হয়। অর্থাৎ, আপনি কোনো ধরণের ফন্ট ব্যবহার করবেন, তা এই প্রোপাটির মাধ্যমে নির্ধারণ করতে হবে।

CSS font-size property -এর মাধ্যমে কোনো ইলামেন্টের ফন্টের সাইজ (আকার) নির্ধারণ করা হয়। ফন্টের সাইজ পিক্সেল এককে লিখা ভালো। তবে আরো কয়েকটি একক রয়েছে, সেগুলোও ব্যবহার করতে পারেন। একেক এককের একেক উপযোগিতা রয়েছে।

HTML এ CSS ফন্ট এর ব্যবহার

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;

}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS Border

CSS border property -এর মাধ্যমে কোনো ইলামেন্টের চারপাশে বর্ডার উপস্থাপণ করা যায়।

HTML এ CSS বর্ডার এর ব্যবহার

<style>
p {
    border: 1px solid powderblue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS Padding

কোনো ইলামেন্টের padding বলতে বোঝায় ঐ ইলামেন্টের টেক্সট এবং বর্ডারের মধ্যবর্তী দূরত্বকে। এটিকে CSS padding property -এর মাধ্যমে নির্ধারণ করা যায়। পিক্সেল কিংবা অন্য কোনো একক ব্যবহার করে padding এর মান নির্ধারণ করতে হয়।

HTML এ CSS padding এর ব্যবহার

<style>
p {
    border: 1px solid powderblue;
    padding: 30px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS Margin

কোনো HTML ইলামেন্টের বর্ডারের বাইরের অংশকে HTML এ Margin বলে। CSS margin property -এর মাধ্যমে কোনো ইলামেন্টের Margin সেট করতে হয়।

HTML এ CSS margin এর ব্যবহার

<style>
p {
    border: 1px solid powderblue;
    margin: 50px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


id Attribute

ID দিয়ে সাধারণত কোনো ব্যক্তি বা বস্তকে নির্দেশ করা বোঝায়। HTML -এ তদ্রুপ কোনো একক ইলামেন্টকে নির্দেশ করা বোঝায়। অর্থাৎ, একটি ID শুধুমাত্র একটি একক ইলামেন্টের ক্ষেত্রেই প্রযোজ্য।

কোনো ইলামেন্টের id সেট করার জন্য একটি উক্ত ইলামেন্টে id attribute -এর মাধ্যমে তার যেকোনো ইউনিক মান সেট করতে হয়ে। পরে এই ইউনিক মান দিয়ে সেটিকে জাভাস্ক্রিপ্ট বা সিএসএস এ পয়েন্ট করা হয়।

<p id=”p01″>আমি একটু অন্যরকম। </p>

তারপর নিচের উপায়ে CSS থেকে উক্ত ইলামেন্টের style সেট করা হয়।

CSS id attribute এর ব্যবহার

<style>
#p01 {
    color: blue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি: দ্র : প্রতিটি ইলামেন্টের id attribute -এর মান অবশ্যই অভিন্ন (Unique) হতে হবে। অর্থাৎ, একই পেজে একাধিক ইলামেন্টের একই মান বিশিষ্ট id attribute থাকবে না। সহজভাষায়, একই ক্লাসে একাধিক ছাত্রের একই রোল নং হতে পারেনা। তাদের ক্লাস একই হতে পারে।


class Attribute

যদি একাধিক (কিন্তু সবগুলোর নয় ) ইলামেন্টের একই রকম স্টাইল প্রয়োজন হয়, তবে class attribute -এর ব্যবহার করা হয়। একাধিক ইলামেন্টের একই মান বিশিষ্ট class attribute থাকতে পারে।

<p class=”error”>I am different</p>

এখন নিচের উপায়ে উক্ত ইলামেন্টের CSS style লিখতে হয়।

CSS class attribute এর ব্যবহার

<style>
p.error {
    color: red;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বাহ্যিক CSS ফাইলের ব্যবহার

বাহ্যিক CSS ফাইলের পুরো URL বা বর্তমান পেজের সাথে সম্পর্কিত URL (Relative URL) ব্যবহার করে ফাইলটিকে মূল পেজে লোড করা যায়।

নিচের উদাহরণে একটি পরিপূর্ণ URL ব্যবহার করা হয়েছে।

CSS এ external ফাইলের ব্যবহার

  <link rel="stylesheet" href="https://www.seicoder.com/resources/html/styles.css">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এই উদাহরণে একই ওয়েবসাইটে অবস্থিত একটি css ফাইলকে লোড করা হয়েছ। একই ওয়েবসাইটে অবস্থিত ফাইলের ক্ষেত্রে Relative URL ব্যবহার করা হয়।

CSS এ relative link এর ব্যবহার

  <link rel="stylesheet" href="/html/styles.css">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে একই ওয়েবসাইটের একই ফোল্ডারের অবস্থিত ফাইলকে লোড করা হয়েছে।

Example

<link rel=”stylesheet” href=”styles.css”>

ফাইলের পথ সম্পর্কে বিস্তারিত  HTML File Paths. চ্যাপ্টারে জানতে পারবেন।


চ্যাপ্টারের সারাংশ

  • ইলামেন্ট ভিত্তিক inline স্টাইলের জন্য HTML style attribute এর ব্যবহার।
  • HTML <style> element এর মাধ্যমে internal CSS এর ব্যবহার।
  • HTML <link> element এর মাধ্যমে external CSS file এর ব্যবহার।
  • HTML <head> element এ <style> এবং <link> element সংরক্ষণের পদ্ধতি।
  • CSS color property এর মাধ্যমে টেক্সটের রং নির্ধারণ।
  • CSS font-family property এর মাধ্যমে টেক্সটের ফন্ট ফ্যামিলি নির্ধারণ।
  • CSS font-size property এর মাধ্যমে টেক্সেটর ফন্ট সাইজ নির্ধারণ।
  • CSS border property এর মাধ্যমে কোনো ইলামেন্টের বর্ডার নির্ধারণ।
  • CSS padding property এর মাধ্যমে কোনো ইলামেন্টের কন্টেন্ট এবং বর্ডারের মধ্যবর্তী দূরত্ব নির্ধারণ।
  • CSS margin property এর মাধ্যমে কোনো ইলামেন্টের বর্ডারের বাইরের অংশের দূরত্ব নির্ধারণ।

HTML Style ট্যাগসমূহ

ট্যাগ বর্ণনা
<style> HTML document এর স্টাইল বর্ণনার জন্য ব্যবহৃত হয়।
<link> ওয়েবপেজ এবং বাহ্যিক CSS ফাইলের সাথে সম্পর্ক নির্ধারণ করে।