Week 1 Day 4: CSS fundamentals and basic styling
This commit is contained in:
29
Week-1/Day-4/Readme.md
Normal file
29
Week-1/Day-4/Readme.md
Normal file
@@ -0,0 +1,29 @@
|
||||
|
||||
# Week 1 – Day 4: CSS Notes
|
||||
|
||||
## 📅 Date
|
||||
18 December 2025
|
||||
|
||||
## 🎯 Objective
|
||||
To understand and practice the core fundamentals of CSS used for styling and layout in web development.
|
||||
|
||||
## 📘 Topics Covered
|
||||
- CSS introduction and syntax
|
||||
- Inline, internal, and external CSS
|
||||
- Selectors (element, class, ID)
|
||||
- Colors and text styling
|
||||
- CSS box model
|
||||
- Width, height, and units
|
||||
- Display and position properties
|
||||
- Background styling
|
||||
|
||||
## 📂 Files Included
|
||||
- `css-notes-day4.md` – Detailed theory notes
|
||||
- `index.html` – Practice HTML file
|
||||
- `style.css` – CSS styling file
|
||||
|
||||
## 🧠 Learning Outcome
|
||||
Gained a strong foundation in CSS fundamentals required for building structured and visually appealing web pages.
|
||||
|
||||
## ✅ Status
|
||||
Completed
|
||||
124
Week-1/Day-4/css-notes-day4.md
Normal file
124
Week-1/Day-4/css-notes-day4.md
Normal file
@@ -0,0 +1,124 @@
|
||||
# CSS Notes
|
||||
|
||||
## Introduction to CSS
|
||||
CSS (Cascading Style Sheets) is used to style and visually format HTML elements. It controls layout, colors, fonts, spacing, and overall presentation of web pages. CSS helps maintain separation between content (HTML) and design (CSS).
|
||||
|
||||
## Ways to Apply CSS
|
||||
|
||||
### 1. Inline CSS
|
||||
CSS written directly inside an HTML tag.
|
||||
<p style="color: blue;">Hello World</p>
|
||||
Not recommended for large projects.
|
||||
|
||||
### 2. Internal CSS
|
||||
CSS written inside a <style> tag in the <head>.
|
||||
<style>
|
||||
p { color: red; }
|
||||
</style>
|
||||
|
||||
### 3. External CSS (Preferred)
|
||||
CSS written in a separate .css file.
|
||||
<link rel="stylesheet" href="style.css">
|
||||
Reusable, clean and professional
|
||||
|
||||
## CSS Selectors
|
||||
|
||||
### Element Selector
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
|
||||
### Class Selector
|
||||
.box {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
### ID Selector
|
||||
#main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
### Group Selector
|
||||
h1, h2, h3 {
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
## Colors in CSS
|
||||
|
||||
### Color Formats
|
||||
Named colors: red, blue
|
||||
Hex: #ff5733
|
||||
RGB: rgb(255, 87, 51)
|
||||
RGBA: rgba(0, 0, 0, 0.5)
|
||||
|
||||
### Text & Font Styling
|
||||
Common Properties
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
### Text Decoration
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
## CSS Box Model (Very Important)
|
||||
Every HTML element consists of:
|
||||
Content
|
||||
Padding
|
||||
Border
|
||||
Margin
|
||||
div {
|
||||
padding: 10px;
|
||||
border: 2px solid black;
|
||||
margin: 15px;
|
||||
}
|
||||
Understanding the box model is crucial for layout control.
|
||||
|
||||
## Width, Height & Units
|
||||
Units Used
|
||||
px – fixed size
|
||||
% – relative
|
||||
em – relative to parent
|
||||
rem – relative to root element
|
||||
.container {
|
||||
width: 80%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
## Display Property
|
||||
Common Values
|
||||
block
|
||||
inline
|
||||
inline-block
|
||||
none
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
## Position Property (Basics)
|
||||
Types
|
||||
static (default)
|
||||
relative
|
||||
absolute
|
||||
fixed
|
||||
.box {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
## Background Styling
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
### Background image:
|
||||
div {
|
||||
background-image: url("image.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
46
Week-1/Day-4/index.html
Normal file
46
Week-1/Day-4/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Fundamentals Practice</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="main-header">
|
||||
<h1>CSS Fundamentals</h1>
|
||||
<p>Week 1 – Day 4 Practice</p>
|
||||
</header>
|
||||
|
||||
<section class="content">
|
||||
<h2>About CSS</h2>
|
||||
<p class="description">
|
||||
CSS is used to style HTML elements and improve the visual appearance
|
||||
of web pages. It allows developers to control layout, spacing, colors,
|
||||
fonts, and overall design.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<h2>Topics Practiced</h2>
|
||||
<ul>
|
||||
<li>CSS Selectors</li>
|
||||
<li>Box Model</li>
|
||||
<li>Text Styling</li>
|
||||
<li>Colors and Background</li>
|
||||
<li>Display and Position</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="box-container">
|
||||
<div class="box">Box One</div>
|
||||
<div class="box">Box Two</div>
|
||||
<div class="box">Box Three</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Internship Practice – Week 1</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
64
Week-1/Day-4/style.css
Normal file
64
Week-1/Day-4/style.css
Normal file
@@ -0,0 +1,64 @@
|
||||
/* General Page Styling */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f2f2f2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Header Styling */
|
||||
#main-header {
|
||||
background-color: #0047ab;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Section Styling */
|
||||
.content {
|
||||
background-color: white;
|
||||
margin: 20px;
|
||||
padding: 15px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Paragraph Styling */
|
||||
.description {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* List Styling */
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Box Model Practice */
|
||||
.box-container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
background-color: #ffa500;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
margin: 10px;
|
||||
border: 2px solid #cc8400;
|
||||
}
|
||||
|
||||
/* Footer Styling */
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user