HTML Styles - CSS

CSS ব্যবহার করে HTML ফরম্যাট করুন

CSS কি?

CSS মানে ক্যাসকেডিং স্টাইল শীট।

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

🎨 CSS = Styles and Colors

CSS টেক্সট, নিয়ন্ত্রণ রং, বক্স এবং লেআউট ম্যানিপুলেট করতে ব্যবহৃত হয়।

CSS বিবরণ

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

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

💡পরামর্শ:

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

CSS ব্যবহার করে

এইচটিএমএল ডকুমেন্টে সিএসএস যোগ করা যায় ৩টি উপায়ে:

Inline CSS

HTML উপাদানগুলির মধ্যে শৈলী বৈশিষ্ট্য ব্যবহার করা

Internal CSS

<head> বিভাগে <style> উপাদান ব্যবহার করে

External CSS

একটি বহিরাগত CSS ফাইল লিঙ্ক করতে <link> উপাদান ব্যবহার করে

🏆গুরুত্বপূর্ণ:

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

Inline CSS

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

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

উদাহরণ

নিচের উদাহরণটি <h1> এলিমেন্টের টেক্সট কালারকে নীল এবং <p> এলিমেন্টের টেক্সট কালার লাল করে দেয়:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS

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

একটি অভ্যন্তরীণ 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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

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

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

উদাহরণ

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

যে কোনো টেক্সট এডিটরে এক্সটার্নাল স্টাইল শীট লেখা যায়। ফাইলটিতে কোনো HTML কোড থাকা উচিত নয় এবং একটি .css এক্সটেনশনের সাথে সংরক্ষণ করা উচিত।

"styles.css" ফাইল:

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

🚀পরামর্শ:

একটি বহিরাগত স্টাইল শীট দিয়ে, আপনি একটি ফাইল পরিবর্তন করে একটি সম্পূর্ণ ওয়েবসাইটের চেহারা পরিবর্তন করতে পারেন!

CSS বৈশিষ্ট্য

CSS Colors, Fonts and Sizes

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

color property

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

font-family property

ব্যবহৃত ফন্ট সংজ্ঞায়িত করে

font-size property

ব্যবহার করা টেক্সট আকার সংজ্ঞায়িত করে

উদাহরণ

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

p {
  border: 2px solid powderblue;
}

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

CSS Padding

p {
  border: 2px solid powderblue;
  padding: 30px;
}

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

CSS Margin

p {
  border: 2px solid powderblue;
  margin: 50px;
}

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

📦পরামর্শ:

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

External CSS Paths

বাহ্যিক শৈলী শীট একটি সম্পূর্ণ URL বা বর্তমান ওয়েব পৃষ্ঠার সাথে সম্পর্কিত একটি পাথ দিয়ে নির্দিষ্ট করা যেতে পারে।

উদাহরণ ব্যাখ্যা 
<link rel="stylesheet" 
      href="https://www.jassifteam.com/styles.css">
 একটি স্টাইল শীটে লিঙ্ক করতে সম্পূর্ণ URL ব্যবহার করে 
<link rel="stylesheet" 
      href="/html/styles.css">
 বর্তমান ওয়েবসাইটের html ফোল্ডারে অবস্থিত একটি স্টাইল শীট সংযুক্ত করে 
<link rel="stylesheet" 
      href="styles.css">
 বর্তমান পৃষ্ঠার মতো একই ফোল্ডারে অবস্থিত একটি স্টাইল শীটে সংযুক্ত করে৷

আপনি HTML ফাইল পাথ অধ্যায়ে ফাইল পাথ সম্পর্কে আরও জানতে পারেন।

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

HTML style attribute- ইনলাইন স্টাইলিং জন্য ব্যবহার করুন
HTML <style> element- অভ্যন্তরীণ CSS সংজ্ঞায়িত করতে ব্যবহার করুন
HTML <link> element- একটি বহিরাগত CSS ফাইল নির্দিষ্ট করতে ব্যবহার করুন
HTML <head> element- <style> এবং <link> উপাদান সংরক্ষণ করতে ব্যবহার করুন

CSS বৈশিষ্ট্য:

📚পরামর্শ:

আপনি আমাদের CSS টিউটোরিয়ালে CSS সম্পর্কে আরও জানতে পারবেন।

অনুশীলন করুন

একটি বহিরাগত স্টাইলশীট লিঙ্ক করার জন্য সঠিক সিনট্যাক্স কি?

<style rel='stylesheet' href='styles.css'>
✗ ভুল! <style> ট্যাগ বহিরাগত স্টাইলশীটের জন্য ব্যবহার করা হয় না
<link rel='stylesheet' href='styles.css'>
✓ ঠিক আছে! <link> ট্যাগটি একটি বহিরাগত স্টাইলশীটের সাথে লিঙ্ক করতে ব্যবহৃত হয়
<a rel='stylesheet' href='styles.css'>
✗ ভুল! <a> ট্যাগ হাইপারলিঙ্কের জন্য ব্যবহার করা হয়, স্টাইলশীটের জন্য নয়

HTML শৈলী ট্যাগ

ট্যাগ ব্যাখ্যা
<style> একটি HTML নথির জন্য শৈলী তথ্য সংজ্ঞায়িত করে
<link> একটি নথি এবং একটি বহিরাগত সম্পদের মধ্যে একটি লিঙ্ক সংজ্ঞায়িত করে

📖দ্রষ্টব্য:

সমস্ত উপলব্ধ HTML ট্যাগের সম্পূর্ণ তালিকার জন্য, আমাদের HTML ট্যাগ রেফারেন্স দেখুন।