Learn to target HTML elements using CSS selectors and apply colors and backgrounds. This chapter helps students understand how to customize text, boxes, and the page background using CSS.

Chapter 2: CSS Selectors, Colors & Backgrounds (CSS সিলেক্টর, কালার ও ব্যাকগ্রাউন্ড)

এই chapter এ আমরা CSS এর বিভিন্ন selectors শেখব, যেমন Element, Class, এবং ID। এছাড়া Colors (Named, Hex, RGB) এবং Background Properties শেখা হবে। Students will learn how to style different elements effectively and make webpages colorful and visually appealing.

1. CSS Selectors (CSS সিলেক্টর)

Selectors দিয়ে আমরা HTML elements কে choose করে style দিতে পারি।

a) Element Selector (এলিমেন্ট সিলেক্টর)

HTML element এর নাম দিয়ে select করা হয়।

<style>
  p {
    color: blue;
    font-size: 16px;
  }
</style>
<p>This is a paragraph using element selector.</p>

Output: Paragraph blue color, font-size 16px।

b) Class Selector (ক্লাস সিলেক্টর)

.classname দিয়ে select করা হয়। Multiple element e apply করা যায়।

<style>
  .highlight {
    color: red;
    font-weight: bold;
  }
</style>
<p class="highlight">This paragraph is highlighted using class selector.</p>
<p class="highlight">Another paragraph with the same class.</p>

Output: দুইটা paragraph red color এবং bold।

c) ID Selector (আইডি সিলেক্টর)

#idname দিয়ে select করা হয়। Only one element e use হয়।

<style>
  #title {
    color: green;
    font-size: 24px;
    text-align: center;
  }
</style>
<h1 id="title">This is a title using ID selector</h1>

Output: Heading green color, center aligned।

d) Group Selector (গ্রুপ সিলেক্টর)

Multiple elements এক সাথে style করতে।

<style>
  h1, h2, p {
    font-family: Arial, sans-serif;
  }
</style>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph text</p>

Output: সব text Arial font।

2. Colors (কালার)

CSS এ color দেওয়ার 3 popular way আছে:

1️⃣ Color Name

p { color: blue; }

2️⃣ HEX Code

p { color: #ff6600; }

3️⃣ RGB

p { color: rgb(255, 0, 0); }

Tip: Experiment করে দেখো কোন color webpage e সুন্দর লাগে। 😄

3. Backgrounds (ব্যাকগ্রাউন্ড)

a) Background Color

body {
  background-color: lightyellow;
}

b) Background Image

body {
  background-image: url('https://www.example.com/bg.jpg');
  background-size: cover;
}

c) Gradient Background (মজাদার Background)

body {
  background: linear-gradient(to right, red, yellow);
}

4. Mini Project: Colorful Card (ছোট প্রজেক্ট)

Goal: Personal profile card বানানো

<style>
  .card {
    width: 300px;
    padding: 20px;
    background-color: lightblue;
    border: 2px solid blue;
    border-radius: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
  }
  .card h2 {
    color: darkblue;
  }
  .card p {
    color: navy;
  }
</style>

<div class="card">
  <h2>Shahnawaz Hossain</h2>
  <p>Class 7 Student</p>
  <p>My favorite color is Blue!</p>
</div>

Output:

• Light blue card with rounded borders
• Heading dark blue, paragraph navy
• Center aligned text

Student ra ei mini project diye Selectors + Colors + Backgrounds ek sathe practice korte parbe।

5. Mini Practice (ছোট চ্যালেঞ্জ)

1. H1 color purple করো
2. Paragraph background lightgreen করো
3. ID selector দিয়ে subtitle text orange করো
4. Class selector দিয়ে 2 paragraph bold & red করো

By the end of Chapter 2, students will be able to select HTML elements using different selectors and apply colors and background styles. They will be ready to move on to text styling, fonts, and text effects in the next chapter.