Inline CSS

You are testing a colour for the café's prices and want to see it right now, on one element, without opening another file. The style attribute does exactly that. It is also the quickest route to a stylesheet nobody can maintain.

The rule

Inline style: one element, one change, right there in the tag.

Inline CSS lives in an element's style attribute. Inside the quotes you write declarations, each a property, a colon, a value and a semicolon:

What it gives you:

• It affects only that element (and whatever its children inherit, such as text colour).
• It beats any rule in a stylesheet that targets the element with a normal selector, whether that rule uses a class, an id or anything else.

What it costs you:

• No reuse. Twelve prices means twelve copies. Changing the green means twelve edits, and missing one leaves the menu inconsistent.
• No selectors. An inline style cannot say "when hovered" or "on narrow screens", because those need a selector or a media query, and a style attribute has neither.
• Mixed layers. Looks leak back into the HTML, which is the very thing CSS exists to avoid.

Inline styles still have honest uses: a quick experiment, HTML emails (many email programs strip style elements and linked files), and values a script sets on the fly, such as the position of an element being dragged.

The shortcut

Count the copies. If the style would ever need to appear on more than one element, or survive a redesign, it does not belong inline.

The trap: an inline style silently overrides the stylesheet, so a later designer changes .price and nothing happens on the one price that still carries style="color: green;".

Drills

Answer fast — trust the rule.

Remember

• Inline style: one element, written in its style attribute, and it beats normal stylesheet rules.
• Count the copies: more than one means write a rule instead.
• Trap: forgotten inline styles quietly block later stylesheet changes.