CSS Complete Notes
Easy Theory + Practical Examples for Student Learning
Topics Covered
• CSS Selectors
• CSS Box Model
• CSS Colors
• CSS Typography
• CSS Flexbox
• CSS Grid
• Responsive Web Design
How to use this guide: Read the concept first, then copy the example into an HTML file and open it in a web
browser. Change the values and observe how the output changes.
CSS Complete Notes | Page 1
1. Introduction to CSS
CSS stands for Cascading Style Sheets. It is used to control the appearance and layout of HTML elements.
HTML creates the structure of a web page, while CSS controls colors, fonts, spacing, borders, positioning, and
responsiveness.
Basic CSS syntax:
selector {
property: value;
}
For example, the selector h1 selects all heading level 1 elements. The property color changes their text color.
h1 {
color: blue;
}
Result: Every <h1> element on the page will appear in blue.
2. CSS Selectors
A CSS selector tells the browser which HTML element or elements should receive a particular style.
2.1 Universal Selector (*)
The universal selector selects all elements on the page.
* {
margin: 0;
padding: 0;
}
2.2 Element Selector
Selects HTML elements by their tag name.
p {
color: green;
font-size: 18px;
}
Example HTML:
<p>This paragraph will be green.</p>
<p>This paragraph will also be green.</p>
2.3 Class Selector
A class selector starts with a dot (.). It can be used on multiple elements.
.highlight {
background-color: yellow;
padding: 10px;
}
<p class="highlight">Important information</p>
<div class="highlight">Another highlighted area</div>
2.4 ID Selector
An ID selector starts with #. An ID should normally be unique on a page.
#mainTitle {
color: purple;
text-align: center;
}
<h1 id="mainTitle">Welcome to My Website</h1>
CSS Complete Notes | Page 2
2.5 Grouping Selector
Use a comma to apply the same styles to multiple selectors.
h1, h2, p {
font-family: Arial;
}
2.6 Descendant Selector
Selects elements inside another element.
.card p {
color: blue;
}
This affects paragraphs inside an element with class card.
Practical Selector Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
h1 {
color: darkblue;
}
.student {
background-color: lightgray;
padding: 10px;
margin: 5px;
}
#special {
border: 2px solid green;
}
</style>
</head>
<body>
<h1>Student List</h1>
<div class="student">Ali</div>
<div class="student" id="special">Sara</div>
<div class="student">Ahmed</div>
</body>
</html>
Expected output: A blue heading appears above three student boxes. All boxes have a light background, while
Sara's box also has a green border.
CSS Complete Notes | Page 3
3. CSS Box Model
Every HTML element can be understood as a rectangular box. The CSS Box Model consists of four main areas:
Part Purpose
Content The actual text, image, or other content.
Padding Space between the content and border.
Border The line surrounding padding and content.
Margin Space outside the border, separating elements.
.box {
width: 300px;
padding: 20px;
border: 5px solid blue;
margin: 30px;
}
Explanation: The content width is 300px. There is 20px of inner space, a 5px border, and 30px of outer space.
Important property: box-sizing
* {
box-sizing: border-box;
}
With border-box, the declared width includes the content, padding, and border. This makes page layouts easier to
control.
Practical Card Example
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
padding: 20px;
border: 2px solid #333;
margin: 20px auto;
background-color: #f5f5f5;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="card">
<h2>CSS Box Model</h2>
<p>This card uses width, padding, border and margin.</p>
</div>
</body>
</html>
4. CSS Colors
CSS allows colors to be written in several formats.
Format Example Meaning
Color name red Predefined color name
HEX #ff0000 Hexadecimal color value
RGB rgb(255, 0, 0) Red, Green, Blue values
RGBA rgba(255, 0, 0, 0.5) RGB plus transparency
CSS Complete Notes | Page 4
HSL hsl(0, 100%, 50%) Hue, Saturation, Lightness
h1 {
color: #1f4e79;
}
.box {
background-color: rgb(220, 240, 255);
border: 2px solid hsl(210, 60%, 40%);
}
Transparency example:
.overlay {
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
The last value 0.6 represents opacity. A value of 1 means fully visible, while 0 means completely transparent.
5. CSS Typography
Typography controls how text looks and improves readability.
Property Example Use
font-family Arial, sans-serif Changes the typeface
font-size 18px Changes text size
font-weight bold / 700 Controls thickness
font-style italic Makes text italic
text-align center Horizontal alignment
line-height 1.6 Space between lines
letter-spacing 2px Space between letters
text-transform uppercase Changes letter case
Practical Typography Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
p {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome Students</h1>
<p>
CSS typography helps us control the appearance,
size and spacing of text on a web page.
</p>
CSS Complete Notes | Page 5
</body>
</html>
CSS Complete Notes | Page 6
6. CSS Flexbox
Flexbox is a one-dimensional layout system. It is especially useful for arranging items in a row or a column.
Important Flexbox Properties
Property Purpose
display: flex Turns an element into a flex container
flex-direction Sets row or column direction
justify-content Aligns items on the main axis
align-items Aligns items on the cross axis
flex-wrap Allows items to move to a new line
gap Creates space between flex items
Basic Example
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.item {
padding: 20px;
border: 1px solid black;
}
Complete Practical Example: Navigation Bar
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #1f4e79;
color: white;
}
.menu {
display: flex;
gap: 20px;
}
.menu a {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<nav class="navbar">
<h2>My Website</h2>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</nav>
</body>
</html>
CSS Complete Notes | Page 7
Expected output: The website name appears on one side and navigation links appear on the other side in a
horizontal layout.
Centering an element with Flexbox
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
This is one of the easiest ways to center content horizontally and vertically.
7. CSS Grid
CSS Grid is a two-dimensional layout system. Unlike Flexbox, it can control both rows and columns at the same
time.
Basic Grid Example
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.item {
padding: 20px;
border: 1px solid black;
}
Explanation: repeat(3, 1fr) creates three equal columns. The gap creates space between items.
Practical Student Card Layout
<!DOCTYPE html>
<html>
<head>
<style>
.students {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.student {
padding: 20px;
text-align: center;
border-radius: 8px;
background-color: #eaf2f8;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="students">
<div class="student">Ali</div>
<div class="student">Sara</div>
<div class="student">Ahmed</div>
<div class="student">Ayesha</div>
<div class="student">Bilal</div>
<div class="student">Fatima</div>
</div>
</body>
</html>
Expected output: Six student cards are automatically arranged in three columns with equal spacing.
Useful Grid Units
CSS Complete Notes | Page 8
• fr – A fraction of available space.
• px – Fixed pixel size.
• auto – Browser automatically calculates size.
• repeat() – Repeats columns or rows.
• minmax() – Sets minimum and maximum track sizes.
CSS Complete Notes | Page 9
8. Responsive Web Design
Responsive Web Design means creating a website that looks good and works properly on different screen sizes
such as mobile phones, tablets, laptops, and desktop computers.
8.1 Viewport Meta Tag
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
This tag should normally be included inside the <head> section of responsive web pages.
8.2 Media Queries
A media query applies CSS rules only when a particular condition is true, such as when the screen becomes
smaller.
@media (max-width: 768px) {
.menu {
flex-direction: column;
}
}
Meaning: When the screen width is 768 pixels or less, the menu items will change from their normal direction to
a vertical column.
Responsive Grid Example
.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.products {
grid-template-columns: 1fr;
}
}
Result:
• Large screen: 3 columns
• Tablet screen: 2 columns
• Mobile screen: 1 column
Best Responsive Technique: auto-fit and minmax
.gallery {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
This creates as many columns as possible. When the screen becomes smaller, cards automatically move to the
next row.
CSS Complete Notes | Page 10
9. Final Practical Project: Responsive Student Profile
Page
The following example combines selectors, colors, typography, box model, Flexbox, Grid, and responsive
design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Student Dashboard</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f6f8;
color: #333;
}
header {
background-color: #1f4e79;
color: white;
padding: 20px;
text-align: center;
}
.students {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 30px;
}
.card {
background-color: white;
padding: 20px;
border-radius: 10px;
border: 1px solid #ddd;
text-align: center;
}
.card h2 {
color: #1f4e79;
margin-bottom: 10px;
}
.card button {
margin-top: 15px;
padding: 10px 15px;
border: none;
background-color: #2f6b4f;
color: white;
border-radius: 5px;
}
@media (max-width: 768px) {
.students {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.students {
grid-template-columns: 1fr;
padding: 15px;
}
CSS Complete Notes | Page 11
header {
font-size: 14px;
}
}
</style>
</head>
<body>
<header>
<h1>Student Dashboard</h1>
<p>CSS Practical Project</p>
</header>
<section class="students">
<div class="card">
<h2>Ali</h2>
<p>BS Computer Science</p>
<button>View Profile</button>
</div>
<div class="card">
<h2>Sara</h2>
<p>BS Information Technology</p>
<button>View Profile</button>
</div>
<div class="card">
<h2>Ahmed</h2>
<p>BS Artificial Intelligence</p>
<button>View Profile</button>
</div>
</section>
</body>
</html>
10. Quick Revision
Topic Main Idea
Selectors Choose which HTML elements receive CSS styles.
Box Model Every element contains content, padding, border and margin.
Colors CSS supports names, HEX, RGB, RGBA and HSL.
Typography Controls font, size, weight, alignment and spacing.
Flexbox Best for one-dimensional row or column layouts.
Grid Best for two-dimensional row and column layouts.
Responsive Design Makes layouts adapt to different screen sizes.
Practice Tasks for Students
• Create a web page and apply at least five different CSS selectors.
• Create a profile card and demonstrate margin, border and padding.
• Design a page using HEX, RGB and RGBA colors.
• Create a heading and paragraph using different typography properties.
• Create a navigation bar using Flexbox.
• Create a gallery of six cards using CSS Grid.
• Make the gallery responsive for desktop, tablet and mobile screens.
CSS Complete Notes | Page 12
• Combine all topics into one complete responsive website.
Final Tip: The best way to learn CSS is by experimenting. Change one property at a time, refresh the browser,
and observe the result.
CSS Complete Notes | Page 13