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.
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
html
<!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>
css
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 "Run" button to see how HTML and CSS work together.
Keep exploring
Ready for more focused study?
Check out the standalone tutorials:
HTML Tutorial CSS Tutorial
This integrated tutorial combines the best of both worlds so you can build real web projects faster.