CSS Notes
✅ What is CSS?
CSS (Cascading Style Sheets) is a language used to describe the presentation (look and formatting) of a
webpage written in HTML.
HTML = Structure
CSS = Styling / Presentation
It controls:
• Layout
• Colors
• Fonts
• Spacing
• Animations
• Responsiveness
⭐ Importance of CSS in Web Development
• Separation of content and design: Keeps HTML clean.
• Consistency: One CSS file can style multiple pages.
• Reusability: Reuse styles across different elements/pages.
• Responsive Design: Works with media queries for mobile-first design.
• Visual Appeal: Makes websites modern and interactive.
🧾
Types of CSS
Type Description Example
Written directly inside HTML tag using
Inline <h1 style="color: red;">Hello</h1>
style attribute
Written in <style> tag inside the <head> <style> h1 { color: blue; }
Internal </style>
of HTML
Written in a separate .css file and linked via <link rel="stylesheet"
External href="styles.css">
<link>
🔔
Best Practice: Use External CSS for real projects to keep code modular and clean.
🔤
CSS Syntax & Selectors
Basic Syntax:
selector {
property: value;
}
Common Selectors:
Selector Example Description
element h1 Selects all <h1> elements
.class .card Selects all elements with class card
#id #header Selects element with ID header
* * Selects all elements
element1, element2 h1, p Selects all <h1> and <p>
element element div p All <p> inside <div>
🛠 Applying CSS to HTML
1. Inline CSS
<p style="color: green; font-size: 18px;">This is inline CSS</p>
2. Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is internal CSS</p>
</body>
</html>
3. External CSS
HTML File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="text">This is external CSS</p>
</body>
</html>
style.css:
.text {
color: purple;
font-weight: bold;
}
💡 Code Snippets (Extras)
🎨 Styling a button
button {
background-color: teal;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
🧱
Center an element
.center {
margin: 0 auto;
width: 50%;
text-align: center;
}
🧩
Mini Project: "Personal Profile Card"
👇
Requirements:
• Use External CSS
• Create a profile card with your name, a short intro, and a styled image
• Use CSS for layout and styling
🧾
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Profile Card</title>
</head>
<body>
<div class="card">
<img src="profile.jpg" alt="Profile Picture" class="profile-img">
<h2>Waseem Adil</h2>
<p>Web Developer | Learner | Creator</p>
</div>
</body>
</html>
🎨 CSS (style.css)
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding-top: 50px;
}
.card {
background-color: white;
padding: 20px;
width: 300px;
margin: auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.profile-img {
width: 100px;
border-radius: 50%;
margin-bottom: 10px;
}
🎨
Colors in CSS
You can define colors in several ways:
✅
Named Colors:
Example:
color: red;
background-color: lightblue;
✅
HEX Code:
Represents Red, Green, Blue in hexadecimal.
color: #FF5733; /* orange-ish */
✅ RGB:
Red, Green, Blue (0–255)
color: rgb(255, 99, 71); /* tomato */
✅ HSL:
Hue (0–360), Saturation (%), Lightness (%)
color: hsl(120, 100%, 50%); /* green */
📝 Text Styling
Property Description Example
font-family Changes the font style font-family: 'Arial';
font-size Sets size of text font-size: 16px;
font-weight Makes text bold/thin font-weight: bold;
font-style Italic or normal text font-style: italic;
text-align Aligns text (left, right, center) text-align: center;
🧾
Example:
h1 {
font-family: "Georgia", serif;
font-size: 32px;
font-weight: bold;
font-style: italic;
text-align: center;
}
🖼
Backgrounds
Property Description Example
background-color Sets background color background-color: #f4f4f4;
background-image:
background-image Sets image as background
url("bg.jpg");
Repeat image (repeat, no-
background-repeat background-repeat: no-repeat;
repeat)
Property Description Example
background-
Position of image background-position: center;
position
background-size Control size (cover, contain) background-size: cover;
Example:
body {
background-color: #fafafa;
background-image: url("pattern.png");
background-repeat: no-repeat;
background-position: top right;
background-size: 100px;
}
📦 Box Model (Borders, Margins, Padding)
Part Description
border Outer border around element
margin Space outside the element
padding Space inside, between content and border
Visual Representation:
+-----------------------------+
| margin |
| +----------------------+ |
| | border | |
| | +---------------+ | |
| | | padding | | |
| | | +--------+ | | |
| | | | content| | | |
| | | +--------+ | | |
| | +---------------+ | |
| +----------------------+ |
+-----------------------------+
Example:
.box {
border: 2px solid #333;
padding: 20px;
margin: 40px;
}
📏
CSS Units
Unit Description Example
px Fixed pixels width: 100px;
% Relative to parent element width: 50%;
em Relative to the element’s font-size font-size: 2em;
rem Relative to the root font-size font-size: 1.5rem;
vw 1% of viewport width width: 50vw;
vh 1% of viewport height height: 50vh;
🧩 Mini Project: "Styled Quote Card"
📝 Goal:
Create a beautiful, responsive quote card using basic CSS properties learned in this lesson.
✅
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>Quote Card</title>
</head>
<body>
<div class="quote-card">
<p class="quote">
"The only way to do great work is to love what you do."
</p>
<p class="author">- Steve Jobs</p>
</div>
</body>
</html>
🎨
CSS (style.css):
body {
background-color: #e0f7fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: "Helvetica", sans-serif;
}
.quote-card {
background-color: #ffffff;
padding: 30px;
border: 2px solid #00838f;
border-radius: 15px;
width: 80%;
max-width: 500px;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.quote {
font-size: 1.5rem;
font-style: italic;
color: #006064;
margin-bottom: 15px;
}
.author {
font-weight: bold;
color: #004d40;
}
📘
Box Model
The CSS Box Model describes how elements are displayed and spaced on a webpage.
Box Model Layers (from innermost to outermost):
+-----------------------------+
| Margin |
| +----------------------+ |
| | Border | |
| | +---------------+ | |
| | | Padding | | |
| | | +--------+ | | |
| | | | Content| | | |
| | | +--------+ | | |
| | +---------------+ | |
| +----------------------+ |
+-----------------------------+
✅
CSS Example:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 30px;
background-color: #f2f2f2;
}
🧱 Display Property
Controls how an element is rendered on the page.
Value Behavior
block Takes full width. Starts on new line.
inline Takes only as much width as content. No line break.
inline-block Like inline, but allows setting width, height, padding.
none Hides the element completely.
✅
Example:
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
width: 100px;
height: 50px;
}
📐
Width & Height
Defines the size of the content box (excluding padding, border, margin).
div {
width: 300px;
height: 150px;
}💡
Use with px, em, %, vw, vh, etc.
🧊 Overflow Property
Controls what happens if content overflows the element’s box.
Behavior
Value
visible Default. Content spills out.
hidden Extra content is clipped.
scroll Adds scrollbars. Always shown.
auto Adds scrollbars only when needed.
✅ Example:
.scroll-box {
width: 300px;
height: 100px;
overflow: auto;
}
📏
min-height / max-width
Used to set constraints on the size of elements.
.responsive-box {
max-width: 600px;
min-height: 200px;
width: 100%;
}
✅
Useful for responsive layouts – allows flexible size but prevents too small or too large elements.
🧩
Mini Project: "Responsive Info Card with Box Model"
✅
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Info Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<h2>Welcome to CSS Layout</h2>
<p>
This box demonstrates the box model, layout behaviors, and
responsiveness using max-width and min-height.
</p>
</div>
</body>
</html>
🎨 CSS (style.css):
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e0f7fa;
margin: 0;
font-family: sans-serif;
}
.card {
max-width: 500px;
min-height: 200px;
padding: 20px;
border: 3px solid #00838f;
background-color: white;
margin: 40px;
overflow: auto;
display: block;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
Q1. What part of the box model contains the actual content of the element?
A) Padding
B) Border
C) Content
D) Margin
Q2. Which display property value allows setting width and height on an inline element?
A) block
B) inline
C) inline-block
D) none
Q3. What is the default value of the overflow property?
A) scroll
B) auto
C) hidden
D) visible
Q4. Which unit is relative to the width of the viewport?
A) em
B) vh
C) vw
D) rem
Q5. What does margin do in the box model?
A) Adds space inside the element
B) Adds space around the border
C) Sets background color
D) Changes the size of the content
Q6. Which CSS property is used to prevent content from spilling out of a container?
A) display
B) overflow
C) max-height
D) padding
Q7. What happens when you set display: none; on an element?
A) It becomes transparent
B) It becomes unclickable
C) It is removed from the document layout
D) It is hidden but still occupies space
Q8. What does max-width do?
A) Sets the fixed width
B) Sets the smallest width
C) Sets the largest width an element can be
D) Prevents overflow
Q9. If a div has padding: 10px; border: 5px solid black; margin: 20px; and
width: 200px;, what is the total width of the element?
A) 200px
B) 230px
C) 250px
D) 270px
Q10. Which display value will hide the element completely?
A) inline
B) block
C) inline-block
D) none
✅
Answer Key
✅
1. ✅ C) Content
2. ✅ C) inline-block
3. ✅ D) visible
4. ✅ C) vw
5. ✅ B) Adds space around the border
6.
✅ B) overflow
7.
✅ C) It is removed from the document layout
✅
8. C) Sets the largest width an element can be
✅
9. D) 270px → (200 + 10+10 + 5+5 + 20+20)
10. D) none
