এইচটিএমএল সিএসএস - HTML CSS


এইচটিএমএল এলিমেনটের স্টাইলিং এর জন্য সিএসএস ব্যবহার করা হয়। CSS এর পূর্ণরূপ হল Cascading Style Sheet.


সিএসএস দিয়ে এইচটিএমএল স্টাইলিং

সিএসএসের উদ্ভব হয়েছে এইচটিএমএল এলিমেনট স্টাইলিং এর জন্য। ৩ ভাবে এইচটিএমএল ডকুমেন্টে সিএসএস ব্যবহার করা যায়। যথা -

কোন এইচটিএমএল এলিমেন্টে সিএসএস প্রয়োগ করার সবচেয়ে সহজ এবং ভাল পন্থাটি হলো বহিঃস্থ বা external সিএসএস ফাইল ব্যবহার করা। আমাদের এই টিউটোরিয়ালের মধ্যে প্রায় সল্পল ক্ষেত্রেই আমরা ইনলাইন সিএসএস অর্থাৎ স্টাইল এট্রিবিউট এবং ইন্টার্নাল সিএসএস অর্থাৎ স্টাইল এলিমেনট ব্যবহার করেছি, কারণ এরফলে আপনি সহজে উদাহরণগুলো বুঝতে এবং অনুশীলন করতে পারবেন। ব্যাবহারিক ক্ষেত্রে আপনাকে অবশ্যই External সিএসএস ফাইল ব্যবহার করতে হবে।

নোট - সিএসএস সম্পর্কে পরিপূর্ণভাবে জানতে আমাদের সিএসএস টিউটোরিয়াল গুলো দেখুন।


Inline স্টাইল

কোন একটি নির্দিষ্ট এইচটিএমএল এলিমেন্টকে অথবা অল্প কিছু স্টাইল কোড যা কেবল, ঐ এলিমিন্টের জন্যই প্রজজ্জ, এ সকল ক্ষেত্রে স্টাইল করার জন্য Inline স্টাইল ব্যবহার করা হয়। এর জন্য ঐ এলিমেন্টের সাথে style এট্রিবিউট ব্যবহার করা হয়। নিচের উদাহরণটি ব্রাউজারে open করলে <p> এলিমেন্টের টেক্সটের রঙ সবুজ দেখা যাবে।

উদাহরণ


<h1 style="color: green;">This is a Heading with green colour.</h1>

কোড এডিটর


বেস কিছু এইচটিএমএল এলিমেন্টের জন্য বা অনেক গুলো স্টাইল কোড এর জন্য এ পদ্ধতি বাবহার যোগ্য নয়।


Internal স্টাইল

Internal স্টাইল করার জন্য এইচটিএমএল ডকুমেন্টের <head> সেকশনের মধ্যে <style> . . . </style> ট্যাগ ব্যবহার করা হয় এবং স্টাইল কোডগুলো এই <style> . . . </style> ট্যাগের মধ্যে লেখা হয়। সিএসএস স্টাইল কোড সহ <style> . . . </style> ট্যাগটি <body> . . . </body> ট্যাগের মাঝেও ব্যবহার করা যায়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


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

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

  </body>
</html>

কোড এডিটর



External স্টাইল

এক সাথে অনেকগুলো ওয়েব পেজ অথবা একটি সম্পূর্ণ ওয়েবসাইটকে স্টাইল করার জন্য External সিএসএস পদ্ধতি ব্যবহার করা উচিৎ। অর্থাৎ এমন ক্ষেত্রে যেখানে একই রকম বেস কিছু সিএসএস স্টাইল কোড , এখাধিক এইচটিএমএল ডকুমেন্ট বা সমগ্র ওয়েব সাইটের জন্যই প্রযোজ্য।
একটি সিএসএস ফাইল তৈরি করে তার মধ্যে প্রয়োজনীয় সকল স্টাইল কোড গুলো অন্তর্ভুক্ত করা হয়। তারপর ফাইলটিকে ডকুমেন্টের <head> সেক্সনের মাঝে <link> ট্যাগ ব্যবহার করে সংযুক্ত করে দেওয়া হয়। এইচটিএমএল এলিমেন্টে নির্দিষ্ট ক্লাস বা আইডি ব্যবহার করে External সিএসএস ফাইলের স্টাইল কোড গুলো সুনির্দিষ্ট ভাবে নির্দেশ করা যায়। এভাবে কোন স্টাইল শীট কোন ওয়েবসাইটের সকল ওয়েব পেজে সংযুক্ত করে পুরো ওয়েবসাইটের স্টাইল করা যায়।

উদাহরণ


<!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>

কোড এডিটর


