Learn CSS
CSS is what makes the web beautiful. It controls colours, fonts, layouts and animations — everything visual you see on any webpage. Take plain HTML and turn it into something stunning.
CSS at a Glance
Selectors, properties, values. Write a rule, watch the page change instantly.
h1 {
color: #a855f7;
font-size: 2rem;
font-weight: 700;
font-family: 'Syne', sans-serif;
}
p {
color: #6B7280;
line-height: 1.7;
}▶ Preview
Styled heading with custom colour and font.
.card {
background: #0c1220;
padding: 24px;
margin: 16px;
border-radius: 12px;
border: 1px solid #06B6D4;
box-shadow:
0 4px 24px rgba(6,182,212,.2);
}▶ Preview
Card with padding, rounded corners and glow shadow.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 32px;
background: #111827;
}
.nav-links {
display: flex;
gap: 24px;
}▶ Preview
Navbar with logo left, links right using flexbox.
What You'll Learn
Six beginner-friendly modules — from your first selector to smooth animations.
Selectors & Properties
- How CSS works
- Element, class & ID selectors
- CSS properties & values
- Linking CSS to HTML
Colours & Backgrounds
- Named colours & hex codes
- RGB & RGBA
- Background images
- Gradients
Box Model & Spacing
- margin, padding, border
- Width & height
- box-sizing
- Display types
Text & Fonts
- font-family, size, weight
- Google Fonts
- text-align & decoration
- line-height & spacing
Flexbox & Grid
- display: flex
- justify-content & align-items
- display: grid
- grid-template-columns
Transitions & Animations
- transition property
- Hover effects
- @keyframes
- animation shorthand
Complete the Front-End trio
HTML gives the structure, CSS gives the style, JavaScript makes it interactive. Learn all three and you can build anything on the web.
Frequently Asked Questions
Do I need to know HTML before CSS?
Yes — CSS styles HTML elements, so you need to know basic HTML first. Learn the structure with HTML, then add CSS to make it look good. The two languages always work together.
What is the difference between class and ID in CSS?
An ID (#name) is unique — it should only be used once per page. A class (.name) can be reused on many elements. In practice you will use classes 95% of the time and reserve IDs for JavaScript or page anchors.
Is Flexbox or Grid better?
Both! Use Flexbox for one-dimensional layouts (a row of buttons, a navbar). Use Grid for two-dimensional layouts (a card grid, a full page layout). They complement each other — most projects use both.
What should I learn after CSS basics?
Responsive design with media queries, then a CSS framework like Tailwind CSS. After that, JavaScript to make your styled pages interactive. The HTML + CSS + JavaScript trio is the complete foundation of web development.
Ready to make the web beautiful?
Free. No signup. No downloads. Just start.
Start Learning CSSNo account required · Always free
The Story of CSS
Real history, real companies, and an honest look at where CSSshines and where it doesn't — not just a feature list.
Where it came from
CSS was proposed by Håkon Wium Lie in 1994 and became a W3C recommendation in 1996, created to solve a real problem: HTML authors were stuffing visual styling directly into HTML tags, making pages a nightmare to maintain. CSS separated 'what a page says' from 'how a page looks', a split that still defines web development today.
How it’s actually used today
Every visually designed website — from a personal blog to Amazon's storefront — relies on CSS for layout, colour, spacing, animation and responsive behaviour across phone, tablet and desktop screens. Modern CSS features like Grid and Flexbox have replaced older layout hacks (like float-based grids) that developers used for over a decade.
Strengths & trade-offs
CSS is declarative — you describe the end result rather than the steps to get there, which makes simple layouts genuinely simple. The trade-off is that complex, dynamic layouts can become difficult to reason about, and browser inconsistencies (though far rarer than they used to be) can still bite you on edge cases like older Safari versions.
What to learn next
JavaScript is the obvious next step for adding interactivity, but many developers also go deeper into CSS itself — Sass/Tailwind for productivity, or Grid and animation for advanced layout — before moving to a framework like React.