Suggest an edit

Improve this article

Refine the answer for “What does the style attribute do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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:

| Characteristic | Description |
|---|---|
| Purpose | Applies CSS properties to a single element |
| Syntax | `style="property: value;"` |
| Example | `<p style="color:red;">Text</p>` |
| Priority | Highest among all style sources |
| Drawbacks | Breaks 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts347 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.