Skip to main content

What does the style attribute do?

HTMLJunior~1 min read
Suggest an edit

The style attribute is used for inline styling of an HTML element, that is, for setting CSS properties directly inside the tag, without a separate stylesheet file.

It lets you quickly change the appearance of a specific element, but it is usually applied only for one-off or test cases, not for full-scale markup.

1. Syntax

The style attribute is written inside the opening tag, and its value is a set of CSS properties separated by semicolons:

html
<p style="color: blue; font-size: 18px;">Example text</p>

Here:

  • color: blue; - text color;
  • font-size: 18px; - font size.

2. What can be set via style

Almost any CSS property:

  • Color (color, background-color)
  • Size and spacing (width, height, margin, padding)
  • Font (font-family, font-size, font-weight)
  • Borders (border)
  • Alignment (text-align, display, position)

Example:

html
<div style="background-color: #eee; padding: 10px; border-radius: 8px;"> This is a block styled via style </div>

3. Priority of inline styles

If an element has:

  • an external CSS file,
  • an internal <style> in <head>,
  • and the style attribute,

then the inline style has the highest priority.

Example:

html
<p style="color: red;">This text will be red even if CSS sets a different color.</p>

4. When it is better not to use style

Although style is convenient for quick fixes, professional markup prefers:

  • separate CSS files (style.css),
  • classes (class="btn").

Reasons:

  • the code becomes cleaner and easier to maintain,
  • you can instantly change the style for many elements at once,
  • structure (HTML) and presentation (CSS) are separated.

Summary:

CharacteristicDescription
PurposeApplies CSS properties to a single element
Syntaxstyle="property: value;"
Example<p style="color:red;">Text</p>
PriorityHighest among all style sources
DrawbacksBreaks code cleanliness, inconvenient for large-scale projects

In simple terms: style is a way to decorate an element directly, without reaching for external CSS. It suits small fixes, but not full-scale styling of a site.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit