<!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/PUCD_2035_F_FEHRENBACH_F22.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>
/* 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; }