Week 1 Day 3: CSS Introduction

2025-12-17 16:18:55 +05:30
parent f834744e2a
commit 0c51607942
4 changed files with 86 additions and 0 deletions
--- a/Week-1/Day-3/Readme.md
+++ b/Week-1/Day-3/Readme.md
@@ -0,0 +1,25 @@
+# Day 3 – CSS Styling Basics
+
+## 📅 Date
+17 December 2025
+
+## 🎯 Objective
+To learn the fundamentals of CSS and how to style HTML content.
+
+## 📘 Topics Covered
+- What CSS is
+- How CSS works
+- CSS syntax (selectors and declarations)
+- Common style properties
+- Ways to apply CSS (inline, internal, external)
+
+## 🛠️ Files Included
+- `css-styling-basics.md` – Notes explaining CSS basics
+- `example.css` – Practice CSS file demonstrating styling
+- `index.html` – HTML file linked with CSS
+
+## 🧠 Learning Outcome
+I learned how to style HTML elements using CSS by writing basic selectors and properties to control text color, layout, and appearance.
+
+## 🚀 Status
+Completed
--- a/Week-1/Day-3/css-styling-basics.md
+++ b/Week-1/Day-3/css-styling-basics.md
@@ -0,0 +1,37 @@
+# CSS Styling Basics
+
+## Introduction
+CSS stands for Cascading Style Sheets.  
+It is used to style and layout web pages — for example, to change font sizes, colors, spacing, and the general look of HTML content.
+
+## What is CSS?
+- CSS is a style sheet language used alongside HTML.
+- It separates content (HTML) from presentation (CSS).
+
+## Why Use CSS?
+- Makes webpages visually attractive.
+- Helps control layout and design across many pages.
+- Keeps HTML clean and focused only on structure.
+
+## CSS Syntax
+A CSS rule has two parts:
+- Selector: chooses the HTML element(s) to style
+- Declaration block: contains style properties and values.
+
+## How CSS is Applied
+CSS can be added in 3 ways:
+Inline – inside an HTML tag
+Internal – inside <style> in the HTML <head>
+External – as a separate .css file linked from the HTML
+
+## Basic Style Properties
+color – text color
+background-color – background color
+font-size – size of text
+margin, padding – spacing control
+
+Example:
+h1 {
+  color: blue;
+  font-size: 2em;
+}
--- a/Week-1/Day-3/example.css
+++ b/Week-1/Day-3/example.css
@@ -0,0 +1,13 @@
+h1 {
+  color: darkblue;
+  font-size: 2.5em;
+}
+
+p {
+  color: gray;
+  font-size: 1em;
+}
+
+body {
+  background-color: #f0f0f0;
+}
--- a/Week-1/Day-3/index.html
+++ b/Week-1/Day-3/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Styling Practice</title>
+    <link rel="stylesheet" href="example.css">
+</head>
+<body>
+    <h1>Welcome to CSS Styling</h1>
+    <p>This paragraph is styled using CSS.</p>
+</body>
+</html>