<!doctype html>
<html>
<head>
<title>Attribute</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>
You might use these to differentiate <a href="/">an internal link</a>
from an <a href="https://newschool.edu">an external one</a>,
or ones for <a href="/assets/PMCD_5001_F24.pdf">PDF files</a>.
</p>
<details>
<summary>Or an open/close state for details/summary</summary>
<p>This won’t be visible to start, but should be teal when you can see it.</p>
</details>
</body>
</html>
index.html
/* Links that start with `https://` are external. */
a[href^='https://'] { color: teal; }
/* Links with `.pdf` anywhere in them. */
a[href*='.pdf'] { color: green; }
/* The `open` attribute is added when you toggle. */
details[open] { color: gray; }