CSS Tutorial
CSS is the language we use to style an HTML page.
CSS tells the browser how HTML elements should look on screen.
This tutorial teaches you CSS from basic to advanced.
Examples in Each Chapter
This CSS tutorial has over 700 examples.
With the online editor, you can change the CSS and click a button to see the result.
CSS Example
This page uses CSS to set a light blue background, style the heading, and change the paragraph font.
<style> block in the head.
Set the page background to light blue. Make the <h1> white and centered. Give paragraphs the verdana font at 20px. Include a heading and a short paragraph so the styles are visible.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. It is styled with CSS.</p>
</body>
</html>
CSS Examples
Learn from over 700 examples. With the editor, you can change the CSS and click a button to view the result.
Use the Menu
We recommend reading this tutorial in the order listed in the menu.
On a large screen, the menu stays on the left. On a small screen, open the menu by clicking the top menu sign.
CSS Templates
We have built some responsive templates for you to use.
You are free to change, save, share, and use them in all your projects.
CSS Exercises
Many chapters in this tutorial end with an exercise where you can check what you have learned.
CSS Quiz
Test your CSS skills with a quiz.
CSS References
At PromptCookbook you will find complete CSS references for all properties and selectors, with syntax, examples, browser support, and more.