Learn how to style text using CSS, change fonts, apply text effects, and enhance readability. This chapter is perfect for students who want to make their web content attractive and clear.

Chapter 3: CSS Text Styling, Fonts & Text Effects (টেক্সট স্টাইলিং, ফন্ট ও এফেক্ট)

এই chapter এ আমরা শিখব CSS দিয়ে text styling কিভাবে করতে হয়, font family, font size, font style ও weight ব্যবহার করা, এবং text effects যেমন text-decoration ও text-shadow। Students will learn how to make text visually appealing and readable on webpages.

1. Text Styling (টেক্সট স্টাইলিং)

a) Font Family (ফন্ট নির্বাচন)

<style>
  p {
    font-family: Arial, sans-serif;
  }
</style>
<p>This paragraph uses Arial font.</p>

Tip: Student ra Times New Roman, Verdana, Courier New o try করতে পারে।

b) Font Size (ফন্ট সাইজ)

<style>
  h1 {
    font-size: 36px;
  }
  p {
    font-size: 18px;
  }
</style>
<h1>Big Heading</h1>
<p>Normal paragraph</p>

Units: px (pixels), em, rem, %

Example: font-size: 2em; (relative size)

c) Font Style & Weight (ফন্ট স্টাইল ও ওজন)

<style>
  p.italic {
    font-style: italic;
  }
  p.bold {
    font-weight: bold;
  }
</style>
<p class="italic">This is italic text.</p>
<p class="bold">This is bold text.</p>

d) Text Color & Alignment (টেক্সট কালার ও alignment)

<style>
  h2 {
    color: darkblue;
    text-align: center;
  }
  p {
    color: green;
    text-align: left;
  }
</style>
<h2>Centered Heading</h2>
<p>Left aligned paragraph</p>

2. Text Decoration & Effects (টেক্সট এফেক্ট)

a) Text Decoration (টেক্সট লাইন)

<style>
  p.underline {
    text-decoration: underline;
  }
  p.line-through {
    text-decoration: line-through;
  }
</style>
<p class="underline">This text is underlined.</p>
<p class="line-through">This text has a line through it.</p>

b) Text Shadow (টেক্সট শ্যাডো)

<style>
  h1 {
    text-shadow: 2px 2px 5px grey;
  }
</style>
<h1>Shadow Heading</h1>

3. Mini Project: Stylish Quote Card (স্টাইলিশ কোট কার্ড)

Goal: Text styling, font, color, shadow ব্যবহার করে একটি সুন্দর card বানানো

<style>
  .quote-card {
    width: 350px;
    padding: 20px;
    background-color: #fdf6e3;
    border: 2px solid #f0e68c;
    border-radius: 15px;
    text-align: center;
    font-family: 'Verdana', sans-serif;
    box-shadow: 3px 3px 10px grey;
  }
  .quote-card h2 {
    color: #d2691e;
    text-shadow: 1px 1px 3px #aaa;
  }
  .quote-card p {
    color: #555;
    font-style: italic;
  }
</style>

<div class="quote-card">
  <h2>“Learning CSS is Fun!”</h2>
  <p>- Nurpur Excellence Academy</p>
</div>

Output:

• Rounded card with light background
• Heading colored with shadow
• Paragraph italic and subtle color

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

1. H1 color purple, font-size 40px করো
2. Paragraph text italic & red করো
3. Subtitle centered & bold করো
4. Text shadow ব্যবহার করে “Welcome” heading design করো

✅

• Student ra সহজে text styling + font + text effects practice করতে পারবে।

By the end of Chapter 3, students will be able to style headings, paragraphs, and other text elements using fonts and text effects. They will be prepared to move on to borders, boxes, padding, and layout basics in the next chapter.