HTML and CSS Tutorial
Learn HTML & CSS Together
HTML gives your page structure and CSS makes it look great.
This tutorial guides you through both, step by step.
Follow the integrated track to build webpages that are structured, responsive, and beautiful.
Start learning now »Practice as you go
Every chapter comes with editable examples and exercises so you can test the HTML markup and CSS styling together.
Example
Render a basic card with HTML and CSS:
HTML + CSS Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<section>
<h1>Welcome!</h1>
<p>This card mixes HTML structure with CSS styling.</p>
<button>Learn more</button>
</section>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f3f6f9;
margin: 0;
}
section {
max-width: 500px;
margin: 60px auto;
background: white;
padding: 24px;
border-radius: 6px;
}
h1 {
color: #04AA6D;
}
button {
background:#04AA6D;
color:white;
border:none;
padding:10px 18px;
border-radius:4px;
}
Click on the "Try it Yourself" button to see how HTML and CSS work together.
Keep exploring
Ready for more focused study?
Check out the standalone tutorials:
This integrated tutorial combines the best of both worlds so you can build real web projects faster.