What CSS actually is — Blank to Browser

1. Principle

CSS is the language of presentation. It tells the browser how the HTML should look — colors, spacing, fonts, layout. HTML stays about meaning; CSS handles appearance. Always two files, two concerns.

There are three places you can put CSS:

Where	Looks like	Use when
Inline	`<p style="color: red">`	Never (almost). One-off overrides only.
Internal	`<style>...</style>` in `<head>`	Quick prototypes, single-page documents.
External	`<link rel="stylesheet" href="styles.css">`	Always. Real projects.

External CSS is right for almost every site you will ever build. Why:

Browsers cache the .css file — same styles across many pages, downloaded once.
HTML stays clean and scannable.
You can change the entire site's appearance by editing one file.

2. Do (you try)

Two steps.

Step 1 — Create a CSS file. In VS Code, in your my-portfolio folder, right-click → New File → name it styles.css. Paste:

cssstyles.css

body {
background: lightyellow;
}

Save.

Step 2 — Link it from your HTML. In your <head>, add this line (after the <meta> tags, before the <title>):

htmlindex.html — head

<link rel="stylesheet" href="styles.css">

Save your HTML. Refresh the browser.

3. Verify (how you know)

The page background should now be light yellow.

If it isn't:

Spelling. The href must match the file name exactly: styles.css (lowercase, no typos).
Save. Did you save both files? VS Code shows a dot on the tab name when unsaved.
Right folder. Both files must be in the same folder (my-portfolio).

The swap test. Now comment out the link tag like this: . Save. Refresh. Background goes back to white — proof that the linked file was driving the appearance.

Uncomment it back. Yellow returns. The link is the bridge between your HTML and your styles.

4. Reference

Locked. Try it yourself first.