.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?
https://www.webfx.com/web-design/learn/css-cheat-sheet.pdf
Great! Let's dive into Advanced CSS concepts, which go beyond the basics and give you powerful tools for building modern, responsive, and visually engaging web interfaces.
Advanced CSS Topics (with Examples)
1. Advanced Selectors
a) Attribute Selectors
input[type="text"] {
border: 1px solid gray;
}
b) nth-child, nth-of-type
li:nth-child(odd) {
background: #f9f9f9;
}
c) :not Selector
div:not(.active) {
opacity: 0.5;
}
2. Custom Properties (CSS Variables)
:root {
--main-color: #3498db;
--padding: 1rem;
}
.card {
color: var(--main-color);
padding: var(--padding);
}
3. Flexbox Deep Dive
Example:
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
Use cases:
- Centering
- Responsive menus
- Cards/grid-like layouts
4. Grid Layout (Advanced)
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.item {
grid-column: span 2;
grid-row: 1 / 3;
}
5. Media Queries (Responsive Design)
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
6. CSS Transitions and Transforms
Transitions:
.button {
transition: background 0.3s ease;
}
.button:hover {
background: #222;
}
Transforms:
.card:hover {
transform: scale(1.05) rotate(3deg);
}
7. CSS Animations
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fadeIn 2s ease-in-out;
}
8. Clamp(), Min(), Max() for Responsive Units
h1 {
font-size: clamp(1.5rem, 2.5vw, 3rem);
}
9. Advanced Positioning Techniques
Sticky:
header {
position: sticky;
top: 0;
background: white;
}
Z-index stacking:
.modal {
z-index: 999;
}
10. Layered Shadows and Effects
.card {
box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.2);
}
11. Dark Mode with CSS
body {
background: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background: #121212;
color: white;
}
}
12. CSS Grid + Flexbox Hybrid Layout
You can use Grid for main layout and Flexbox for internal card alignment or navbars.
13. Modern UI Tricks
- Glassmorphism
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
- Neumorphism
.neu {
box-shadow: 10px 10px 20px #ccc, -10px -10px 20px #fff;
}
14. Utility-First CSS (like Tailwind CSS)
You can write styles directly in class names:
<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">Button</div>
15. Tips for Mastery
- Use DevTools to inspect and debug CSS.
- Try CSS Challenges (like CSSBattle)
- Read real-world code on GitHub or CodePen
- Practice making pixel-perfect UIs from Dribbble/Behance designs
Would you like:
- A downloadable cheat sheet?
- A mini project using these advanced features?
- A tutorial using real-world design?
Let me know how you'd like to apply this next!
