CSS Learning Roadmap
1. Syntax
Learn selectors, properties and values.
2. Box Model
Understand margin, padding and borders.
3. Flexbox
Build flexible one-dimensional layouts.
4. Grid
Create powerful row and column layouts.
CSS Syntax and Selectors
CSS (Cascading Style Sheets) controls the appearance and layout of HTML elements.
Basic CSS Syntax
selector {
property: value;
}Example
p {
color: blue;
font-size: 18px;
}CSS Selectors
Element Selector
p {
color: blue;
}Selects all paragraph elements.
Class Selector
.important {
color: red;
}
A class selector starts with .
ID Selector
#heading {
color: green;
}
An ID selector starts with #.
Group Selector
h1, h2, p {
font-family: Arial;
}Applies the same styles to multiple elements.
1. Colors, Fonts and Text
Colors
h1 {
color: red;
}
.box {
background-color: #f5f5f5;
}Typography
body {
font-family: Arial, sans-serif;
}
p {
font-size: 18px;
line-height: 1.6;
}CSS controls font size, weight, alignment and spacing.
2. CSS Box Model
Every HTML element can be treated as a box consisting of content, padding, border and margin.
The four parts
- Content
- Padding
- Border
- Margin
box-sizing
* {
box-sizing: border-box;
}border-box makes sizing
layouts easier to manage.
3. Margin, Padding and Borders
Margin
Creates space outside an element.
.box {
margin: 20px;
}Padding
Creates space inside an element.
.box {
padding: 20px;
}Border
Adds a visible boundary around an element.
.box {
border: 2px solid black;
border-radius: 10px;
}4. Display and Positioning
Block
display: block;
Usually takes the available width.
Inline
display: inline;
Occupies only the required space.
Relative
position: relative;
Moves relative to its normal position.
Fixed
position: fixed;
Stays fixed relative to the viewport.
5. Flexbox
Flexbox is useful for arranging elements in a one-dimensional row or column.
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}Live Example
Important Flexbox Properties
flex-direction
justify-content
align-items
flex-wrap
gap
6. CSS Grid
CSS Grid is useful for two-dimensional layouts involving rows and columns.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}7. Responsive Design
Responsive design allows websites to work properly on desktops, tablets and mobile devices.
<meta name="viewport"
content="width=device-width, initial-scale=1.0">Responsive Images
img {
max-width: 100%;
height: auto;
}Relative Units
8. Media Queries
Media queries allow CSS rules to change according to the screen size.
@media (max-width: 768px) {
.container {
width: 100%;
}
}sm, md,
lg, xl and xxl.
9. Animations and Transitions
Transition
button {
background: blue;
transition: 0.3s;
}
button:hover {
background: green;
}Transform
button:hover {
transform: scale(1.05);
}CSS Animation
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.heading {
animation: fadeIn 1s ease-in;
}Final Mini Project
Combine what you have learned by creating a responsive CSS learning page.
Colors
Learn colors, fonts and text styling.
Box Model
Understand margin, padding and borders.
Flexbox
Build flexible layouts with Flexbox.
CSS Grid
Create row and column based layouts.
Responsive Design
Make websites work on all screen sizes.
Animation
Add transitions and animations.
Your CSS Learning Progress
Complete each topic to build a strong foundation in modern CSS.