CSS — Complete Beginner Tutorial
6 modules · 14 examples · Click ▶ Run to see the live browser preview
💡 CSS is visual!
Each example has a styles.css and index.html tab. Hit ▶ Run to see a live browser preview.
Selectors & Properties
CSS stands for Cascading Style Sheets. You write rules that say: "Find this element, and apply these styles to it." Every rule has a selector (what to target) and declarations (what to change). It is that simple.
Your First CSS Rule
A CSS rule has two parts: the selector (which elements to style) and the declaration block (the styles). Inside curly braces {}, you write property: value pairs. The most common selectors are element names (h1, p), classes (.myclass), and IDs (#myid).
/* Element selector — targets ALL h1 tags */
h1 {
color: #a855f7;
font-size: 2rem;
}
/* Element selector — targets ALL p tags */
p {
color: #9CA3AF;
font-size: 1rem;
line-height: 1.7;
}
/* Class selector — starts with a dot */
.highlight {
color: #f59e0b;
font-weight: bold;
background: rgba(245,158,11,0.1);
padding: 4px 8px;
border-radius: 4px;
}
/* ID selector — starts with a hash */
#special {
color: #00C896;
text-decoration: underline;
}Classes (.) can be reused on many elements. IDs (#) should be unique — only one element per page. In practice, use classes almost always and avoid IDs for styling.
How to Link CSS to HTML
There are three ways to add CSS. External (a separate .css file — best practice), internal (inside a <style> tag in <head>), and inline (directly on an element with style=""). External is best because you can reuse one file across the whole website.
/* This would be in your styles.css file */
body {
font-family: sans-serif;
background: #060912;
color: white;
margin: 0;
padding: 20px;
}
h1 {
color: #a855f7;
}Always use an external .css file for real projects. It keeps your HTML clean and lets you change the styling of the entire site by editing one file.
Colours & Backgrounds
CSS gives you many ways to specify colours. Named colours (red, blue), hex codes (#FF0000), RGB values, and HSL. For transparency, use RGBA or HSLA. Backgrounds can be solid colours, gradients, or images.
Colour Formats
All four formats below produce colours. Hex codes are most common in web design. RGB lets you mix Red, Green, Blue from 0-255. RGBA adds an alpha (opacity) channel from 0 (invisible) to 1 (fully opaque).
.named { color: coral; }
.hex { color: #a855f7; }
.rgb { color: rgb(168, 85, 247); }
/* rgba — last value is opacity (0-1) */
.rgba {
color: white;
background: rgba(168, 85, 247, 0.4);
padding: 4px 8px;
border-radius: 4px;
}Hex codes are 6 characters: #RRGGBB. Each pair is 00-FF (0-255 in hex). Pure red = #FF0000, pure green = #00FF00, pure blue = #0000FF, white = #FFFFFF, black = #000000.
Backgrounds & Gradients
The background property sets the background of an element. Use a solid colour, a gradient (smooth colour blend), or an image. Gradients are incredibly useful for modern hero sections and buttons.
.solid {
background: #1e1b4b;
color: white;
padding: 16px;
border-radius: 8px;
margin-bottom: 8px;
}
.linear {
background: linear-gradient(135deg, #a855f7, #ec4899);
color: white;
padding: 16px;
border-radius: 8px;
margin-bottom: 8px;
}
.radial {
background: radial-gradient(circle, #a855f7, #1e1b4b);
color: white;
padding: 16px;
border-radius: 8px;
margin-bottom: 8px;
}
/* Glass morphism effect */
.glass {
background: rgba(168, 85, 247, 0.1);
border: 1px solid rgba(168, 85, 247, 0.3);
backdrop-filter: blur(10px);
color: white;
padding: 16px;
border-radius: 8px;
}linear-gradient(135deg, colour1, colour2) — the first value (135deg) is the angle. 0deg = top to bottom, 90deg = left to right, 135deg = diagonal. You can add more colours: linear-gradient(135deg, red, blue, green).
Box Model & Spacing
Every HTML element is a rectangular box. The box model describes the four layers around content: padding (inner space), border (the edge), and margin (outer space). Understanding this is the key to controlling spacing and layout.
Margin, Padding & Border
Content is in the centre. Padding creates space INSIDE the border (between content and border). Border is the visible edge. Margin creates space OUTSIDE the border (between this element and its neighbours). Think of a picture frame: the art is content, the mat is padding, the frame is border, and the wall space is margin.
.box {
/* Content area */
width: 200px;
/* PADDING — space inside the border */
padding: 20px;
/* BORDER — the visible edge */
border: 2px solid #06B6D4;
border-radius: 8px;
/* MARGIN — space outside the border */
margin: 16px;
/* Styling */
background: rgba(6,182,212,0.08);
color: white;
font-size: 14px;
}Shorthand padding: 20px sets all four sides. padding: 10px 20px sets top/bottom and left/right. padding: 5px 10px 15px 20px sets top, right, bottom, left (clockwise). Same rules apply to margin and border-width.
box-sizing & Display Types
By default, padding and border ADD to an element's width (confusing!). box-sizing: border-box makes width include padding and border — much more predictable. Display types control how elements sit on the page.
/* Apply border-box to everything — best practice! */
* {
box-sizing: border-box;
}
.block-el {
display: block; /* default for divs */
background: rgba(6,182,212,0.1);
border: 1px solid #06B6D4;
padding: 10px;
margin-bottom: 6px;
color: white;
border-radius: 6px;
}
.inline-el {
display: inline; /* default for spans */
background: rgba(168,85,247,0.2);
color: #c084fc;
padding: 4px 8px;
border-radius: 4px;
}
.inline-block-el {
display: inline-block;
width: 80px;
height: 60px;
background: rgba(0,200,150,0.1);
border: 1px solid #00C896;
color: #34d399;
text-align: center;
line-height: 60px;
border-radius: 6px;
margin: 4px;
}Put * { box-sizing: border-box; } at the top of every CSS file you write. This makes sizing elements predictable. Without it, adding padding secretly makes elements wider and breaks your layout.
Text & Fonts
Typography is one of the most powerful tools in design. CSS gives you full control over fonts, sizes, weights, spacing and alignment. Google Fonts gives you access to hundreds of free professional fonts with one line of code.
Font Properties
font-family sets the typeface. font-size sets how big. font-weight controls boldness (100=thin, 400=normal, 700=bold, 900=black). font-style can be italic. Always list fallback fonts in case the first one is unavailable.
/* font-family: name, fallback, fallback */
p {
font-family: 'Segoe UI', system-ui, sans-serif;
}
.thin { font-weight: 300; color: #9CA3AF; }
.normal { font-weight: 400; color: #D1D5DB; }
.bold { font-weight: 700; color: #F9FAFB; }
.black { font-weight: 900; color: #FFFFFF; }
.italic { font-style: italic; color: #a855f7; }
.small { font-size: 12px; color: #6B7280; }
.large { font-size: 2rem; color: #00C896; }Use rem for font sizes instead of px. 1rem = 16px by default. Using rem means if the user changes their browser font size, your text scales with it — making your site more accessible.
Text Alignment, Spacing & Decoration
text-align positions text horizontally. line-height controls the space between lines — 1.5 to 1.7 is comfortable for body text. letter-spacing adjusts space between letters. text-decoration adds underlines, strikethroughs and more.
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.spaced {
line-height: 1.7;
color: #9CA3AF;
font-size: 13px;
}
.tracked {
letter-spacing: 0.15em;
text-transform: uppercase;
font-size: 11px;
color: #a855f7;
font-weight: 700;
}
.no-underline {
text-decoration: none;
color: #00C896;
}
.no-underline:hover {
text-decoration: underline;
}
.strike {
text-decoration: line-through;
color: #6B7280;
}letter-spacing: 0.1em to 0.15em on uppercase text is a classic design trick — it makes headings and labels look more polished and professional. em units are relative to the current font size.
Flexbox & Grid
Flexbox and Grid are the two modern layout systems in CSS. Flexbox is for one-dimensional layouts — arranging items in a row or a column. Grid is for two-dimensional layouts — rows AND columns at the same time. Together they replace every old layout hack.
Flexbox — One Dimension
Add display: flex to a container and its children become flex items. justify-content aligns items on the main axis (horizontal by default). align-items aligns them on the cross axis (vertical). gap adds space between items.
.flex-row {
display: flex;
flex-direction: row; /* default */
justify-content: space-between; /* spread items */
align-items: center;
gap: 12px;
background: rgba(245,158,11,0.05);
padding: 16px;
border-radius: 8px;
border: 1px solid rgba(245,158,11,0.2);
margin-bottom: 12px;
}
.flex-col {
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(245,158,11,0.05);
padding: 16px;
border-radius: 8px;
border: 1px solid rgba(245,158,11,0.2);
}
.item {
background: rgba(245,158,11,0.15);
color: #fbbf24;
padding: 10px 18px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
}The six most used flexbox properties: display:flex, flex-direction, justify-content, align-items, gap, and flex-wrap. Learn these six and you can handle 90% of real layouts.
CSS Grid — Two Dimensions
Grid lets you define rows AND columns at the same time. grid-template-columns defines how many columns and how wide. The fr unit means "fraction of available space". repeat(3, 1fr) creates 3 equal columns.
.grid-3 {
display: grid;
/* 3 equal columns */
grid-template-columns: repeat(3, 1fr);
/* Space between cells */
gap: 12px;
padding: 16px;
background: rgba(245,158,11,0.04);
border-radius: 8px;
}
.gitem {
background: rgba(245,158,11,0.12);
color: #fbbf24;
padding: 20px;
border-radius: 8px;
text-align: center;
font-weight: 600;
border: 1px solid rgba(245,158,11,0.2);
}
/* Responsive: 1 column on small screens */
@media (max-width: 600px) {
.grid-3 {
grid-template-columns: 1fr;
}
}The fr unit is unique to Grid — it stands for "fraction". repeat(3, 1fr) creates 3 columns that each take 1/3 of the available space. You can mix units: grid-template-columns: 200px 1fr 2fr gives a fixed sidebar and two flexible columns.
Transitions & Animations
CSS can animate elements without any JavaScript. Transitions create smooth changes when a property changes (like on hover). Animations use @keyframes to define complex multi-step sequences that run automatically.
Transitions — Smooth Hover Effects
The transition property makes property changes animate smoothly instead of jumping instantly. Syntax: transition: property duration timing-function. Add it to the element, and any matching property change will animate — most commonly triggered by :hover.
.btn {
background: #EF4444;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin-right: 10px;
/* transition: property duration */
transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
background: #dc2626; /* darker red */
transform: translateY(-2px);
}
.btn-scale {
background: transparent;
color: #a855f7;
padding: 12px 24px;
border: 2px solid #a855f7;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-scale:hover {
background: #a855f7;
color: white;
transform: scale(1.05);
}
.card-hover-demo {
margin-top: 12px;
padding: 20px;
border-radius: 10px;
border: 1px solid rgba(239,68,68,0.25);
color: #9CA3AF;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
cursor: pointer;
}
.card-hover-demo:hover {
border-color: #EF4444;
box-shadow: 0 8px 30px rgba(239,68,68,0.2);
transform: translateY(-4px);
color: white;
}transition: all 0.3s ease animates ALL changing properties. It is convenient but can cause unintended animations. Name specific properties (transition: background 0.3s, transform 0.2s) for more control and better performance.
@keyframes — CSS Animations
@keyframes define a sequence of style changes over time. You name the animation, define what happens at 0% (start) and 100% (end) — or any point in between. Then apply it with the animation property.
/* Define the animation sequence */
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.97); }
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* Apply animations */
.pulse-box {
animation: pulse 2s ease-in-out infinite;
}
.slide-box {
animation: slideIn 0.6s ease forwards;
}
.spin-box {
animation: spin 2s linear infinite;
display: inline-block;
}
.bounce-box {
animation: bounce 1s ease-in-out infinite;
}animation shorthand: animation: name duration timing-function delay iteration-count direction. The most common values: animation: pulse 2s ease-in-out infinite. "infinite" makes it loop forever — remove it to play only once.
You finished the CSS tutorial!
You now know selectors, colours, the box model, text styling, flexbox, grid, and animations. These are the building blocks of every beautiful website on the internet.