--- id: html-styles title: "HTML Styles" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["style attribute", "inline style", "background-color", "color", "font-family", "font-size", "text-align"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.90 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["html", "web", "frontend", "w3schools", "styles", "css"] raw_sources: ["https://www.w3schools.com/html/html_styles.asp"] applied_in: [] github_commit: "" --- # [[HTML Styles]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) The HTML `style` attribute adds inline styling to an element using the syntax `style="property:value;"`, controlling color, font, size, and alignment. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **`style` attribute** β€” used to add styles to an element such as color, font, and size. [S1] - **Syntax** β€” ``, where the property is a CSS property and the value is a CSS value. [S1] - **`background-color`** β€” sets the background color of an element (or the whole page when set on ``). [S1] - **`color`** β€” sets the text color. [S1] - **`font-family`** β€” sets the font of the text. [S1] - **`font-size`** β€” sets the size of the text. [S1] - **`text-align`** β€” sets the horizontal alignment of the text. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **`property:value;` pairs** β€” each declaration is a CSS property/value pair ending with a semicolon. [S1] - **Page-wide vs. per-element** β€” styling `` affects the whole page; styling an individual element affects only it. [S1] - **Relative sizing** β€” `font-size` can use percentages (e.g. `300%`, `160%`). [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **The HTML Style Attribute** Setting the style of an HTML element can be done with the `style` attribute. The HTML `style` attribute has the following syntax: [S1] ```html ``` The property is a CSS property, and the value is a CSS value. [S1] **Background Color** The CSS `background-color` property defines the background color for an HTML element. Set the background color for the whole page: [S1] ```html

This is a heading

This is a paragraph.

``` Set background color for two different elements: [S1] ```html

This is a heading

This is a paragraph.

``` **Text Color** The CSS `color` property defines the text color for an HTML element: [S1] ```html

This is a heading

This is a paragraph.

``` **Fonts** The CSS `font-family` property defines the font to be used for an HTML element: [S1] ```html

This is a heading

This is a paragraph.

``` **Text Size** The CSS `font-size` property defines the text size for an HTML element: [S1] ```html

This is a heading

This is a paragraph.

``` **Text Alignment** The CSS `text-align` property defines the horizontal text alignment for an HTML element: [S1] ```html

Centered Heading

Centered paragraph.

``` **Chapter Summary** - Use the `style` attribute for styling HTML elements. [S1] - Use `background-color` for background color. [S1] - Use `color` for text colors. [S1] - Use `font-family` for text fonts. [S1] - Use `font-size` for text sizes. [S1] - Use `text-align` for text alignment. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The examples above demonstrate inline styling applied directly to ``, `

`, and `

` elements β€” the simplest way to color, size, and align content without a separate stylesheet. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Style attribute syntax (HTML): ```html ``` Color, font, size, and alignment on a paragraph: ```html

Styled paragraph.

``` Page-wide background color: ```html ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. (The page teaches inline `style` as the introductory styling mechanism; CSS stylesheets are covered separately.) [S1] ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.90 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[HTML Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[HTML Attributes]], [[HTML Formatting]], [[HTML Headings]], [[HTML Basic]] - **μ°Έμ‘° λ§₯락:** Referenced whenever applying inline visual styling (color, font, size, alignment) to elements. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” HTML Styles β€” https://www.w3schools.com/html/html_styles.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "HTML Styles" page (Astra wiki-curation, P-Reinforce v3.1 format).