HTML Tutorials
HTML ফর্মস
HTML গ্রাফিকস
HTML Media
HTML Examples
HTML রিফারেন্স

HTML Styles - CSS

পূর্বে পরবর্তী

CSS মানে ক্যাসকেডিং স্টাইল শীট(Cascading Style Sheets)।

CSS অনেক কাজ বাঁচায়। এটি একসাথে একাধিক ওয়েব পৃষ্ঠার বিন্যাস নিয়ন্ত্রণ করতে পারে।

CSS = Styles and Colors

টেক্সট ম্যানিপুলেট করুন
Colors,  Boxes

CSS কি?

ক্যাসকেডিং স্টাইল শীট (CSS) একটি ওয়েবপৃষ্ঠার বিন্যাস করতে ব্যবহৃত হয়।

CSS-এর সাহায্যে, আপনি রঙ, ফন্ট, পাঠ্যের আকার, উপাদানগুলির মধ্যে ব্যবধান, উপাদানগুলিকে কীভাবে অবস্থান এবং বিন্যস্ত করা হয়, কোন পটভূমির চিত্র বা পটভূমির রঙগুলি ব্যবহার করা হবে, বিভিন্ন ডিভাইস এবং স্ক্রীনের আকারের জন্য বিভিন্ন প্রদর্শন এবং আরো অনেক কিছু!

টিপ: ক্যাসকেডিং শব্দের অর্থ হল একটি অভিভাবক উপাদানে প্রয়োগ করা একটি শৈলী(style) পিতামাতার মধ্যে থাকা সমস্ত শিশু উপাদানগুলিতেও প্রযোজ্য হবে৷ সুতরাং, আপনি যদি বডি টেক্সটের রঙ "নীল" তে সেট করেন, তবে সমস্ত শিরোনাম, অনুচ্ছেদ এবং শরীরের অন্যান্য পাঠ্য উপাদানগুলিও একই রঙ পাবে (যদি না আপনি অন্য কিছু নির্দিষ্ট করেন)!

CSS-এর ব্যবহার

HTML ডকুমেন্টে CSS যোগ করা যায় ৩টি উপায়ে:

  • Inline - HTML উপাদানের ভিতরে শৈলী(style) বৈশিষ্ট্য(attribute) ব্যবহার করে।
  • Internal - <head> বিভাগে একটি <style> উপাদান ব্যবহার করে।
  • External - একটি বাহ্যিক CSS ফাইলের সাথে লিঙ্ক করার জন্য একটি <link> উপাদান ব্যবহার করে।

CSS যোগ করার সবচেয়ে সাধারণ উপায় হল বহিরাগত CSS ফাইলে স্টাইল রাখা। যাইহোক, এই টিউটোরিয়ালে আমরা ইনলাইন এবং অভ্যন্তরীণ শৈলী(style) ব্যবহার করব, কারণ এটি প্রদর্শন করা সহজ, এবং আপনার পক্ষে নিজে চেষ্টা করা সহজ।

Inline CSS

একটি ইনলাইন CSS একটি একক HTML উপাদানে একটি অনন্য শৈলী(style) প্রয়োগ করতে ব্যবহৃত হয়।

একটি ইনলাইন CSS একটি HTML উপাদানের শৈলী(style) বৈশিষ্ট্য ব্যবহার করে।

নিম্নলিখিত উদাহরণটি <h1> উপাদানটির পাঠ্যের রঙকে নীলে এবং <p> উপাদানটির পাঠ্যের রঙকে লালে সেট করে:

উদাহরণ:

<h1 style="color:blue;">একটি নীল শিরোনাম</h1>

<p style="color:red;">একটি লাল অনুচ্ছেদ।</p>
নিজে চেষ্টা করুন »

Internal CSS

একটি অভ্যন্তরীণ CSS একটি একক HTML পৃষ্ঠার জন্য একটি style সংজ্ঞায়িত করতে ব্যবহৃত হয়।

