CSS (Cascading Style Sheets)
CSS হলো একটি স্টাইলিং ভাষা যা HTML এবং XML ডকুমেন্টের প্রেজেন্টেশন (কিভাবে এটি ব্যবহারকারীর কাছে দেখাবে) নিয়ন্ত্রণ করে। এটি ওয়েব ডেভেলপমেন্টের একটি অপরিহার্য অংশ এবং ওয়েবসাইটের লেআউট, ডিজাইন এবং ইন্টারফেস তৈরি করতে ব্যবহৃত হয়।
CSS এর প্রধান বৈশিষ্ট্য
-
স্টাইলিং লেআউট ও ডিজাইন:
- HTML ডকুমেন্টের বিভিন্ন এলিমেন্টের (যেমন প্যারাগ্রাফ, শিরোনাম, টেবিল, বাটন) জন্য রঙ, ফন্ট, বর্ডার, মার্জিন, প্যাডিং ইত্যাদি কাস্টমাইজ করা যায়।
-
Cascading Rules:
- CSS এর একটি বিশেষ বৈশিষ্ট্য হলো এর “ক্যাসকেডিং” নীতি। অর্থাৎ, যদি একাধিক স্টাইল থাকে, তবে অগ্রাধিকার দেওয়া হবে ইনলাইন, ইন্টার্নাল, এবং এক্সটার্নাল স্টাইল শীটের ক্রম অনুযায়ী।
-
প্রেজেন্টেশন ও কন্টেন্ট আলাদা করে:
- HTML দিয়ে কন্টেন্ট তৈরি হয়, আর CSS দিয়ে সেই কন্টেন্টের স্টাইল তৈরি হয়। এটি ওয়েবসাইটকে আরও সঠিক এবং পরিষ্কারভাবে ডিজাইন করতে সাহায্য করে।
CSS এর ধরন
CSS সাধারণত তিন ধরণের হয়:
-
Inline CSS:
- HTML এলিমেন্টের মধ্যে সরাসরি স্টাইল অ্যাট্রিবিউট ব্যবহার করে।
উদাহরণ:<p style="color: red;">This is a red text.</p>
- HTML এলিমেন্টের মধ্যে সরাসরি স্টাইল অ্যাট্রিবিউট ব্যবহার করে।
-
Internal CSS:
- HTML ডকুমেন্টের
<style>
ট্যাগের ভেতরে লিখিত।
উদাহরণ:<style> p { color: blue; } </style>
- HTML ডকুমেন্টের
-
External CSS:
- একটি আলাদা
.css
ফাইল তৈরি করে এবং HTML ডকুমেন্টে লিঙ্ক করা হয়।
উদাহরণ:<link rel="stylesheet" href="styles.css">
- একটি আলাদা
CSS এর উপাদান
CSS তিনটি প্রধান উপাদানে কাজ করে:
-
Selectors: কোন HTML এলিমেন্টকে টার্গেট করবে।
উদাহরণ:p
,.class-name
,#id-name
-
Properties: কিসের স্টাইল পরিবর্তন হবে (যেমন, রঙ, ফন্ট সাইজ)।
উদাহরণ:color
,font-size
,margin
-
Values: সেই প্রোপার্টির মান নির্ধারণ করে।
উদাহরণ:red
,16px
,10px
উদাহরণ:
p { color: green; font-size: 18px; }
CSS এর কিছু গুরুত্বপূর্ণ প্রোপার্টি
-
রঙ ও ফন্ট স্টাইল:
color
: টেক্সটের রঙ নির্ধারণ করে।background-color
: ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করে।font-family
: ফন্ট স্টাইল নির্ধারণ করে।font-size
: ফন্ট সাইজ নির্ধারণ করে।
-
লেআউট ও পজিশনিং:
margin
: বাহিরের ফাঁকা জায়গা।padding
: ভিতরের ফাঁকা জায়গা।border
: বর্ডার নির্ধারণ করে।display
: কিভাবে এলিমেন্ট দেখাবে তা নিয়ন্ত্রণ করে।
-
মিডিয়া কোয়ারি (Media Query):
- ডিভাইস অনুযায়ী স্টাইল নির্ধারণ করতে সাহায্য করে।
উদাহরণ:@media (max-width: 600px) { body { background-color: lightblue; } }
- ডিভাইস অনুযায়ী স্টাইল নির্ধারণ করতে সাহায্য করে।
CSS কেন শিখবেন?
- ওয়েবসাইটকে আকর্ষণীয় ও ব্যবহারযোগ্য করার জন্য।
- ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য।
- রেসপন্সিভ ডিজাইন তৈরি করার জন্য।
- সৃজনশীল ও পেশাদার ওয়েবসাইট তৈরি করতে।
CSS Selector
CSS Selector হলো একটি টুল যা HTML ডকুমেন্টের নির্দিষ্ট একটি বা একাধিক এলিমেন্ট টার্গেট করে এবং তাদের স্টাইল নির্ধারণ করতে সাহায্য করে। Selector ব্যবহার করে আপনি বলতে পারেন, “এই HTML এলিমেন্টটি কেমন দেখতে হবে।”
CSS Selector কেন গুরুত্বপূর্ণ?
যখন আপনার ওয়েবপেজে অনেক HTML এলিমেন্ট থাকে, তখন সঠিক এলিমেন্ট চিহ্নিত করতে Selector খুবই গুরুত্বপূর্ণ। এটি আপনাকে নির্দিষ্ট এলিমেন্টের জন্য আলাদা স্টাইল অ্যাপ্লাই করতে সাহায্য করে।
CSS Selector এর প্রকারভেদ
CSS Selector বিভিন্ন ধরনের হতে পারে, প্রতিটি Selector একটি ভিন্ন প্রয়োজন পূরণ করে। নিচে সহজভাবে প্রতিটি Selector ব্যাখ্যা করা হলো:
1. Element Selector
- এটি সরাসরি HTML ট্যাগ নির্ধারণ করে এবং সেই ট্যাগের জন্য স্টাইল সেট করে।
- এটি সবচেয়ে সাধারণ এবং সহজ Selector।
h1 {
color: blue;
}
p {
font-size: 16px;
}
- উপরের উদাহরণে, সমস্ত
<h1>
ট্যাগের টেক্সট নীল হবে। - সমস্ত
<p>
ট্যাগের ফন্ট সাইজ হবে ১৬ পিক্সেল।
2. Class Selector
- একটি বা একাধিক এলিমেন্টে একই ক্লাস ব্যবহার করে স্টাইল প্রয়োগ করা যায়।
- ক্লাসের আগে
.
(ডট) ব্যবহার করা হয়।
CSS
.title {
color: green;
text-align: center;
}
HTML:
<h1 class="title">Welcome</h1>
<p class="title">This is a paragraph.</p>
ব্যাখ্যা:
- যেসব এলিমেন্টে
class="title"
দেওয়া আছে, সেগুলোর টেক্সট সবুজ এবং সেন্টার হবে।
3. ID Selector
- একটি ইউনিক আইডি ব্যবহার করে নির্দিষ্ট এলিমেন্ট টার্গেট করা হয়।
- আইডির আগে
#
(হ্যাশ) ব্যবহার করা হয়।
CSS
#header {
background-color: lightblue;
padding: 10px;
}
HTML:
<div id="header">This is the header.</div>
id="header"
দেওয়া ডিভ এর ব্যাকগ্রাউন্ড হবে হালকা নীল এবং প্যাডিং হবে ১০ পিক্সেল।
4. Attribute Selector
- নির্দিষ্ট অ্যাট্রিবিউট থাকা এলিমেন্ট টার্গেট করতে ব্যবহৃত হয়।
CSS
input[type="text"] {
border: 2px solid red;
}
HTML:
<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your password">
- যেসব
<input>
ট্যাগেরtype="text"
আছে, তাদের বর্ডার হবে লাল রঙের।
5. Group Selector
- একসঙ্গে একাধিক এলিমেন্ট টার্গেট করতে ব্যবহৃত হয়।
- একাধিক সিলেক্টর কমা (
,
) দিয়ে আলাদা করা হয়।
CSS
h1, p {
color: purple;
}
- সমস্ত
<h1>
এবং<p>
ট্যাগের টেক্সটের রঙ হবে বেগুনি।
6. Universal Selector
- এটি সমস্ত HTML এলিমেন্টকে টার্গেট করে।
- একটি
*
ব্যবহার করা হয়।
CSS
* {
margin: 0;
padding: 0;
}
- সমস্ত এলিমেন্টের মার্জিন এবং প্যাডিং শূন্য করা হবে।
7. Descendant Selector
- একটি নির্দিষ্ট এলিমেন্টের ভেতরে থাকা অন্য এলিমেন্ট টার্গেট করতে ব্যবহৃত হয়।
CSS
div p {
color: brown;
}
HTML:
<div>
<p>This is inside a div.</p>
</div>
<p>This is outside a div.</p>
- কেবলমাত্র ডিভের ভেতরের
<p>
ট্যাগের টেক্সটের রঙ হবে বাদামী।
8. Child Selector
- কেবলমাত্র সরাসরি চাইল্ড এলিমেন্ট টার্গেট করতে ব্যবহৃত হয়।
>
ব্যবহার করা হয়।
CSS
div > p {
font-size: 18px;
}
HTML
<div>
<p>This is a direct child paragraph.</p>
<div>
<p>This is not a direct child.</p>
</div>
</div>
- শুধুমাত্র ডিভের সরাসরি চাইল্ড প্যারাগ্রাফের ফন্ট সাইজ হবে ১৮ পিক্সেল।
9. Pseudo-Class Selector
- এলিমেন্টের বিশেষ অবস্থায় স্টাইল প্রয়োগ করতে ব্যবহৃত হয়।
CSS:
a:hover {
color: red;
}
HTML:
<a href="#">Hover over this link</a>
- যখন লিংকের উপর মাউস নিয়ে যাওয়া হবে, তখন লিংকের রঙ লাল হবে।
10. Pseudo-Element Selector
- HTML এলিমেন্টের নির্দিষ্ট অংশে স্টাইল প্রয়োগ করতে ব্যবহৃত হয়।
CSS:
p::first-letter {
font-size: 24px;
color: blue;
}
HTML:
<p>This is an example.</p>
- প্যারাগ্রাফের প্রথম অক্ষর বড় এবং নীল রঙের হবে।
CSS Selector হলো ওয়েব ডিজাইন করার একটি শক্তিশালী টুল। এটি দিয়ে নির্দিষ্ট এলিমেন্ট টার্গেট করে ওয়েবপেজকে আরও আকর্ষণীয় করে তোলা যায়। বিগিনারদের জন্য বিভিন্ন Selector শেখা গুরুত্বপূর্ণ, কারণ এটি CSS এর বেসিক স্ট্রাকচার বোঝার ভিত্তি তৈরি করে।
px, em, rem: CSS-এ ইউনিটের বিস্তারিত আলোচনা
CSS-এ ফন্ট সাইজ বা অন্যান্য মাপ নির্ধারণ করতে বিভিন্ন ইউনিট ব্যবহৃত হয়। এর মধ্যে px (Pixel), em, এবং rem (Root em) হলো সবচেয়ে সাধারণ এবং গুরুত্বপূর্ণ। চলুন প্রতিটি ইউনিট বিস্তারিতভাবে বুঝে নিই।
1. px (Pixel)
px হলো CSS-এর একটি স্থির মাপের ইউনিট। এটি একটি নির্দিষ্ট এবং নির্ভুল মাপ দেয়, যা আপনার স্ক্রিনে সরাসরি রেন্ডার হয়।
প্রধান বৈশিষ্ট্য:
- px একেবারে নির্দিষ্ট, অর্থাৎ এটি পরিবর্তিত হয় না।
- এটি ভিউপোর্টের (স্ক্রিন সাইজ) উপর নির্ভর করে না।
- রেসপন্সিভ ডিজাইনে কম ব্যবহার করা হয়, কারণ এটি স্কেল হয় না।
কখন px ব্যবহার করবেন?
- লোগো, আইকন, বা বর্ডার-এর মতো ফিক্সড সাইজের জন্য।
- যেখানে ফন্ট সাইজ বা অন্যান্য এলিমেন্টের মাপ স্থির রাখতে হবে।
উদাহরণ:
p {
font-size: 16px;
margin: 10px;
}
ব্যাখ্যা:
- এখানে
<p>
ট্যাগের ফন্ট সাইজ ১৬ পিক্সেল এবং মার্জিন ১০ পিক্সেল নির্ধারণ করা হয়েছে। এটি স্ক্রিন সাইজ যাই হোক না কেন, স্থির থাকবে।
2. em
em হলো CSS-এর একটি আপেক্ষিক (relative) ইউনিট। এটি প্যারেন্ট এলিমেন্টের ফন্ট সাইজের উপর নির্ভর করে।
প্রধান বৈশিষ্ট্য:
- em প্যারেন্ট এলিমেন্টের ফন্ট সাইজকে বেস ধরে কাজ করে।
- এটি নেস্টেড এলিমেন্টের ক্ষেত্রে মাপকে চেইন রিয়েকশন আকারে বাড়িয়ে তুলতে পারে।
কখন em ব্যবহার করবেন?
- যেখানে আপেক্ষিক মাপ প্রয়োজন, যেমন প্যাডিং, মার্জিন, বা ফন্ট সাইজ নির্ধারণ।
- মাপ প্যারেন্ট এলিমেন্টের সাথে আপেক্ষিকভাবে পরিবর্তিত হওয়া উচিত।
em-এর উদাহরণ:
body {
font-size: 16px;
}
h1 {
font-size: 2em; /* 2 × 16px = 32px */
}
p {
font-size: 1.5em; /* 1.5 × 16px = 24px */
}
ব্যাখ্যা:
h1
ট্যাগের ফন্ট সাইজ ১৬px এর দ্বিগুণ, অর্থাৎ ৩২px হবে।p
ট্যাগের ফন্ট সাইজ ১৬px এর ১.৫ গুণ, অর্থাৎ ২৪px হবে।
Nested em-এর সমস্যা:
body {
font-size: 16px;
}
div {
font-size: 2em; /* 2 × 16px = 32px */
}
p {
font-size: 1.5em; /* 1.5 × 32px = 48px */
}
ব্যাখ্যা:
- এখানে
div
এর প্যারেন্টbody
। তাইdiv
-এর ফন্ট সাইজ ৩২px। p
ট্যাগdiv
-এর চাইল্ড। তাই এর ফন্ট সাইজ হবে1.5 × 32px = 48px
।- এই চেইন রিয়েকশন অনেক সময় জটিল হয়ে যায়।
3. rem (Root em)
rem হলো CSS-এর একটি আপেক্ষিক (relative) ইউনিট যা সর্বদা রুট এলিমেন্টের (HTML) ফন্ট সাইজকে বেস ধরে কাজ করে।
প্রধান বৈশিষ্ট্য:
- এটি সর্বদা
html
ট্যাগের ফন্ট সাইজকে রেফার করে। - Nested এলিমেন্টের ক্ষেত্রে মাপের কোনো চেইন রিয়েকশন হয় না।
- এটি রেসপন্সিভ ডিজাইনের জন্য বেশি সুবিধাজনক এবং স্থিতিশীল।
কখন rem ব্যবহার করবেন?
- যেখানে কনসিস্টেন্ট এবং রেসপন্সিভ ডিজাইন প্রয়োজন।
- গ্লোবাল স্টাইল সেট করতে।
rem-এর উদাহরণ:
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 2 × 16px = 32px */
}
p {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
}
ব্যাখ্যা:
h1
ট্যাগের ফন্ট সাইজ ১৬px এর দ্বিগুণ, অর্থাৎ ৩২px হবে।p
ট্যাগের ফন্ট সাইজ ১৬px এর ১.৫ গুণ, অর্থাৎ ২৪px হবে।
rem-এর সুবিধা:
Nested এলিমেন্টের ক্ষেত্রে চেইন রিয়েকশন হয় না।
html {
font-size: 16px;
}
div {
font-size: 2rem; /* 2 × 16px = 32px */
}
p {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
}
ব্যাখ্যা:
div
এবংp
উভয়ের ক্ষেত্রেই রুট (html) ফন্ট সাইজ বেস হিসেবে কাজ করছে।
- px: যেখানে নির্দিষ্ট এবং নির্ভুল মাপ দরকার।
- em: যেখানে মাপ প্যারেন্ট এলিমেন্টের সাথে আপেক্ষিকভাবে পরিবর্তিত হবে।
- rem: রেসপন্সিভ ডিজাইন এবং কনসিস্টেন্ট মাপ নির্ধারণের জন্য সবচেয়ে ভালো।
প্রকল্পের ধরন এবং ডিজাইনের চাহিদা অনুযায়ী px, em, এবং rem বেছে নিন। রেসপন্সিভ এবং মডার্ন ডিজাইনে rem বেশি ব্যবহৃত হয়।
Box Model নিয়ে একটু আলোচনা
CSS Box Model হলো HTML-এর প্রতিটি এলিমেন্ট কেমন জায়গা নেবে তা বোঝার জন্য একটি কনসেপ্ট। এটি এলিমেন্টের Content, Padding, Border, এবং Margin নিয়ে গঠিত।
তোমার সহজে বোঝার জন্য একটি বাক্স কল্পনা করো। সেই বাক্সের ভেতরে যা আছে, তার চারপাশের স্পেস এবং বাইরের স্পেস কেমন হবে, তা Box Model ব্যাখ্যা করে।
Box Model-এর স্তরগুলো (Layers)
1. Content (মূল বিষয়বস্তু)
এটি সেই জায়গা যেখানে এলিমেন্টের লেখাগুলি (text), ছবি, বা অন্যান্য কনটেন্ট থাকে।
- উদাহরণ: একটি প্যারাগ্রাফের লেখাগুলি।
- ডিরেক্টলি কনটেন্টের সাইজ পরিবর্তন করতে
width
এবংheight
ব্যবহার করা হয়।
div {
width: 200px;
height: 100px;
}
2. Padding (কনটেন্ট এবং বর্ডারের মধ্যবর্তী স্থান)
Padding হলো কনটেন্ট এবং বর্ডারের মধ্যে স্পেস।
- এটি কনটেন্টের চারপাশে সাদা বা ফাঁকা জায়গা তৈরি করে।
- উদাহরণ: তোমার লেখা যাতে বর্ডারের সাথে লেগে না থাকে, তার জন্য padding যোগ করো।
div {
padding: 20px;
}
এফেক্ট: কনটেন্টের চারপাশে ২০px ফাঁকা জায়গা তৈরি হবে।
3. Border (কনটেন্টের চারপাশে দৃশ্যমান লাইন)
Border হলো কনটেন্ট এবং প্যাডিং-এর চারপাশে থাকা লাইন।
- উদাহরণ: একটি বাক্সকে হাইলাইট করতে বর্ডার ব্যবহার করো।
- তুমি বর্ডারের রঙ, স্টাইল, এবং পুরুত্ব নির্ধারণ করতে পারো।
div {
border: 2px solid black;
}
এফেক্ট: বাক্সের চারপাশে ২px পুরু কালো বর্ডার তৈরি হবে।
4. Margin (বর্ডারের বাইরের স্পেস)
Margin হলো এলিমেন্টের বাইরে থাকা ফাঁকা জায়গা। এটি অন্য এলিমেন্ট থেকে দূরত্ব বজায় রাখে।
- উদাহরণ: একটি বাক্স আরেকটি বাক্সের কাছাকাছি না এনে আলাদা রাখতে।
div {
margin: 10px;
}
এফেক্ট: বাক্সের চারপাশে ১০px ফাঁকা জায়গা তৈরি হবে।
Box Model-এর কাজের প্রক্রিয়া (Visualization)
প্রতিটি এলিমেন্টের চারটি স্তর আছে:
- Content → ভেতরের অংশ।
- Padding → Content আর Border এর মধ্যে।
- Border → Content ও Padding এর চারপাশে লাইন।
- Margin → বাইরের অংশ যা অন্য এলিমেন্ট থেকে দূরত্ব তৈরি করে।
উদাহরণ:
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid blue;
margin: 10px;
}
এই Box Model-কে ভেঙে দেখি:
- Content: 200px × 100px
- Padding: 20px × 4 দিক = মোট 40px যোগ হবে
- Border: 5px × 4 দিক = মোট 10px যোগ হবে
- Margin: বাইরের স্পেস 10px × 4 দিক
টোটাল সাইজ:
Content + Padding + Border = (200 + 40 + 10)px × (100 + 40 + 10)px
= 250px × 150px
Box Model সহজে মনে রাখার টিপস:
- Content: লেখার অংশ।
- Padding: কনটেন্টের শ্বাস নেওয়ার জায়গা।
- Border: কনটেন্টের সুরক্ষা বলয়।
- Margin: বাইরের দুনিয়া থেকে দূরত্ব।
CSS ID কি? কেনো প্রয়োজন? বিস্তারিত আলোচনা।
CSS-এ ID হলো একটি ইউনিক (অনন্য) নাম যা একটি নির্দিষ্ট HTML এলিমেন্টকে চিহ্নিত করে।
যেকোনো পেজে প্রতিটি ID শুধুমাত্র একবার ব্যবহার করা যায়। এটি মূলত একটি এলিমেন্টকে টার্গেট করতে ব্যবহৃত হয়।
কেন ID ব্যবহার করো?
- নির্দিষ্ট একটি এলিমেন্টকে আলাদা স্টাইল দিতে।
- JavaScript দিয়ে কোনো নির্দিষ্ট এলিমেন্টকে ধরতে।
- এমন ডিজাইনে যেখানে একাধিক এলিমেন্টকে একসাথে টার্গেট করতে হবে না।
কীভাবে ID ডিক্লেয়ার করা হয়?
HTML-এ ID নির্ধারণ করা:
HTML-এ ID সেট করতে id
অ্যাট্রিবিউট ব্যবহার করা হয়।
<div id="header">This is the header</div>
CSS-এ ID ব্যবহার করা:
CSS-এ ID সিলেক্টরের আগে #
চিহ্ন ব্যবহার করা হয়।
#header {
color: white;
background-color: blue;
text-align: center;
}
উদাহরণ:
HTML:
<div id="welcome-message">Welcome to our website!</div>
CSS:
#welcome-message {
font-size: 20px;
color: green;
}
ID এর বৈশিষ্ট্য
-
ইউনিক (Unique):
একটি পেজে একবার ব্যবহার করা যাবে।
ভুল:
<div id="main"></div> <p id="main"></p>
ঠিক:
<div id="main"></div>
-
স্পেসিফিসিটি (Specificity):
ID-এর গুরুত্ব বেশি।
অর্থাৎ, যদি একটি এলিমেন্টে class এবং ID দুটো থাকে, তবে ID প্রাধান্য পাবে।#header { color: red; } .header { color: blue; }
রেজাল্ট: টেক্সটের রং হবে লাল, কারণ ID বেশি গুরুত্বপূর্ণ।
-
Case-Sensitive (ক্ষেত্র-সংবেদনশীল):
ID-এর নাম বড় হাতের অক্ষর আর ছোট হাতের অক্ষরের মধ্যে পার্থক্য বোঝে।
উদাহরণ:<div id="MyID">Hello</div>
CSS-এ:
#myid { /* কাজ করবে না */ } #MyID { /* কাজ করবে */ }
ID হলো ইউনিক এলিমেন্ট চিহ্নিত করার জন্য সবচেয়ে নির্ভুল ও শক্তিশালী সিলেক্টর। তবে বেশি ব্যবহার না করে ক্লাসের উপর নির্ভর করাই ভালো।
CSS Class কি? কেনো প্রয়োজন? বিস্তারিত আলোচনা।
Class কী?
CSS-এ Class হলো একটি বৈশিষ্ট্য যা HTML-এর একাধিক এলিমেন্টকে একই ধরণের স্টাইল দিতে ব্যবহৃত হয়।
Class আইডির মতো ইউনিক হতে হয় না, এবং এটি একাধিক জায়গায় ব্যবহার করা যায়।
কেন Class ব্যবহার করো?
- যখন একাধিক এলিমেন্টে একই স্টাইল প্রয়োগ করতে হয়।
- নির্দিষ্ট কিছু এলিমেন্ট গ্রুপ করার জন্য।
- কম ফ্লেক্সিবল ID এর চেয়ে ক্লাস বেশি ব্যবহার উপযোগী।
কীভাবে Class ডিক্লেয়ার করা হয়?
HTML-এ Class সেট করা:
HTML-এ Class অ্যাট্রিবিউট ব্যবহার করা হয়।
<div class="card">This is a card</div>
CSS-এ Class ব্যবহার করা:
CSS-এ Class সিলেক্টরের আগে .
চিহ্ন ব্যবহার করা হয়।
.card {
color: white;
background-color: blue;
text-align: center;
}
উদাহরণ:
HTML:
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
CSS:
.box {
border: 1px solid black;
padding: 10px;
margin: 5px;
}
ফলাফল:
তিনটি বাক্সই একই স্টাইল পাবে।
Class-এর বৈশিষ্ট্য
-
পুনরায় ব্যবহারযোগ্য (Reusable):
তুমি একই ক্লাস অনেক জায়গায় ব্যবহার করতে পারো।উদাহরণ:
<div class="highlight">This is highlighted text</div> <p class="highlight">Another highlighted text</p>
-
মাল্টিপল ক্লাস:
একটি HTML এলিমেন্টে একাধিক ক্লাস যোগ করা যায়।উদাহরণ:
<div class="card shadow">This is a styled card</div>
CSS:
.card { background-color: lightblue; } .shadow { box-shadow: 2px 2px 5px gray; }
-
Case-Sensitive (ক্ষেত্র-সংবেদনশীল):
ক্লাসের নাম বড় হাতের অক্ষর এবং ছোট হাতের অক্ষরের মধ্যে পার্থক্য বোঝে।
উদাহরণ:<div class="myClass">Hello</div>
CSS:
.myclass { /* কাজ করবে না */ } .myClass { /* কাজ করবে */ }
Class-এর ব্যবহার কোথায় করো?
-
একই ধরণের এলিমেন্টের জন্য:
উদাহরণ: বোতামগুলোর জন্য একই ডিজাইন।<button class="btn">Submit</button> <button class="btn">Cancel</button>
CSS:
.btn { padding: 10px 20px; background-color: blue; color: white; border: none; border-radius: 5px; }
-
একাধিক ক্লাস:
উদাহরণ: এলিমেন্টে একাধিক স্টাইল যোগ করা।<div class="box red-box">Red Box</div> <div class="box blue-box">Blue Box</div>
CSS:
.box { padding: 20px; margin: 10px; } .red-box { background-color: red; } .blue-box { background-color: blue; }
-
স্পেসিফিক স্টাইলের জন্য:
উদাহরণ: নির্দিষ্ট এলিমেন্টকে আলাদা করার জন্য।<div class="featured">Featured Item</div>
CSS:
.featured { border: 2px solid gold; font-weight: bold; }
সতর্কতা:
- ক্লাসের নাম অর্থপূর্ণ রাখো (যেমন
.btn
,.header
,.footer
)। - ক্লাসের নাম ছোট এবং পরিষ্কার হওয়া উচিত।
- এক পেজে প্রয়োজন অনুযায়ী ক্লাস ব্যবহার করো, ID-র মতো রিস্ট্রিকশন নেই।
Class হলো পুনরায় ব্যবহারযোগ্য স্টাইলিং সিলেক্টর। এটি একাধিক এলিমেন্টে একই স্টাইল প্রয়োগ করতে ব্যবহার করা হয়, যা ওয়েবসাইট ডিজাইনকে আরও সহজ এবং ফ্লেক্সিবল করে তোলে।
CSS Specificity (স্পেসিফিসিটি) (গুরুত্বপুর্ণ বিষয়য়
Specificity কী?
Specificity হলো CSS-এর একটি নিয়ম, যা নির্ধারণ করে যে যখন একটি HTML এলিমেন্টের জন্য একাধিক CSS নিয়ম প্রযোজ্য হয়, তখন কোনটি প্রাধান্য পাবে।
এক কথায়, Specificity বলে দেয় যে একটি স্টাইলের গুরুত্ব কত বেশি।
কীভাবে Specificity কাজ করে?
CSS Specificity গণনা করা হয় এলিমেন্টের সিলেক্টর অনুযায়ী। এটি তিনটি প্রধান বিষয় বিবেচনা করে:
- Inline Styles (HTML-এর মধ্যে style অ্যাট্রিবিউট)
- IDs (HTML-এর id অ্যাট্রিবিউট)
- Classes, Attributes এবং Pseudo-classes
- Element এবং Pseudo-elements
Specificity স্কোর গণনা করার নিয়ম
Specificity স্কোরের প্রতিটি অংশ এইভাবে গঠিত:
-
Inline Styles (স্টাইল অ্যাট্রিবিউট): 1000 পয়েন্ট
<div style="color: red;"></div>
-
ID সিলেক্টর: 100 পয়েন্ট
#header { color: blue; }
-
Class, Attribute এবং Pseudo-class সিলেক্টর: 10 পয়েন্ট
.box { color: green; }
-
Element এবং Pseudo-element সিলেক্টর: 1 পয়েন্ট
h1 { font-size: 24px; }
উদাহরণ:
CSS সিলেক্টর | Specificity স্কোর | প্রাধান্য |
---|---|---|
h1 |
1 | কম |
.title |
10 | বেশি |
#main |
100 | আরও বেশি |
style="color: red;" |
1000 | সর্বোচ্চ |
উদাহরণ দিয়ে বুঝি:
HTML কোড:
<h1 id="main-title" class="highlight">Hello, World!</h1>
CSS কোড:
h1 {
color: blue; /* স্কোর: 1 */
}
.highlight {
color: green; /* স্কোর: 10 */
}
#main-title {
color: red; /* স্কোর: 100 */
}
h1.highlight {
color: purple; /* স্কোর: 11 (1 + 10) */
}
ফলাফল:
- এলিমেন্টের রং হবে লাল, কারণ
#main-title
এর Specificity স্কোর সর্বোচ্চ (100)।
Specificity-এর সাধারণ নিয়ম:
-
Inline Styles সবসময় প্রাধান্য পায়।
<p style="color: red;">This is red text.</p>
-
ID সিলেক্টর ক্লাস এবং এলিমেন্টের চেয়ে বেশি শক্তিশালী।
-
একাধিক সিলেক্টরের স্কোর যোগ হয়।
উদাহরণ:body .box #content { /* স্কোর: 1 (body) + 10 (.box) + 100 (#content) = 111 */ }
-
Important (CSS
!important
) সবচেয়ে বেশি প্রাধান্য পায়।
উদাহরণ:h1 { color: blue !important; }
Specificity-এর ব্যবহার কোথায়?
-
কনফ্লিক্ট এড়ানোর জন্য:
যদি একাধিক CSS রুলস প্রয়োগ হয়, তবে Specificity নিশ্চিত করে কোনটি কার্যকর হবে। -
কোড ম্যানেজমেন্ট:
Specificity বোঝার মাধ্যমে স্টাইল ওভাররাইটিং (overriding) থেকে মুক্তি পাওয়া যায়। -
ডিবাগিং সহজ করে:
Specificity জানলে CSS ইস্যু সহজে সমাধান করা যায়।
Specificity CSS নিয়মগুলোকে প্রাধান্য দিতে সাহায্য করে। এটি স্কোর ভিত্তিতে কাজ করে এবং inline স্টাইল থেকে শুরু করে ID, Class, এবং Element সিলেক্টর পর্যন্ত প্রাধান্য নির্ধারণ করে। Specificity বোঝা ও প্রয়োগ করা CSS ব্যবহারে দক্ষতা বাড়ায়।
- css (Cascading Style Sheets)
- webdesign
- #ResponsiveDesign
- frontenddevelopment
- #WebsiteOptimization
- #MobileFriendly
- #WebAccessibility
- #PageSpeed
- #SEOoptimization
- #UserExperience
- #CSSGrid
- #Flexbox
- webdevelopment
- #PerformanceOptimization
- #DesignSystem
- #UIUXDesign
- #ModernWebDesign
- #SpeedOptimization
Next আসিতেছে *Flexbox and Grid