CSS makes web pages look good. This tutorial covers the ideas you need first, with short examples.
Direct answer
CSS is a set of rules that style HTML. Each rule picks an element (a selector) and sets properties like colour, size and spacing. Learn selectors, the box model (margin, border, padding), then Flexbox and Grid for layout. Practise by styling a real page.
How a CSS rule works
h1 {
color: #1f3a93;
font-size: 2rem;
}
h1 is the selector. Inside the braces are properties and values.
Selectors
p { line-height: 1.5; } /* every paragraph */
.card { padding: 16px; } /* anything with class="card" */
#intro { font-weight: bold; } /* the element with id="intro" */
Classes are the ones you'll use most.
The box model
Every element is a box:
- Content
- Padding inside the border
- Border
- Margin outside the border
.card {
padding: 16px;
border: 1px solid #ddd;
margin: 24px 0;
}
Flexbox: a row or column
.menu {
display: flex;
gap: 16px;
justify-content: space-between;
}
Flexbox lines items up and spaces them. Perfect for menus and rows of cards.
Grid: rows and columns
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
Grid makes three equal columns. Perfect for galleries.
Making it work on phones
Layouts need to adapt. See what is responsive web design.
Practice tips
- Style a page you've built with HTML.
- Change one value at a time and watch.
- Use the browser's inspect tool to experiment.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns a simple page into a real site: tidy cards, a proper header, galleries that line up and layouts that rearrange for phones. Start with HTML & CSS for Beginners if you're new. Both are free to start.
The bottom line
Learn the box model, then Flexbox and Grid. Everything else builds on them.
