HTML & CSS

HTML says what things are; CSS says what they look like. Together they build every page you have ever seen.

A web page is two layers: HTML gives it structure and meaning, CSS gives it appearance. Keeping them separate is what makes pages maintainable.

HTML: structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>A paragraph with a <a href="/about">link</a>.</p>
  </body>
</html>

Elements nest inside each other, and many take attributes like href or class. Use elements for what they mean — <nav>, <article>, <button> — not just how they look. That is “semantic HTML,” and it helps search engines and screen readers.

CSS: style

CSS is a list of rules. Each has a selector and a block of declarations:

h1 {
  font-size: 32px;
  color: #2864d7;
}

.card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

Selectors target elements by tag (h1), class (.card), or id (#main). When two rules conflict, the more specific one wins — this is “specificity.”

The box model

Every element is a box with content, padding, a border, and margin around it. One line saves a lot of surprises:

* { box-sizing: border-box; }

It makes width include padding and border, so sizes add up the way you expect.

Layout

Two modern tools do almost all layout:

• Flexbox — arrange things in a row or column: display: flex.
• Grid — two-dimensional layouts: display: grid.