Free beginner tutorial

CSS Tutorial for Beginners

CSS (Cascading Style Sheets) controls how HTML content looks, including its colors, spacing, typography and layout. This beginner guide introduces the core ideas and gives you small examples to try.

HTML provides the structure of a page; CSS describes its presentation. A stylesheet contains rules, and each rule selects one or more HTML elements and applies declarations such as color or spacing.

Connect CSS to an HTML page

Create a file named styles.css and link it inside the document head:

<link rel="stylesheet" href="styles.css">

Start with these CSS topics

CSS selectorsChoose the elements a style rule should match. The box modelUnderstand content, padding, borders and margins. CSS overflowManage scrolling, clipping and content that exceeds its box. Colors and backgroundsChoose readable text colors, solid surfaces, gradients and images. TypographyChoose readable font stacks, sizes, line height and text styles. CSS unitsChoose flexible lengths for text, spacing and responsive layout. Custom propertiesReuse colors and spacing values with CSS variables. Pseudo-classesStyle hover, focus, form states and elements by position.Pseudo-elementsStyle markers, selected text and decorative generated boxes. Transitions and motionAdd responsive interface feedback and support reduced-motion preferences.CSS transformsMove, rotate, scale and skew elements. Flexbox layoutAlign and distribute items in one direction.CSS GridBuild flexible layouts with rows and columns. Cascade and specificityUnderstand why one matching CSS rule wins. Responsive designAdapt page layouts to available screen space. PositioningPlace elements with relative, absolute and sticky rules. Keyframe animationsAnimate a sequence of styles and support reduced-motion preferences.

Try each rule in a separate CSS file and refresh the browser to see how it changes the page.

A practical order for learning CSS

Start with selectors so you can target elements, then learn the box model to control their size and spacing, then study overflow to manage content beyond a box. Add colors and backgrounds to style text and surfaces, then explore typography for readable type and CSS units for flexible sizing. Define reusable values with custom properties. Learn pseudo-classes to style interactive states, then pseudo-elements to style parts and decorative details. Next study the cascade and specificity. Learn Flexbox and Grid for layout, followed by responsive design and positioning, use transforms for visual movement, then make state changes clear with accessible transitions and keyframe animations.

How can I practice CSS?

Create a small HTML page and a linked stylesheet, change one rule at a time, and inspect the result in your browser. When a style does not appear, check that the stylesheet link path is correct and that your selector matches the HTML.

New to page structure? Begin with the HTML tutorial, then return here to style the elements you created.