Attaching CSS

CSS reaches a page three ways: a linked stylesheet file, a style element in the page, or a style attribute on one element. The attribute wins over both, and cannot be reused.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Knowing where a style comes from is half of debugging. A colour that will not change is usually an inline style or a later file you did not know was loaded.

How to think about it

One linked file for the site. A style element for a one-page demo. An inline style almost never, because the next person cannot override it from the stylesheet.

Worked example

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

In the head: one shared file, cached once, used by every page.

<style> p { color: rgb(0, 128, 0); } </style>

A style element: CSS inside the page. Fine for one page or a demo.

<p style="color: rgb(200, 0, 0)">Inline</p>

A style attribute on one element: it beats the stylesheet, and no rule can reuse it.

<p>Shared</p>

This paragraph takes the style element's green; the inline one stays red.

Your turn

Attach the site's stylesheet.

<link rel="stylesheet" ="site.css">

The trap

Fixing a colour with an inline style because the stylesheet 'did not work'. It works; something more specific was winning, and inline hides that instead of fixing it.

Practise attaching CSS on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.