.png)
Here's a step-by-step guide to learning CSS (Cascading Style Sheets) with examples. This is a beginner-friendly walkthrough and progresses to intermediate and advanced levels.
1. Introduction to CSS
CSS is used to style HTML elements.
Syntax:
selector {
property: value;
}
Example:
p {
color: red;
font-size: 16px;
}
2. Types of CSS
a) Inline CSS
<p style="color: blue;">This is blue text.</p>
b) Internal CSS
<head>
<style>
h1 { color: green; }
</style>
</head>
c) External CSS
<!-- HTML -->
<link rel="stylesheet" href="style.css">
/* style.css */
body {
background-color: lightgray;
}
3. CSS Selectors
Basic Selectors:
h1 {} /* Element Selector */
#id {} /* ID Selector */
.classname {} /* Class Selector */
Example:
<p id="intro">Hello</p>
<p class="msg">World</p>
<style>
#intro { color: green; }
.msg { color: blue; }
</style>
4. Colors and Backgrounds
Example:
body {
background-color: #f0f0f0;
}
h1 {
color: navy;
background-color: yellow;
}
5. Text Formatting
p {
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
}
6. Box Model
Every element is a box: Content + Padding + Border + Margin
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
7. CSS Display and Positioning
Display
div {
display: inline;
}
Position
div {
position: absolute;
top: 50px;
left: 100px;
}
8. Flexbox (Layout Tool)
.container {
display: flex;
justify-content: space-between;
}
Example:
<div class="container">
<div>Box 1</div>
<div>Box 2</div>
</div>
9. Grid Layout
.grid-container {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
}
10. Pseudo-classes and Pseudo-elements
a:hover {
color: red;
}
p::first-letter {
font-size: 30px;
}
11. Media Queries (Responsive Design)
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
12. Animations and Transitions
.box {
transition: all 0.5s;
}
.box:hover {
background-color: red;
}
@keyframes slide {
from { left: 0; }
to { left: 100px; }
}
13. Custom Properties (CSS Variables)
:root {
--main-color: blue;
}
h1 {
color: var(--main-color);
}
14. Practice Project Ideas
- Responsive portfolio site
- To-do list UI
- Pricing cards
- Flexbox photo gallery
15. Resources to Learn More
Would you like a downloadable PDF version of this or a zip file with example HTML + CSS files?
