CSS ফন্ট রং (Font Color): কিভাবে প্রয়োগ করবেন

CSS background-color প্রপার্টি একটি টেক্সট এলিমেন্টে রং প্রয়োগ করে। আপনি CSS বিল্ট-ইন কালার কীওয়ার্ড, হেক্সাডেসিম্যাল মান, বা অন্য কোনো কালার মান background-color প্রপার্টির সাথে নির্দিষ্ট করতে পারেন। এই প্রপার্টির সিনট্যাক্স: color: yourcolor;।

দ্রষ্টব্য: উপরের সারসংক্ষেপে background-color প্রপার্টির জন্য color সিনট্যাক্স দেওয়া হয়েছে, যা ভুল। সঠিক সিনট্যাক্স হলো background-color: yourcolor;। নিচে সঠিক তথ্য দেওয়া হলো।

CSS ফন্ট রং কীভাবে প্রয়োগ করবেন

ওয়েবসাইটে টেক্সটের রং এবং পটভূমির রং সেট করা ওয়েব ডিজাইনের একটি অত্যাবশ্যক অংশ।

সেটায় CSS color এবং background-color প্রপার্টি কাজে লাগে। color প্রপার্টি আপনাকে HTML টেক্সটের রং সেট করতে দেয়। background-color প্রপার্টি আপনাকে টেক্সটের পটভূমির রং নির্ধারণ করতে দেয়।

এই টিউটোরিয়ালে উদাহরণসহ আলোচনা করা হয়েছে কিভাবে CSS-এ টেক্সটের রং সেট করতে হয়। তারপর টেক্সট এলিমেন্টের পটভূমির রং সেট করার পদ্ধতিও জানব।

CSS ফন্ট রং (Font Color)

CSS ফন্ট রং color প্রপার্টি ব্যবহার করে সেট করা হয়। color প্রপার্টি টেক্সটের রং সেট করে, এলিমেন্টের পটভূমির রং নয়। আপনি CSS কালার কীওয়ার্ড বা হেক্সাডেসিম্যাল স্ট্রিং এর মতো কালার মান ব্যবহার করে রং সেট করতে পারেন।

color প্রপার্টির সিনট্যাক্স:

p {
  color: red;
}

এই নিয়ম একটি HTML ডকুমেন্টের সব <p> ট্যাগের রং লাল করে দেয়।

এখানে আমরা একটি CSS কালার কীওয়ার্ড ব্যবহার করেছি। এই কীওয়ার্ডগুলো সুবিধাজনক যদি আপনি একটি স্ট্যান্ডার্ড রং রেফার করতে চান, যেমন "red" বা "paleblue"। কিন্তু এই কীওয়ার্ডগুলো স্পেকট्रमের সব রং বর্ণনা করে না। আপনি যদি নির্দিষ্ট রং ব্যবহার করতে চান, তবে অন্য ধরনের কালার লেবেল ব্যবহার করতে পারেন।

color প্রপার্টি নিচের যেকোনো একটি মান গ্রহণ করে:

ডিফল্টরূপে একটি ওয়েব পেজে ব্যবহৃত টেক্সট রং হলো ওয়েব পেজের <body> ট্যাগে প্রয়োগ করা টেক্সট রং। অন্যथा নির্দিষ্ট না করা সত্ত্বেও, এটি সাধারণত কালো হয়।

আপনি আপনার স্টাইলশীতে লিংক রং নির্ধারণ করতে color প্রপার্টি ব্যবহার করতে পারেন।

চলুন একটি উদাহরণের মাধ্যমে color প্রপার্টি কীভাবে কাজ করে তা বুঝি।

CSS ফন্ট রং পরিবর্তন: একটি উদাহরণ

ধরুন, আমরা পিটারসন অ্যান্ড সন্স নামক একটি স্থানীয় 그로서ি স্টোরের ওয়েবসাইট ডিজাইন করছি। মালিকরা চান ওয়েবসাইটে একটি নির্দিষ্ট ব্লক টেক্সট স্লেটি ফন্টে দেখাবে। আমরা নিচের কোড ব্যবহার করে এটি সেট করতে পারি:

<html>
<p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. Today, Peterson and Sons operates five stores across the Seattle area.</p>
<style>
p {
  color: gray;
}
</style>

আমাদের কোড ফলাফল: উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

