--- id: html-css title: "HTML CSS" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["CSS in HTML", "inline CSS", "internal CSS", "external CSS", "Cascading Style Sheets", "HTML styles"] 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", "css", "styling"] raw_sources: ["https://www.w3schools.com/html/html_css.asp"] applied_in: [] github_commit: "" --- # [[HTML CSS]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) CSS (Cascading Style Sheets) formats the layout of a web page and can be applied to HTML in three ways β€” inline (`style` attribute), internal (`` inside `` styles the whole document. [S1] - **External pattern** β€” `` references a shared stylesheet. [S1] - **Box-model pattern** β€” `border` + `padding` + `margin` control an element's framing and spacing. [S1] - **Reference-path pattern** β€” external `href` can be a full URL, a root-relative path, or a same-folder filename. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **What is CSS?** Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more. The cascading concept means a style applied to a parent element will also apply to all children elements within the parent. [S1] **Three ways to add CSS** [S1] - **Inline** β€” using the `style` attribute on HTML elements - **Internal** β€” using a `

This is a heading

This is a paragraph.

``` **External CSS** β€” the HTML file links to an external stylesheet: [S1] ```html

This is a heading

This is a paragraph.

``` The external `styles.css` file: [S1] ```css body { background-color: powderblue; } h1 { color: blue; } p { color: red; } ``` **CSS color, font-family, and font-size** [S1] ```html

This is a heading

This is a paragraph.

``` **Border, Padding, Margin** [S1] ```css p { border: 2px solid powderblue; } ``` ```css p { border: 2px solid powderblue; padding: 30px; } ``` ```css p { border: 2px solid powderblue; margin: 50px; } ``` **Linking to external CSS** β€” the `href` can point to a full URL, a root-relative path, or a same-folder filename: [S1] ```html ``` ```html ``` ```html ``` **Chapter summary** [S1] - Use the `style` attribute for inline styling - Use the ` ``` External link: ```html ``` Box model: ```css p { border: 2px solid powderblue; padding: 30px; margin: 50px; } ``` ## βš–οΈ 비ꡐ 및 선택 κΈ°μ€€ (Comparison & decision criteria) The source presents three insertion methods; choosing among them: [S1] | Method | How | Scope | |---|---|---| | Inline | `style` attribute on an element | A single element only | | Internal | `