What is CSS and How to Connect It
First steps with styles: connecting and CSS selectors
CSS — clothing for HTML
HTML is the bare body (structure). CSS is the clothes, makeup, hairstyle. Without CSS a page looks like a Word document from the 1990s: black text on a white background. CSS transforms the same HTML into a modern, stylish design.
Three ways to connect CSS
1. External file (best practice)
<!-- In the <head> of the HTML file -->
<link rel="stylesheet" href="style.css">A style.css file with all styles is linked to the page.
2. Inside <head> (internal)
<style>
body { background: #f0f0f0; }
h1 { color: blue; }
</style>3. The style attribute (inline — avoid this)
<p style="color: red; font-size: 18px;">Text</p>Bad: styles scattered throughout HTML, hard to maintain.
Rule: always use an external CSS file.
CSS selectors — how to target an element
A selector tells the browser which elements to apply a style to:
/* Tag — all <p> elements on the page */
p { color: gray; }
/* Class — all elements with class='btn' */
.btn { background: blue; color: white; }
/* ID — only the element with id='header' */
#header { height: 80px; }
/* All elements */
* { box-sizing: border-box; }
/* Descendant — <a> inside <nav> */
nav a { text-decoration: none; }
/* Hover — on mouse over */
.btn:hover { background: darkblue; }Specificity (style priority): inline style > #id > .class > tag
If two rules conflict — the more specific one wins.
A real basic CSS file. rem — a relative unit based on the browser's root font size (usually 16px). 1rem = 16px, 2.5rem = 40px.
Always start CSS with * { box-sizing: border-box; margin: 0; padding: 0; } — this is a CSS Reset. It removes the various default browser margins and unifies behaviour across browsers.