Colors, Units & Typography

রঙ, ইউনিট ও টাইপোগ্রাফি

Read: ~22 min Beginner 5 practice problems Live preview runner

1. Two Ingredients of Every Good-Looking Page

Now that you understand the box model, it's time to fill those boxes with color and text that actually read well. Almost every visual impression a page makes comes down to two things: color choices and typography (font, size, spacing). Get these two right and a page already looks 80% more professional — before you've touched layout at all.

বক্স মডেল বোঝার পর, এখন সময় সেই বাক্সগুলোকে এমন রঙ ও টেক্সট দিয়ে পূরণ করার যা সত্যিই ভালোভাবে পড়া যায়। একটি পেজের প্রায় পুরো ভিজ্যুয়াল ছাপ নির্ভর করে দুটি জিনিসের ওপর — রঙের নির্বাচন এবং টাইপোগ্রাফি (ফন্ট, আকার, স্পেসিং)। এই দুটি ঠিকমতো করলে লেআউট স্পর্শ করার আগেই পেজটি ৮০% বেশি পেশাদার দেখায়।

2. Color Formats: hex, rgb, hsl

CSS accepts several ways to write a color. Hex (#39b549) packs red, green, blue as two-digit hexadecimal pairs — compact and the most common in design tools. rgb() (rgb(57, 181, 73)) writes the same three channels as plain numbers 0–255, and supports transparency via rgba() or a fourth value. hsl() (hsl(128, 52%, 47%)) describes color by hue, saturation, and lightness — the easiest format for humans to reason about ("same hue, just darker").

CSS রঙ লেখার জন্য একাধিক পদ্ধতি গ্রহণ করে। Hex (#39b549) লাল, সবুজ, নীলকে দুই-অঙ্কের hexadecimal জোড়া হিসেবে প্যাক করে — কমপ্যাক্ট এবং ডিজাইন টুলে সবচেয়ে বেশি ব্যবহৃত। rgb() (rgb(57, 181, 73)) একই তিনটি চ্যানেলকে সাধারণ সংখ্যা (0–255) হিসেবে লেখে, এবং rgba() বা চতুর্থ মান দিয়ে transparency সমর্থন করে। hsl() (hsl(128, 52%, 47%)) রঙকে hue, saturation, ও lightness দিয়ে বর্ণনা করে — মানুষের জন্য সবচেয়ে সহজে বোঝার পদ্ধতি ("একই hue, শুধু গাঢ়")।
FormatExampleবাংলায়
Hex#39b549দুই-অঙ্কের R, G, B জোড়া।
rgb / rgbargb(57, 181, 73) / rgba(57,181,73,0.5)0–255 সংখ্যায় R, G, B; alpha দিয়ে transparency।
hsl / hslahsl(128, 52%, 47%)hue, saturation, lightness।
Named colorstomato, navyপ্রি-ডিফাইন্ড রঙের নাম, প্রোটোটাইপিং-এ সুবিধাজনক।
#39b549
ABCL TECH green
#2563eb
Link blue
#ea580c
Warning orange
#dc2626
Danger red

3. px vs % vs em vs rem vs vw/vh

px is an absolute unit — always the same size regardless of context. % is relative to the parent element's size. em is relative to the current element's own font-size (which compounds awkwardly when nested). rem is relative to the root (<html>) font-size only — no compounding, which makes it the most predictable unit for typography. vw/vh are relative to 1% of the viewport's width/height — useful for full-screen sections.

px একটি absolute ইউনিট — কনটেক্সট যাই হোক না কেন সবসময় একই আকার। % parent এলিমেন্টের আকারের সাপেক্ষে। em বর্তমান এলিমেন্টের নিজের font-size-এর সাপেক্ষে (nested হলে জটিলভাবে compound হয়)। rem শুধুমাত্র root (<html>) font-size-এর সাপেক্ষে — কোনো compounding নেই, যা টাইপোগ্রাফির জন্য সবচেয়ে predictable ইউনিট করে তোলে। vw/vh viewport-এর প্রস্থ/উচ্চতার 1%-এর সাপেক্ষে — ফুল-স্ক্রিন সেকশনের জন্য উপযোগী।
index.html 
<p class="px-text">16px — always 16px</p>
<p class="rem-text">1.5rem — scales with root</p>
<p class="em-text">1.5em inside a 20px parent</p>
style.css
html { font-size: 16px; }

.px-text  { font-size: 16px; }
.rem-text { font-size: 1.5rem; }   /* 1.5 * 16px = 24px */

.em-text  { font-size: 20px; }
.em-text  span { font-size: 1.5em; } /* 1.5 * 20px = 30px */
Key insight rem is calculated against the root font-size — change one number on html and every rem-based size across the whole site scales together.

rem root font-size-এর সাপেক্ষে হিসাব হয় — html-এ একটি সংখ্যা বদলালেই পুরো সাইটের প্রতিটি rem-ভিত্তিক আকার একসাথে scale হয়।

4. font-family, font-size, line-height

font-family is a fallback list — the browser uses the first font it can find, so always end the list with a generic family like sans-serif. font-size sets text size (usually in rem). line-height controls vertical spacing between lines of text — a unitless value like 1.6 (meaning 1.6× the font-size) is safest because it scales correctly if font-size changes.

font-family একটি fallback তালিকা — ব্রাউজার যে ফন্টটি প্রথমে খুঁজে পায় সেটিই ব্যবহার করে, তাই তালিকার শেষে সবসময় sans-serif-এর মতো একটি generic family রাখুন। font-size টেক্সটের আকার ঠিক করে (সাধারণত rem-এ)। line-height টেক্সটের লাইনের মধ্যেকার উল্লম্ব স্পেসিং নিয়ন্ত্রণ করে — 1.6-এর মতো একটি unitless মান নিরাপদ, কারণ font-size বদলালেও এটি সঠিকভাবে scale হয়।

5. Web Fonts with Google Fonts

Browsers only show fonts already installed on the visitor's device unless you load a web font. Google Fonts is a free library — pick a font, copy a <link> tag into your <head>, then reference the font name in font-family. This course's own pages load "Roboto" and "Hind Siliguri" (for Bangla text) exactly this way.

ওয়েব ফন্ট লোড না করলে ব্রাউজার শুধু ভিজিটরের ডিভাইসে আগে থেকে ইনস্টল থাকা ফন্টই দেখাতে পারে। Google Fonts একটি ফ্রি লাইব্রেরি — একটি ফন্ট বেছে নিন, একটি <link> ট্যাগ কপি করে <head>-এ বসান, তারপর font-family-তে সেই ফন্টের নাম ব্যবহার করুন। এই কোর্সের পেজগুলো ঠিক এভাবেই "Roboto" এবং (বাংলা টেক্সটের জন্য) "Hind Siliguri" লোড করে।
index.html 
<head>
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <p class="bn-text">এটি Hind Siliguri ফন্টে লেখা।</p>
</body>
style.css
.bn-text {
  font-family: 'Hind Siliguri', sans-serif;
  font-size: 1.1rem;
}

6. Text Alignment & Spacing

text-align (left/center/right/justify) controls horizontal alignment within a block. letter-spacing adjusts space between characters (small values for headings, e.g. uppercase labels). word-spacing adjusts space between words. Together with line-height, these give you full control over how comfortable a block of text is to read.

text-align (left/center/right/justify) একটি ব্লকের ভেতর অনুভূমিক অ্যালাইনমেন্ট নিয়ন্ত্রণ করে। letter-spacing অক্ষরের মধ্যেকার স্পেসিং ঠিক করে (heading-এর জন্য ছোট মান, যেমন uppercase লেবেল)। word-spacing শব্দের মধ্যেকার স্পেসিং ঠিক করে। line-height-এর সাথে মিলিয়ে এগুলো একটি টেক্সট ব্লক কতটা আরামে পড়া যায় তার পূর্ণ নিয়ন্ত্রণ দেয়।
PropertyControlsবাংলায়
text-alignHorizontal alignment of text in its block.ব্লকে টেক্সটের অনুভূমিক অ্যালাইনমেন্ট।
line-heightVertical space between lines.লাইনগুলোর মধ্যেকার উল্লম্ব জায়গা।
letter-spacingSpace between individual characters.প্রতিটি অক্ষরের মধ্যেকার জায়গা।
text-transformuppercase / lowercase / capitalize display, without changing the source text.মূল টেক্সট না বদলে uppercase/lowercase/capitalize দেখানো।

7. Glossary (শব্দকোষ)

TermMeaningবাংলায়
Hex colorA 6-digit base-16 color code like #39b549.#39b549-এর মতো ৬-অঙ্কের base-16 রঙের কোড।
Absolute unitFixed size regardless of context, e.g. px.কনটেক্সট নির্বিশেষে স্থির আকার, যেমন px।
Relative unitSize depends on something else, e.g. rem, %, vw.আকার অন্য কিছুর ওপর নির্ভর করে, যেমন rem, %, vw।
Web fontA font file loaded over the internet instead of relying on the device.ডিভাইসের ওপর নির্ভর না করে ইন্টারনেট থেকে লোড করা ফন্ট ফাইল।
line-heightVertical space allotted per line of text.প্রতি লাইন টেক্সটের জন্য বরাদ্দকৃত উল্লম্ব জায়গা।

8. Practice Problems

Every problem has a Show Answer button with real, runnable HTML+CSS. Try it yourself first, then check.

প্রতিটি প্রশ্নের সাথে Show Answer বাটন রয়েছে, যেখানে চালু-করার-যোগ্য HTML+CSS দেওয়া আছে। প্রথমে নিজে চেষ্টা করুন, তারপর মিলিয়ে নিন।
  1. Write the same green color three ways: as hex, as rgb(), and as hsl(), applied to a heading's text color.
    একই সবুজ রঙ তিনভাবে লিখুন — hex, rgb(), এবং hsl() হিসেবে — একটি heading-এর টেক্সট কালারে প্রয়োগ করে।
    ✨ Show Answer (উত্তর দেখুন)
    ans1.html
    <h2 class="hex">Hex green</h2>
<h2 class="rgb">RGB green</h2>
<h2 class="hsl">HSL green</h2>
    style.css
    .hex { color: #39b549; }
.rgb { color: rgb(57, 181, 73); }
.hsl { color: hsl(128, 52%, 47%); }
  2. Set the root html font-size to 20px, then give a paragraph font-size: 1.2rem. What is its final pixel size?
    root html-এর font-size 20px সেট করুন, তারপর একটি paragraph-এ font-size: 1.2rem দিন। এর চূড়ান্ত পিক্সেল আকার কত হবে?
    ✨ Show Answer (উত্তর দেখুন)

    Answer: 24px. rem is always calculated against the root (html) font-size, so 1.2 × 20px = 24px, regardless of any parent element's own font-size.

    24px। rem সবসময় root (html)-এর font-size-এর সাপেক্ষে হিসাব হয়, তাই 1.2 × 20px = 24px — যেকোনো parent এলিমেন্টের নিজের font-size নির্বিশেষে।

  3. Load a Google Font of your choice and apply it to a paragraph, with a sans-serif fallback.
    আপনার পছন্দের একটি Google Font লোড করুন এবং sans-serif fallback সহ একটি paragraph-এ প্রয়োগ করুন।
    ✨ Show Answer (উত্তর দেখুন)
    ans3.html
    <p class="poppins">Styled with a Google Font.</p>
    style.css
    /* In real use, load via a <link> tag in <head> first */
.poppins {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
}
  4. Style a paragraph with line-height: 1.8 and text-align: justify, and explain in one sentence why unitless line-height is preferred.
    একটি paragraph-এ line-height: 1.8 এবং text-align: justify প্রয়োগ করুন, এবং এক বাক্যে ব্যাখ্যা করুন কেন unitless line-height পছন্দনীয়।
    ✨ Show Answer (উত্তর দেখুন)
    ans4.html
    <p class="readable">A unitless line-height scales automatically with whatever font-size is set on this element or its children, keeping vertical rhythm consistent everywhere.</p>
    style.css
    .readable {
  line-height: 1.8;
  text-align: justify;
}

    Answer: A unitless value like 1.8 is a multiplier of the element's own font-size, so it stays proportionally correct even if a child element uses a different font-size — a fixed px value would not adjust.

    1.8-এর মতো unitless মান এলিমেন্টের নিজের font-size-এর একটি গুণক, তাই child এলিমেন্ট ভিন্ন font-size ব্যবহার করলেও এটি সঠিক অনুপাতে থাকে — একটি নির্দিষ্ট px মান এভাবে সামঞ্জস্য করতে পারত না।

  5. In two sentences, explain the difference between em and rem, and give one situation where rem is clearly the safer choice.
    দুই বাক্যে em এবং rem-এর মধ্যে পার্থক্য ব্যাখ্যা করুন, এবং একটি পরিস্থিতি দিন যেখানে rem স্পষ্টভাবে নিরাপদ পছন্দ।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: em is relative to the current element's own font-size, so nested elements using em can compound unexpectedly (each level multiplying the last); rem always refers to the root html font-size, so it never compounds. rem is the safer choice for deeply nested components, like list items inside cards inside a sidebar, where you don't want font-size to snowball at each level.

    em বর্তমান এলিমেন্টের নিজের font-size-এর সাপেক্ষে, তাই nested এলিমেন্টে em ব্যবহার করলে তা অপ্রত্যাশিতভাবে compound হতে পারে (প্রতিটি স্তরে আগেরটির গুণ হয়); rem সবসময় root html font-size বোঝায়, তাই এটি কখনো compound হয় না। গভীরভাবে nested কম্পোনেন্টে (যেমন sidebar-এর ভেতর card-এর ভেতর list item) rem নিরাপদ পছন্দ, যেখানে প্রতিটি স্তরে font-size বেড়ে যাওয়া অনাকাঙ্ক্ষিত।

Summary — Module 13

Colors can be written as hex, rgb()/rgba(), or hsl() — each useful in different situations. Sizing units split into absolute (px) and relative (%, em, rem, vw/vh), with rem the safest default for typography since it always scales against the root font-size. Google Fonts lets you use any web font via a simple <link> tag, and line-height/text-align/letter-spacing control readability.

রঙ hex, rgb()/rgba(), বা hsl() হিসেবে লেখা যায় — প্রতিটি ভিন্ন পরিস্থিতিতে উপযোগী। আকারের ইউনিট ভাগ হয় absolute (px) ও relative (%, em, rem, vw/vh)-এ, যেখানে rem টাইপোগ্রাফির জন্য সবচেয়ে নিরাপদ ডিফল্ট, কারণ এটি সবসময় root font-size-এর সাপেক্ষে scale হয়। Google Fonts একটি সাধারণ <link> ট্যাগ দিয়ে যেকোনো ওয়েব ফন্ট ব্যবহার করতে দেয়, এবং line-height/text-align/letter-spacing পঠনযোগ্যতা নিয়ন্ত্রণ করে।

Next Module → Backgrounds, Borders & Shadows — ব্যাকগ্রাউন্ড, বর্ডার ও শ্যাডো দিয়ে চূড়ান্ত ছোঁয়া দেওয়া।

Previous: The Box Model Next: Backgrounds, Borders & Shadows