<link> ট্যাগ ব্যবহার করে <body> . . . </body> সেকশনের মাঝেও বা <head> ও <body> উভয় অংশেই ভিন্ন ভিন্ন সিএসএস ফাইল যুক্ত করা যায়।


id এট্রিবিউট

কোনো নির্দিষ্ট একটি এলিমেন্টকে বিশেষভাবে স্টাইল করার জন্য এইচটিএমএল এলিমিন্টের মধ্যে id এট্রিবিউট যুক্ত করা হয়। অর্থাৎ এইচটিএমএল এলিমেন্টকে id এট্রিবিউট ব্যবহার করে একটি নাম দেয়া হয়।

এইচটিএমএল কোড


<p id="p01">I am different</p>

তারপরে ঐ নির্দিষ্ট id এট্রিবিউট যুক্ত এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য সিএসএস ফাইলে বা <style> . . . </style> এট্রিবিউটের অভ্যন্তরে স্টাইল কোড লেখা হয়।

সিএসএস কোড


#p01 {
  color: blue;
  }

কোড এডিটর


নোট - এইচটিএমএল এলিমেন্টের সকল আইডি সর্বদাই ইউনিক অর্থাৎ একটি থেকে অন্যটি ভিন্ন হতে হয়।


class এট্রিবিউট

একাধিক এইচটিএমএল এলিমেন্টকে একত্রে একই ধরনের স্টাইল করার জন্য class এট্রিবিউট ব্যবহার করা হয়। অর্থাৎ কতগুলো এইচটিএমএল এলিমেন্টকে class এট্রিবিউট ব্যবহার করে একটি সার্বজনীন সাধারণ নাম দেয়া হয়।

এইচটিএমএল কোড


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

তারপরে ঐ class এট্রিবিউট যুক্ত এইচটিএমএল এলিমেন্ট গুলোকে স্টাইল করার জন্য class কে কল/সিলেক্ট করে সিএসএস ফাইলে স্টাইল নির্ধারণ করা হয়। তারপরে ঐ class এট্রিবিউট যুক্ত এইচটিএমএল এলিমেন্ট গুলোকে স্টাইল করার জন্য এই নাম ধরেই কল/সিলেক্ট করে সিএসএস ফাইলে বা <style> . . . </style> এট্রিবিউটের অভ্যন্তরে সিএসএস স্টাইল কোড গুলো লেখা হয়।

সিএসএস কোড


p.error {
  color: red;
  }

বহিঃস্থ css ফাইল

বহিঃস্থ অর্থাৎ অন্য কোন ওয়েব সাইটে থাকা কোন স্টাইল শীটের লিংক বর্তমান এইচটিএমএল ডকুমেন্টে উল্লেখ করে ব্যবহার করা যায়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


<link rel="stylesheet" href="https://www.websschool.com/style/style.css">

নোট - এ সম্পর্কে আরও বিস্তারিত জানতে আমাদের এইচটিএমএল ফাইল পাথ পেজটি ব্রাউজ করুন।


ডেপ্রিকেটেড ট্যাগ এবং এট্রিবিউট

এইচটিএমএল ৪.০১ এ কতগুলো ট্যাগ এবং এট্রিবিউট ডেপ্রিকেট বা বাতিল করা হয়েছে। ডেপ্রিকেট বলতে বোঝায় যে এইচটিএমএলের পরবর্তী ভার্সনগুলোয় এই ট্যাগ এবং এট্রিবিউট ব্যবহার করা হবে না।
যে সকল ট্যাগ এবং এট্রিবিউট ডেপ্রিকেট বা বাতিল করা হয়েছে সেগুলো হল -

ট্যাগ বর্ণনা
<center> Deprecated.কোন কন্টেন্টের অবস্থান মাঝখানে নির্ধারণ করে।
<font> এবং <basefont> Deprecated.এইচটিএমএল এ টেক্সট এর font নির্ধারণ করে।
<s> এবং <strike> Deprecated. টেক্সটের জন্য strikethrough স্টাইল নির্ধারণ করে।
<u> Deprecated.টেক্সটের জন্য underline স্টাইল নির্ধারণ করে।

এট্রিবিউট বর্ণনা
align Deprecated.টেক্সটের অবস্থান বা alignment নির্ধারণ করে।
bgcolor Deprecated.এই এট্রিবিউটের দ্বারা background এর রং নির্ধারণ করা হয়।
color Deprecated.লেখা বা টেক্সটের রং নির্ধারণ করে।

নোট - এই সকল ট্যাগ এবং এট্রিবিউটগুলো ব্যবহার করা উচিৎ নয়, এর পরিবর্তে সিএসএস ব্যবহার করা ভাল।