--- id: css-add-inline title: "CSS Add Inline" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["inline CSS", "inline style", "style attribute", "element-level style", "single element styling"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.89 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["css", "web", "frontend", "w3schools", "stylesheet"] raw_sources: ["https://www.w3schools.com/css/css_howto_inline.asp"] applied_in: [] github_commit: "" --- # [[CSS Add Inline]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) An inline style applies a unique style to a single element via its `style` attribute, but it loses many advantages of a style sheet by mixing content with presentation, so it should be used sparingly. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **Purpose** β€” an inline style may be used to apply a unique style for a single element. [S1] - **Mechanism** β€” to use inline styles, add the `style` attribute to the relevant element. [S1] - **Content** β€” the `style` attribute can contain any CSS property declarations. [S1] - **Caveat** β€” an inline style loses many of the advantages of a style sheet (by mixing content with presentation); use this method sparingly. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Per-element override** β€” attach declarations directly to one element via `style="property:value;…"`. [S1] - **Use sparingly** β€” prefer external/internal sheets to keep content and presentation separate. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) An inline style may be used to apply a unique style for a single element. To use inline styles, add the `style` attribute to the relevant element. The `style` attribute can contain any CSS property. [S1] ```html

This is a heading

This is a paragraph.

``` Here the `

` element is given blue, center-aligned text, and the `

` element is given red text β€” all directly through their `style` attributes. [S1] **Tip:** An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The page's own example applies inline styles to an `

` (blue, centered) and a `

` (red). No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Inline style via the style attribute (language: HTML): ```html

This is a heading

This is a paragraph.

``` ## βš–οΈ 비ꡐ 및 선택 κΈ°μ€€ (Comparison & decision criteria) | Method | How it is added | Best use | | --- | --- | --- | | External CSS | `` to a `.css` file | Style an entire website from one file [S1] | | Internal CSS | `