The style Attribute

HTML handles meaning and CSS handles looks, but there is one attribute that lets you write CSS straight onto an element. It is useful in a few specific situations and a maintenance headache almost everywhere else. Knowing which is which is the whole lesson.

The rule

style styles one element; reuse belongs in a stylesheet.

The style attribute holds CSS declarations: property: value pairs separated by semicolons.

This is called an inline style. It applies to that one element only.

When it helps:

• A quick experiment while you are figuring out a design.
• A value calculated by a script, such as the width of a progress bar:

• A one-off value tied to specific content, such as a custom property holding a colour chosen by the user.

Why it hurts elsewhere:

• No reuse. Forty paragraphs with the same inline style means forty edits for one colour change. A class and one stylesheet rule means one edit.
• It wins too easily. Inline styles override normal stylesheet rules, so later designers struggle to change them.
• It mixes layers. Meaning and looks end up tangled in the same file, which makes both harder to read.

The better default is a class on the element and a rule in a stylesheet:

(There are three ways to add CSS: inline, internal and external. You will meet the other two when you study CSS. For now, recognise inline styles and know when they fit.)

The shortcut

Ask "Will anything else ever need this same look?" If yes, give it a class. Only a true one-off, or a value a script sets, stays inline.

The trap is fixing every visual problem with a quick style="..." and never moving it into a stylesheet.

Drills

Answer fast — trust the rule.

Remember

• style="property: value;" styles one element only.
• Shortcut: if anything else will need the look, use a class and a stylesheet.
• Trap: inline styles everywhere; they repeat, override too strongly, and mix meaning with looks.