Hands-On Introduction to Website Styling with CSS

Name: Hands-On Introduction to Website Styling with CSS
Rating: 4.8 (4 reviews)

Learn modern CSS from scratch with hands-on examples — layout, styling, and responsiveness without slides.

Created byLukasz Kallas

Last updated 5/2026

English

English [Auto],

What you'll learn

What CSS is and how it works with HTML
What CSS is and how it works with HTML
How selectors, specificity, inheritance, and the cascade work
How selectors, specificity, inheritance, and the cascade work
How to style text, fonts, and colors
How to work with CSS units
How the box model affects layout and spacing
How display types and positioning work
How to build layouts using Flexbox
How to apply basic responsive design using media queries

Course content

3 sections • 18 lectures • 2h 0m total length

Welcome!3:08
Explore how css brings web pages to life by styling layout, color, typography, spacing, and responsiveness through hands-on, no-slides coding in the browser.
Join Our Community0:04
What is CSS & How it Works4:47
Setup12:57
Set up a simple CSS project by creating index.html and style.css, link CSS, and use VS Code with live server to preview changes across Windows, Linux, or OS X.

Selectors8:42
Explore CSS selectors, including element selectors, class selectors (dot notation), and id selectors (hash notation) to target h1 and p elements. Use reusable class blocks and grasp cascade and specificity.
Specificity8:36
Explore css specificity by combining selectors and building intuition for how descendants, classes, IDs, and elements determine which styles apply. Practice with a container to observe the cascade.
Inheritance & Order8:49
Explore how CSS inheritance and the cascade shape styles, showing how color inherits from parent while borders do not, and how specificity and source order decide applied rules.
Colors & Units12:14
Explore various css color definitions, including named, hex, and rgb with opacity, and learn flexible units like px, %, em, and rem to build responsive layouts.
Text Formatting8:30
Explore CSS text styling by using h1 and p selectors, rem-based font sizes, font family stacks, and font weight to improve readability and typography.
Box Model8:43
Understand the CSS box model, including content, padding, border, and margin, and how width is calculated. Learn how border-box sizing includes padding and border for intuitive sizing.
Display Property6:10
Explore CSS display types, showing how block elements start new lines and fill width, inline elements stay inline, and inline-block enables width and padding.
Position8:38
Explore css positioning, including static, relative, absolute, and fixed, and learn how relative and absolute interplay with the nearest positioned ancestor, while fixed anchors the viewport for navigation.
Flexbox7:09
Explore how flexbox aligns items and distributes space to build responsive layouts by turning a container into a flexbox and using justify-content, align-items, and flex-direction.
Responsive Design8:29
Learn to build responsive layouts with flexbox by controlling flex items, enabling wrapping, setting min-width, and using align-self, then explore media queries and CSS grid as advanced options.
Media Query7:14
Explore responsive design with media queries and screen width-based rules to adapt layouts across devices, using flexbox, wrapping, and adaptive font sizing for smaller screens.

Requirements

Basic understanding of HTML

Description

This course is a practical, beginner-friendly introduction to CSS, designed for anyone who wants to understand how styling and layout work on the web after already knowing some HTML basics.

CSS is what turns plain HTML into real, usable, and visually appealing websites. Before moving on to JavaScript or frontend frameworks, it’s essential to understand how CSS behaves, how styles are applied, and how layout works.

In this course, everything is done hands-on as all my other courses, so if you already enrolled in any other - you know exactly what to expect.
There are no slides — we work directly in the code editor, write real CSS, refresh the browser, and immediately see the results.

We start with the basics of how CSS works with HTML and how the browser applies styles. Then, step by step, we cover selectors, specificity, the cascade, text styling, colors, units, layout fundamentals, Flexbox, and responsive design.

Instead of memorizing properties, the goal of this course is to help you understand how CSS thinks, so you can debug issues, reason about styles, and build layouts with confidence.

This course is part of the Hands-On Introduction series and follows the same structure and teaching style as my other courses.

Who this course is for:

Students who know HTML and want to style their pages
Beginners learning frontend development
Aspiring web and frontend developers

Hands-On Introduction to Website Styling with CSS

What you'll learn

Explore related topics

Course content

Welcome & Setup4 lectures • 21min

CSS Basics11 lectures • 1hr 33min

Ending3 lectures • 6min

Requirements

Description

Who this course is for: