NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 10CSS Foundation2 Hours Practical
Push to GitHub to Complete

CSS Colors, Fonts & Text Styling

Typography and curated color harmony dictate 90% of user trust and perception on a website. Modern web apps use tailored HSL/Hex color palettes and crisp web fonts instead of generic browser defaults.

Interactive Learning Roadmap

Day 10 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Understand color representations: Hex codes (`#04AA6D`), RGB/RGBA (`rgba(0,0,0,0.5)`), and HSL.
✔Import Google Fonts (@import or <link>) into web documents.
✔Control typography: `font-size`, `font-weight`, `line-height`, `letter-spacing`.
✔Format text layouts with `text-align`, `text-transform`, and `text-decoration`.
Day 10 MasterclassCSS Foundation

CSS Colors, Fonts & Text Styling — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

Typography and curated color harmony dictate 90% of user trust and perception on a website. Modern web apps use tailored HSL/Hex color palettes and crisp web fonts instead of generic browser defaults.

Hex codes (`#ffffff`) represent red, green, and blue hex channels (00 to FF).
RGBA adds an Alpha channel (0.0 to 1.0) for transparent overlays and glassmorphism.
Always provide fallback font families (e.g., `font-family: "Inter", sans-serif;`).
Maintain a readable `line-height` of at least 1.5 to 1.6 for body paragraphs.
Dimaag Mein Bithane Ka Model

"Colors set the emotional mood of your room, while fonts are the voice tone in which your website speaks."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

Notice how importing the Inter font transforms the visual elegance immediately.

Modern Typography & Google Font Integrationcss
/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #060c18;
  color: #f1f5f9;
  line-height: 1.6;
}

h1 {
  color: #ffffff;
  font-size: 2.25rem; /* 36px */
  font-weight: 800;
  letter-spacing: -0.025em;
}

.text-accent {
  color: #04AA6D;
  font-weight: 600;
}

.subtitle {
  color: #94a3b8;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 10 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Set Dark Background & Crisp Text Color

In `<style>`, set `.promo-box` with `background-color: #0c1328;` and `color: #ffffff;`.

⏳ WAITING
Task 2Configure Line-Height & Letter-Spacing

Add a `.desc` rule setting `line-height: 1.6;` and `color: #94a3b8;`.

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh272 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Font Name with Spaces Missing Quotes

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
body {
2
font-family: Open Sans, sans-serif;
3
}
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Font family names containing whitespace (e.g. Open Sans, Courier New) MUST be wrapped in quotation marks. Otherwise, some browsers will fail to parse the font declaration.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 themed-article.html

Homework Task: Themed Tech Article Layout

  • •Import a Google Font of your choice (e.g., "Outfit", "Poppins", or "Inter").
  • •Create a dark-themed blog article with a curated color palette: Background `#060c18`, Surface Card `#0c1328`, Primary Text `#ffffff`, Accent `#04AA6D`, Muted `#94a3b8`.
  • •Apply `line-height: 1.7` to paragraphs to ensure optimal readability.
  • •Add a call-out quote block with an italic font and an emerald green left border.
Submission Evaluation Criteria: Verify that your color contrast ratio passes WCAG AA accessibility standards.
Exact Assignment Solution Code: themed-article.html

Open Visual Studio Code on your PC (code .), create themed-article.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 10 - Themed Tech Article Layout</title>
  <!-- Google Font: Inter -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: #060c18;
      color: #ffffff;
      padding: 40px 20px;
      line-height: 1.7;
    }
    .article-container {
      max-width: 680px;
      margin: 0 auto;
      background-color: #0c1328;
      border: 1px solid #1e293b;
      border-radius: 16px;
      padding: 36px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }
    .tag {
      display: inline-block;
      color: #04AA6D;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 8px;
    }
    h1 {
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 16px;
      color: #ffffff;
      line-height: 1.3;
    }
    p {
      color: #cbd5e1;
      margin-bottom: 20px;
      font-size: 15px;
    }
    blockquote {
      border-left: 4px solid #04AA6D;
      background-color: rgba(4, 170, 109, 0.08);
      padding: 16px 20px;
      margin: 24px 0;
      border-radius: 0 8px 8px 0;
      font-style: italic;
      color: #94a3b8;
    }
    footer {
      border-top: 1px solid #1e293b;
      padding-top: 16px;
      margin-top: 24px;
      font-size: 13px;
      color: #64748b;
    }
  </style>
</head>
<body>

  <article class="article-container">
    <span class="tag">Web Design & Architecture</span>
    <h1>Building Accessible Modern Dark Themes</h1>
    <p>Good typography and color harmony make software interfaces comfortable to read for hours. By pairing high-contrast pure white headers with subtle dark navy surfaces and emerald accents, developers can create stunning visual experiences.</p>
    
    <blockquote>
      "Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs
    </blockquote>

    <p>This layout adheres to WCAG AA color contrast standards, ensuring clarity and readability across all desktop and mobile screens.</p>

    <footer>
      <p>&copy; 2026 BCA Practical Day 10 • Completed 100% in Visual Studio Code</p>
    </footer>
  </article>

</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What does the fourth value in `rgba(4, 170, 109, 0.5)` represent?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
git add .
Stage all modified files and new assets for commit
2$
git commit -m "Day 10: Google Fonts typography, dark theme color harmony and text metrics"
Commit staged changes with a descriptive message
3$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 10 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-10/ or bca-day-10/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 10
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 10
4$
mkdir day-10
Create a new project folder (day-10)
5$
cd day-10
Change working directory to day-10
6$
# 3. Create your code file: index.html
7$
# (Write your Day 10 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 10: CSS Colors, Fonts & Text Styling"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-10/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/✨ CREATE THIS FOLDER FOR TODAY (Day 10)
└──index.htmlMust contain: Semantic layout, CSS stylesheet link, Portfolio showcase
└──styles.css
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 10 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 9: CSS Selectors & Basic Styling first.

Complete Day 9 First
Day 9: CSS Selectors & Basic Styling
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal