Utilizor
Contact Us
‹ Learn

CSS Tutorial

The language for styling web pages.

Learn CSS

CSS is the language we use to style a Web page.

With CSS you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Utilizor CSS Tutorial

Study our CSS Tutorial for free, no registration needed.

CSS Course + Certificate

Upgrade your learning with our interactive CSS Course and Get Certified.

Learning by Examples

With our "Try it Yourself" editor, you can edit the CSS code and view the result in the browser.

Example

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS Examples

This tutorial supplements all explanations with clarifying examples.

CSS Exercises

Many chapters in this tutorial end with an exercise where you can check your level of knowledge.

Exercise

Set the color of the h1 element to blue.

h1 {
  color: blue;
}

CSS Quiz Test

Test your CSS skills with our CSS Quiz!

Track Your Progress

Create a free Utilizor account and get access to more features and learning materials:

  • View your completed tutorials, exercises, and quizzes
  • Keep an eye on your progress and daily streaks
  • Set goals and create learning paths
  • Create your own personal website

Your Learning Dashboard

CSS Progress45%
Daily Goal1/3 Lessons

🔥 3 Day Streak!

Note: This is an optional feature. You can study at Utilizor without creating an account.

Complete CSS Course Outline

CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To
CSS Comments
CSS Errors
CSS Colors
CSS Backgrounds
CSS Borders
CSS Margins
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline
CSS Text
CSS Fonts
CSS Icons
CSS Links
CSS Lists
CSS Tables
CSS Display
CSS Max-width
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Opacity
CSS Navigation Bars
CSS Dropdowns
CSS Image Gallery
CSS Image Sprites
CSS Attr Selectors
CSS Forms
CSS Counters
CSS Units
CSS Specificity
CSS !important
CSS Math Functions
CSS Optimization
CSS Accessibility
CSS Website Layout
CSS Rounded Corners
CSS Border Images
CSS Backgrounds Advanced
CSS Colors Advanced
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Text Effects
CSS Custom Fonts
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
CSS Animations
CSS Tooltips
CSS Image Styling
CSS Image Modal
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Buttons
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Variables
CSS @property
CSS Box Sizing
CSS Media Queries
CSS MQ Examples
Flexbox Intro
Flex Container
Flex Items
Flex Responsive
Grid Intro
Grid Columns/Rows
Grid Lines
Grid Container
Grid Item
CSS @supports
RWD Intro
RWD Viewport
RWD Grid View
RWD Media Queries
RWD Images
RWD Videos
RWD Frameworks
RWD Templates
SASS Tutorial
CSS Examples
CSS Templates
CSS Editor
CSS Snippets
CSS Quiz
CSS Exercises
CSS Website
CSS Syllabus
CSS Study Plan
CSS Interview Prep
CSS Bootcamp
CSS Certificate
CSS Reference
CSS Selectors
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS At-rules
CSS Functions
CSS Reference Aural
CSS Web Safe Fonts
CSS Animatable
CSS Units
CSS PX-EM Converter
CSS Colors
CSS Color Values
CSS Default Values
CSS Browser Support