আমরা পিটারসন অ্যান্ড সন্স গ্রোসারি স্টোর বর্ণনা করে একটি প্যারাগ্রাফ টেক্সট সংজ্ঞায়িত করতে HTML <p> ট্যাগ ব্যবহার করেছি। তারপর, আমাদের CSS কোডে, আমরা একটি স্টাইল তৈরি করেছি যা সব <p> ট্যাগের টেক্সট রং স্লেটি সেট করে। এটি করার জন্য আমরা একটি কালার নাম মান ("gray") ব্যবহার করেছি।

আমরা "gray"র পরিবর্তে "rgb(128, 128, 128)" নির্দিষ্ট করতে পারতাম যদি আমরা RGB কালার মান রেফার করতে চাইতাম। অথবা, আমরা হেক্সাডেসিম্যাল মান বা HSL মান ব্যবহার করেও টেক্সট রং স্লেটি করতে পারতাম।

আমরা আমাদের স্টাইলসহ একটি CSS ফাইল ব্যবহার করছি না। আমাদের CSS স্টাইলগুলো আমাদের HTML ডকুমেন্টের <style> ট্যাগের ভেতরে রয়েছে।

CSS টেক্সট পটভূমির রং (Text Background Color)

CSS background-color প্রপার্টি একটি এলিমেন্টের পটভূমির রং সেট করে। background-color প্রপার্টি আগে আলোচনা করা সব কালার মান গ্রহণ করে (কালার নাম, HEX, RGB, HSL)। এই প্রপার্টি টেক্সটের পটভূমির রং সেট করতে পারে।

background-color প্রপার্টির সিনট্যাক্স:

p {
  background-color: blue;
}

এই কোড একটি পেজের সব <p> ট্যাগের জন্য নীল পটভূমির রং সেট করে।

CSS টেক্সট পটভূমির রং উদাহরণ

ধরুন, উপরের উদাহরণের প্যারাগ্রাফের একটি বাক্যে নারাঙ্গি পটভূমির রং যোগ করতে চাই।

যে বাক্যটিকে হাইলাইট করতে চাই সেটি: "Today, Peterson and Sons operates five stores across the Seattle area." এবং আগের মতো সব টেক্সট স্লেটি রঙে থাকবে। নিচের কোড ব্যবহার করে এই টেক্সট ডেকোরেশন প্রয়োগ করা যায়:

<html>
<p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. <span>Today, Peterson and Sons operates five stores across the Seattle area.</span></p>
<style>
p {
  color: gray;
}
span {
  background-color: orange;
}
</style>

আমাদের কোড ফলাফল: উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

আমাদের HTML ফাইলে, আমরা <p> ট্যাগের মধ্যে টেক্সট ধরে একটি প্যারাগ্রাফ সংজ্ঞায়িত করেছি। তারপর, আমরা শেষ বাক্যটিকে HTML <span> ট্যাগের মধ্যে ধরে রেখেছি। এটা করার ফলে আমরা আমাদের কোডের শুধু সেই নির্দিষ্ট বাক্যে একটি নির্দিষ্ট স্টাইল প্রয়োগ করতে পেরেছি।

আমাদের CSS কোডে, আমরা দুটি নিয়ম নির্দিষ্ট করেছি। প্রথম নিয়ম <p> ট্যাগের মধ্যে থাকা সব টেক্সটের রং স্লেটি সেট করে। দ্বিতীয় নিয়ম <span> ট্যাগের মধ্যে থাকা সব টেক্সটের পটভূমির রং নারাঙ্গি সেট করে।

উপরে দেখতে পাচ্ছেন, আমাদের কোডের শেষ বাক্য—যেটি <span> ট্যাগের মধ্যে রয়েছে—তার নারাঙ্গি পটভূমির রং রয়েছে। এটি আমাদের লিখা দ্বিতীয় স্টাইল নিয়মের ফলাফল।

উপসংহার

CSS color প্রপার্টি আপনাকে ওয়েব পেজে টেক্সটের রং সেট করতে দেয়। background-color প্রপার্টি আপনাকে ওয়েব পেজে টেক্সটের জন্য পটভূমির রং সেট করতে দেয়।

এই টিউটোরিয়ালে উদাহরণসহ এই কাজগুলো কীভাবে করবেন তা আলোচনা করা হয়েছে। এখন আপনি এক্সপার্ট ওয়েব ডিজাইনারের মতো ফন্ট রং এবং টেক্সট পটভূমির রং পরিবর্তন করতে পারবেন!

HTML সম্পর্কে আরও জানতে আগ্রহী? আমাদের How to Learn HTML গাইড দেখুন। সেখানে এক্সপার্ট লার্নিং টিপস এবং শীর্ষ কোডিং সংস্থান সম্পর্কে গাইডেন্স পাবেন।