NS
Guest Mode:

BCA Student Stories & UpdatesLive

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

CSS Introduction & Connecting CSS to HTML

CSS styles and paints your HTML skeleton. While HTML defines meaning and structure, CSS controls colors, layouts, typography, responsiveness, and visual polish.

Interactive Learning Roadmap

Day 8 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Understand the role of CSS (Cascading Style Sheets).
✔Compare the 3 ways to add CSS: Inline, Internal (<style>), and External (<link>).
✔Master the syntax of CSS rule sets: Selector, Property, Value.
✔Link an external `style.css` file properly to your HTML head.
Day 8 MasterclassCSS Foundation

CSS Introduction & Connecting CSS to HTML — Comprehensive Practical Guide

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

Real-World Purpose Aur Zaroorat

CSS styles and paints your HTML skeleton. While HTML defines meaning and structure, CSS controls colors, layouts, typography, responsiveness, and visual polish.

Inline CSS (`style="..."`) is strongly discouraged because it clutters HTML and violates separation of concerns.
Internal CSS (`<style>` in `<head>`) is suitable for single-page experiments.
External CSS (`<link rel="stylesheet" href="style.css">`) is the industry standard for production websites.
A CSS declaration consists of `property: value;` enclosed in curly braces `{}`.
Dimaag Mein Bithane Ka Model

"If HTML is the human skeleton, CSS is the skin, clothes, hairstyle, and shoes."

💡 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 the link tag pulls styles from an external file cleanly.

Connecting External CSS to HTMLhtml
<!-- Inside index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Connection Demo</title>
  <!-- Standard External Stylesheet Link -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>NextSem CSS Mastery</h1>
  <p>This text is styled via an external stylesheet.</p>
</body>
</html>

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 8 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Add External Stylesheet Link

Inside `<head>`, add a `<link>` tag with `rel="stylesheet"` and `href="style.css"`.

⏳ WAITING
Task 2Add Internal <style> Block

Inside `<head>`, add a `<style>` block setting `h1 { color: #04AA6D; }`.

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

Spot the Bug: Broken External Link Tag

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

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
<link src="style.css" type="css">
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

<link> tags do NOT use src! They use href to target stylesheets and rel="stylesheet" to declare the relationship. Without these, the browser ignores the file completely.

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

📝Independent Practice: Assignment

📄 style.css

Homework Task: Create Dedicated style.css File

  • •Open your Day 7 project or create a new folder `bca-day-8`.
  • •Create `index.html` and `style.css` side-by-side.
  • •Link `style.css` in `index.html`.
  • •In `style.css`, reset body margin to 0 and set default font-family to sans-serif.
  • •Change heading colors to `#0c1328` and paragraph line-height to 1.6.
Submission Evaluation Criteria: Confirm in Chrome DevTools Network tab (F12) that `style.css` returns HTTP Status 200.
Exact Assignment Solution Code: style.css

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

/* ── style.css (Dedicated Stylesheet) ── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f8fafc;
  color: #334155;
  line-height: 1.6;
  padding: 30px 20px;
}

.container {
  max-width: 650px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

h1 {
  color: #0c1328;
  font-size: 26px;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

p {
  margin-bottom: 16px;
  font-size: 15px;
}

/* ── index.html (Linked Document) ──
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 8 - External Stylesheet</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>External CSS Architecture</h1>
    <p>This document links to a dedicated style.css file using the standard link tag.</p>
  </div>
</body>
</html>
*/
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Which method of applying CSS has the highest specificity/precedence by default?

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 08: External CSS integration and stylesheet architecture"
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 8 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-08/ or bca-day-8/
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 8
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 8
4$
mkdir day-08
Create a new project folder (day-08)
5$
cd day-08
Change working directory to day-08
6$
# 3. Create your code file: index.html
7$
# (Write your Day 8 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 08: CSS Introduction & Connecting CSS to HTML"
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-08/ 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/✨ CREATE THIS FOLDER FOR TODAY (Day 8)
└──index.htmlMust contain: required, pattern="...", type="email", minlength
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 8 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 7: HTML Mini Project — Student Developer Profile Website first.

Complete Day 7 First
Day 7: HTML Mini Project — Student Developer Profile Website
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal