harshit.sachdev/Harshit-Sachdev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Week 1 Day 3: CSS Introduction

Browse Source
This commit is contained in:
Harshit Sachdev
2025-12-17 16:18:55 +05:30
parent f834744e2a
commit 0c51607942
4 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Week-1/Day-3/Readme.md Normal file
View File

@@ -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

37
Week-1/Day-3/css-styling-basics.md Normal file
View File

@@ -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;
}

13
Week-1/Day-3/example.css Normal file
View File

@@ -0,0 +1,13 @@
h1 {
color: darkblue;
font-size: 2.5em;
}
p {
color: gray;
font-size: 1em;
}
body {
background-color: #f0f0f0;
}

11
Week-1/Day-3/index.html Normal file
View File

@@ -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>