একটি অভ্যন্তরীণ CSS একটি HTML পৃষ্ঠার <head> বিভাগে একটি <style> উপাদানের মধ্যে সংজ্ঞায়িত করা হয়।

নিম্নলিখিত উদাহরণটি সমস্ত <h1> উপাদানগুলির পাঠ্যের রঙকে (সেই পৃষ্ঠায়) নীল এবং সমস্ত <p> উপাদানগুলির পাঠ্যের রঙ লাল করে। এছাড়াও, পৃষ্ঠাটি "পাউডারব্লু" পটভূমির রঙের সাথে প্রদর্শিত হবে:

উদাহরণ:

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

<h1>এটি একটি শিরোনাম</h1>
<p>এটি একটি অনুচ্ছেদ।</p>

</body>
</html>
নিজে চেষ্টা করুন »

External CSS

একটি বহিরাগত স্টাইল শীট অনেক HTML পৃষ্ঠাগুলির জন্য style সংজ্ঞায়িত করতে ব্যবহৃত হয়।

একটি বাহ্যিক স্টাইল শীট ব্যবহার করতে, প্রতিটি HTML পৃষ্ঠার <head> বিভাগে এটিতে একটি লিঙ্ক যুক্ত করুন:

উদাহরণ:

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

<h1>এটি একটি শিরোনাম</h1>
<p>এটি একটি অনুচ্ছেদ।</p>

</body>
</html>
নিজে চেষ্টা করুন »

বাহ্যিক স্টাইল শীট যেকোনো পাঠ্য সম্পাদকে(editor) লেখা যেতে পারে। ফাইলটিতে কোনো HTML কোড থাকা উচিত নয় এবং একটি .css এক্সটেনশনের সাথে সংরক্ষণ করা আবশ্যক।

এখানে "styles.css" ফাইলটি দেখতে কেমন ঠিক তেমন করেই তৈরি করতে হবে তবে নাম আলাদা রাখতে পারেন যেমন styles-এর স্থানে "custom.css"

"styles.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
টিপঃ একটি বহিরাগত স্টাইল শীট দিয়ে, আপনি একটি ফাইল পরিবর্তন করে একটি সম্পূর্ণ ওয়েব সাইটের চেহারা পরিবর্তন করতে পারেন!

CSS কালার, ফন্ট এবং সাইজ

এখানে, আমরা কিছু সাধারণভাবে ব্যবহৃত CSS বৈশিষ্ট্য প্রদর্শন করব। আপনি পরে তাদের সম্পর্কে আরো জানতে হবে।

CSS color প্রপার্টি ব্যবহার করা টেক্সট রঙ সংজ্ঞায়িত করে।

CSS font-family প্রপার্টি ব্যবহার করা ফন্টকে সংজ্ঞায়িত করে।

CSS font-size প্রপার্টি ব্যবহার করা ফন্ট আকার সংজ্ঞায়িত করে।

উদাহরণ:

CSS color, font-family এবং font-size প্রপার্টির ব্যবহার:

<!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 বর্ডার

CSS border প্রপার্টি একটি HTML এলিমেন্টের চারপাশে একটি সীমানা নির্ধারণ করে।

টিপঃ আপনি প্রায় সমস্ত HTML উপাদানের জন্য একটি সীমানা নির্ধারণ করতে পারেন

উদাহরণ:

CSS বর্ডার প্রপার্টির ব্যবহার:

p {
  border: 2px solid blue;
}
নিজে চেষ্টা করুন »

CSS Padding

CSS padding প্রপার্টি পাঠ্য এবং সীমানার মধ্যে একটি প্যাডিং (স্পেস) সংজ্ঞায়িত করে।

টিপঃ আপনি প্রায় সমস্ত HTML উপাদানের জন্য একটি সীমানা নির্ধারণ করতে পারেন

উদাহরণ:

CSS সীমানা এবং padding প্রপার্টির ব্যবহার:

