HTML CSS
HTML describes what content means; CSS determines how it looks. Keeping them separate lets several pages share a visual language without duplicating presentation rules inside every element.
How it works
- An external stylesheet is connected with link rel="stylesheet" inside head. Its href is resolved relative to the HTML document unless a base URL changes resolution.
- A style element holds page-specific CSS. An inline style attribute affects one element. External stylesheets are usually easier to reuse.
- A selector such as .notice matches a class. Rules can compete through the cascade, specificity, importance, and source order.
A practical example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Workshop notes</title>
<link rel="stylesheet" href="styles/site.css">
</head>
<body>
<p class="notice">Bring your notebook.</p>
</body>
</html>
Create styles/site.css next to the appropriate project directory and give .notice a style. The HTML stays focused on the message while the stylesheet controls its appearance.