HTML, CSS & JavaScript · Chapter 1.8 · Intermediate level

Bonus: HTML + CSS Colour & Card Styling (<style>)

बोनस: HTML + CSS से रंगीन कार्ड और डिज़ाइन (<style>)

If HTML is the skeleton of a house, CSS (Cascading Style Sheets) is the colourful paint, lights, and interior design! Inside an HTML page, you can open a <style> ... </style> tag and write simple styling rules like background, color, padding, and border-radius to turn plain text into a premium modern card!

अगर HTML किसी घर की ईंट और ढाँचा है, तो CSS उस घर का सुंदर पेंट, लाइटिंग और सजावट है! HTML पेज के अंदर <style> ... </style> टैग लगाकर आप background (पीछे का रंग), color (अक्षरों का रंग), और border-radius (गोल कोने) लिख सकते हैं — जिससे साधारण वेबपेज एकदम प्रीमियम दिखने लगता है!

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<style> ... </style>

CSS Design Box — holds colour, font, and layout rules inside HTML.

CSS डिज़ाइन बॉक्स — इसके अंदर वेबपेज को सजाने के नियम लिखे जाते हैं।

.card { ... }

Class Selector — styles any element that has class="card".

क्लास सेलेक्टर — जिस टैग में class="card" लिखा हो उसे सजाता है।

background:

Sets background colour or gradient behind an element.

किसी बॉक्स के पीछे का रंग या ग्रेडिएंट सेट करता है।

color:

Sets the text (font) colour.

अक्षरों (Text) का रंग बदलता है।

border-radius:

Rounds sharp corners (e.g. 16px makes smooth rounded cards).

डिब्बे के नुकीले कोनों को गोल और आधुनिक बनाता है (16px)।

<div class="card">

<div> is a grouping container box given the style name card.

<div> एक कंटेनर बॉक्स है जिस पर card वाला डिज़ाइन लगाया गया है।

Ready example

<style>
  .card {
    background: linear-gradient(135deg, #1e1b4b, #0284c7);
    color: white;
    padding: 20px;
    border-radius: 16px;
  }
  .badge {
    background: #facc15;
    color: #0f172a;
    padding: 4px 10px;
    border-radius: 99px;
  }
</style>

<div class="card">
  <span class="badge">⭐ PRO DESIGNER</span>
  <h2 style="color:#fde047;">Aarav's Neon Card</h2>
  <p style="color:#e0f2fe;">Maine HTML ke saath CSS styling bhi seekh li!</p>
  <button>Follow My Work 🚀</button>
</div>

What you will see: Watch your plain HTML transform into a glowing gradient UI card with a golden badge!

दाईं तरफ़ देखें — साधारण HTML अब सोने जैसे बैज और नीले ग्रेडिएंट वाले प्रीमियम कार्ड में बदल गया!

Line by line

<style> ... </style>

Starts CSS styling rules for our webpage.

वेबपेज को रंगीन बनाने वाले CSS नियम शुरू करता है।

.card { background: ...; border-radius: 16px; }

Gives .card a royal blue gradient, white text, inner spacing (padding), and rounded corners.

.card बॉक्स को नीला ग्रेडिएंट, सफ़ेद टेक्स्ट और गोल कोने (16px) देता है।

<div class="card"> ... </div>

Applies the .card design to this container box.

इस <div> बॉक्स पर ऊपर वाला .card डिज़ाइन लागू करता है।

Common mistake

<div class="card"> ... (with card { } in style)

<style> .card { color: white; } </style>

In CSS <style>, a class selector ALWAYS starts with a dot .card!

<style> के अंदर किसी class को सजाते समय नाम के आगे डॉट (.card) लगाना कभी मत भूलो!

Your task

Keep a <style>...</style> block with border-radius and style a <div class="..."> card with your own heading and text!

<style>...</style> के अंदर अपना रंग और border-radius सेट करें और नीचे <div class="..."> कार्ड में अपना टाइटल लिखकर ▶ Run & Preview दबाएँ!

1. Use <style>...</style> at the top with background and border-radius.
   ऊपर <style>...</style> में background और border-radius रखें।
2. Create a <div class="my-box"> with a heading or paragraph inside.
   <div class="my-box"> के अंदर अपनी हेडिंग और वाक्य लिखें।
3. Click ▶ Run & Preview to see your styled card!
   ▶ Run & Preview दबाकर अपना रंगीन कार्ड देखें!

<style>
  .my-box {
    /* TODO 1: background, color, padding aur border-radius likho */
  }
</style>

<!-- TODO 2: div banao jiski class "my-box" ho, andar ek h2 heading aur ek p paragraph -->

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

• CSS styles the page; write its rules inside <style> ... </style>.
• A rule = selector + { property: value; }, e.g. .my-box { color: white; }.
• class="my-box" on an element connects it to the .my-box rule (with a dot in CSS).

• CSS पेज को सजाती है; उसके नियम <style> ... </style> के अंदर लिखो।
• नियम = selector + { property: value; }, जैसे .my-box { color: white; }।
• Element पर class="my-box" उसे .my-box नियम से जोड़ता है (CSS में आगे बिंदु . लगता है)।

Quick quiz

Which CSS property inside <style> makes box corners smooth and rounded?

<style> के अंदर कौन-सी प्रॉपर्टी बॉक्स के कोनों को गोल (Rounded) बनाती है?

1. padding
2. border-radius
3. color
4. font-size

Practice problems for this chapter

• Fix the Chai Point Card (CSS bugs) · Intermediate · Fix the bug
  Chai Point कार्ड ठीक करो (CSS की गलतियाँ)

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.