p {
  border: 2px solid blue;
  padding: 30px;
}
নিজে চেষ্টা করুন »

CSS Margin

CSS margin প্রপার্টি সীমানার বাইরে একটি মার্জিন (স্পেস) সংজ্ঞায়িত করে।

টিপঃ আপনি প্রায় সমস্ত HTML উপাদানের জন্য একটি সীমানা নির্ধারণ করতে পারেন

উদাহরণ:

CSS border এবং margin প্রপার্টির ব্যবহার:

p {
  border: 2px solid blue;
  margin: 50px;
}
নিজে চেষ্টা করুন »

External CSS-এর লিঙ্ক

External স্টাইল শীটগুলি একটি সম্পূর্ণ URL সহ বা বর্তমান ওয়েব পৃষ্ঠার সাথে সম্পর্কিত একটি পাথের সাথে উল্লেখ করা যেতে পারে।

উদাহরণ:

এই উদাহরণটি একটি স্টাইল শীটে লিঙ্ক করার জন্য একটি সম্পূর্ণ URL ব্যবহার করে:

<link rel="stylesheet" href="http://www.nbp3bangla.com/php/try_it_edittors/styles.css">
নিজে চেষ্টা করুন »

উদাহরণ:

এই উদাহরণটি বর্তমান ওয়েব সাইটের try_it_editors ফোল্ডারে অবস্থিত একটি স্টাইল শীটের সাথে লিঙ্ক করে:

<link rel="stylesheet" href="../try_it_edittors/styles.css">
নিজে চেষ্টা করুন »

উদাহরণ:

এই উদাহরণটি বর্তমান পৃষ্ঠা যে ফোল্ডারে আছে একই ফোল্ডারে অবস্থিত একটি স্টাইল শীটের সাথে লিঙ্ক করে:

<link rel="stylesheet" href="styles.css">
নিজে চেষ্টা করুন »
আপনি HTML ফাইল পাথ অধ্যায়ে ফাইল পাথ সম্পর্কে আরও পড়তে পারেন।

অধ্যায়ের সারাংশ

  • Inline স্টাইলিং জন্য HTML style প্রপার্টি ব্যবহার করুন
  • Internal CSS সংজ্ঞায়িত করতে HTML <style> উপাদান ব্যবহার করুন
  • একটি External CSS ফাইল উল্লেখ করতে HTML <link> উপাদান ব্যবহার করুন
  • <style> এবং <link> উপাদান সংরক্ষণ করতে HTML <head> উপাদান ব্যবহার করুন
  • পাঠ্য রঙের জন্য CSS color বৈশিষ্ট্য(property) ব্যবহার করুন
  • টেক্সট ফন্টের জন্য CSS font-family প্রপার্টি ব্যবহার করুন
  • পাঠ্য আকারের জন্য CSS font-size প্রপার্টি ব্যবহার করুন
  • সীমানার জন্য CSS border প্রপার্টি ব্যবহার করুন
  • সীমানা ভিতরে স্থান জন্য CSS padding প্রপার্টি ব্যবহার করুন
  • সীমানার বাইরে স্থানের জন্য CSS margin প্রপার্টি ব্যবহার করুন
পরামর্শ: আপনি আমাদের CSS টিউটোরিয়াল থেকে CSS সম্পর্কে আরও অনেক কিছু জানতে পারবেন।

HTML style ট্যাগ

ট্যাগ বর্ণনা
style একটি HTML নথির(document) জন্য style তথ্য সংজ্ঞায়িত করে
link একটি নথি(document) এবং একটি বহিরাগত(external) সম্পদের(resource) মধ্যে একটি লিঙ্ক সংজ্ঞায়িত করে
সমস্ত উপলব্ধ HTML ট্যাগের সম্পূর্ণ তালিকার জন্য, আমাদের HTML ট্যাগ রেফারেন্স দেখুন।
পূর্বে পরবর্তী