The structure and style of every web page. There's no "Run and check the answer" here the way there is for Python or C — instead, try the live editor below: type HTML/CSS and watch it render instantly, exactly like a real browser.
Edit either box — the preview updates as you type.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html><h1>–<h6> <!-- headings, biggest to smallest -->
<p> <!-- paragraph -->
<a href="..."> <!-- link -->
<img src="..."> <!-- image (self-closing) -->
<div> <!-- generic block container -->
<span> <!-- generic inline container -->
<ul><li> <!-- bullet list + list item --><form>
<label>Name: <input type="text"></label>
<input type="email" placeholder="[email protected]">
<button type="submit">Send</button>
</form>p { } /* every <p> */
.card { } /* every element with class="card" */
#header { } /* the one element with id="header" */
div p { } /* every <p> inside a <div> */
a:hover { } /* a link, only while the mouse is over it */Every HTML element is a rectangular box: content, surrounded by padding, then a border, then margin.
.card {
padding: 16px; /* space INSIDE the border */
border: 1px solid #ccc;
margin: 20px; /* space OUTSIDE the border */
box-sizing: border-box; /* padding/border count INSIDE the width — turn this on almost always */
}The go-to tool for arranging items in a row or column.
.container {
display: flex;
justify-content: space-between; /* spread items along the main axis */
align-items: center; /* center items on the cross axis */
gap: 12px; /* space between items */
}For real two-dimensional layouts — rows AND columns at once.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 16px;
}Media queries change your CSS based on screen size — how one site works on both phones and desktops.
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr; /* stack to 1 column on small screens */
}
}