CSS Tutorials
Learn how to style webpages with CSS through clear explanations, practical examples, reference guides, and an interactive HTML and CSS editor.
Learn CSS
CSS, or Cascading Style Sheets, is the language used to control the appearance and layout of HTML content. CSS can change colors, fonts, spacing, borders, backgrounds, sizes, positioning, and many other visual characteristics of a webpage.
This tutorial is designed to take you from the basics of CSS syntax and selectors through colors, typography, the box model, layout, responsive design, and the styling techniques used to create modern webpages.
What You’ll Learn
The CSS Tutorial is organized so you can begin with the fundamentals and gradually build your styling and layout skills as you move through each topic.
- How CSS rules, selectors, properties, and values work.
- How to add inline, internal, and external CSS to HTML.
- How the cascade, specificity, and inheritance determine which styles are applied.
- How to work with colors, backgrounds, borders, and transparency.
- How to style fonts, text, links, lists, images, tables, forms, and buttons.
- How width, height, padding, borders, and margins form the CSS box model.
- How to create webpage layouts using Flexbox and Grid.
- How media queries are used to create responsive webpages.
- How to test and experiment with CSS using the HTML Editor.
How to Use the CSS Tutorials
If you are new to CSS, begin with the first tutorial and work through the lessons in order. The early tutorials explain CSS syntax and how styles are connected to HTML before moving into selectors, properties, layout, and more advanced styling techniques.
Each tutorial includes explanations and practical examples showing how CSS affects HTML content. Many lessons also include examples that can be edited directly so you can change CSS properties and values and immediately see how those changes affect the webpage.
If you already know CSS, you can use the tutorial navigation and reference pages to jump directly to the topic or property you need.
Practice with the HTML Editor
CSS is much easier to learn when you can see the results of your changes. Throughout the tutorials, interactive examples allow you to edit HTML and CSS and view the results directly on the page. Selected examples also include a Play in Editor button that opens the same example in a full browser window, giving you more space to view, edit, and experiment with the code.
Try changing colors, font sizes, margins, padding, borders, widths, backgrounds, and other CSS properties. Experimenting with different values helps you understand not only what a property does, but how it affects other parts of the webpage.
Try Making Changes
Instead of only copying the examples, change them. Increase the padding, choose another color, change a font size, remove a declaration, or add another CSS property. Comparing the page before and after each change is one of the best ways to understand how CSS works.
Open HTML EditorThe Best Way to Learn CSS
The best way to learn CSS is to combine understanding the rules with hands-on experimentation. Learn one concept at a time, apply it to real HTML content, and then change the CSS to see how the browser responds.
- Understand basic HTML first. CSS styles HTML elements, so knowing how a webpage is structured makes CSS much easier to understand.
- Learn CSS syntax. Become familiar with selectors, properties, values, declarations, and rules.
- Study one topic at a time. Start with simple styling before moving into the cascade, box model, positioning, Flexbox, and Grid.
- Type the examples yourself. Writing CSS helps reinforce the relationship between selectors, properties, and values.
- Experiment in the HTML Editor. Change one property or value at a time and observe what happens.
- Build small webpage layouts. Combine typography, spacing, colors, borders, and layout techniques instead of practicing each feature only in isolation.
- Use the reference pages. You do not need to memorize every CSS property or value - learn how to find the information when you need it.
CSS References
Use the CSS reference guides when you need quick information about CSS properties, selectors, values, units, colors, default styles, and other common CSS topics.
Start Learning CSS
If you are new to CSS, start at the beginning and work through the tutorials in order. You will begin by learning what CSS is and how it works with HTML, then gradually move into selectors, properties, styling, and webpage layout.