Add CSS to a page
Add CSS to HTML
Connect an external stylesheet, use a style element when appropriate, and understand why inline styles are difficult to maintain.
6 minute lesson
~~~
Link a stylesheet from the document head:
<link rel="stylesheet" href="/styles.css">External files keep presentation separate and can be cached across pages.
For a small isolated example, use style:
<style>
body {
font-family: system-ui, sans-serif;
}
</style>An inline style applies directly to one element:
<p style="color: rebeccapurple">Hello</p>Inline styles are hard to reuse and override, so avoid them for normal site styling.
The order of linked stylesheets matters when otherwise equal rules compete. Put broad foundations first and more specific component or page styles later.
Lesson completed