Structure and style
HTML defines structure. CSS defines how it looks. Together they create visual interfaces.
Essential HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
</head>
<body>
<header>
<h1>Welcome</h1>
</header>
<main>
<p>Main content</p>
</main>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
Important tags
| Tag | Use |
|---|---|
<div> | Generic container |
<span> | Inline text |
<a href=""> | Links |
<img src=""> | Images |
<button> | Buttons |
<input> | Form fields |
<form> | Forms |
Modern CSS
/* Variables */
:root {
--color-primary: #3b82f6;
--spacing: 1rem;
}
/* Styles */
.container {
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing);
}
.button {
background: var(--color-primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
}
Flexbox
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Grid
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Tailwind CSS
Instead of writing CSS, use utility classes:
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Click me
</button>
💡 Recommendation: Use Tailwind for new projects.