Summary  
This chapter explains three approaches for applying CSS to HTML—inline styles, embedded style sheets, and external style sheets—detailing how each method scopes and organizes style rules.

General domain of usage  
Web development

Watch this video to see how to connect CSS to HTML using three methods: inline styles, embedded style sheets, and external style sheets. You will follow step-by-step examples to understand where to place your CSS code and how each approach affects your web page. projects. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

## How CSS Is Added to HTML
There are three ways to apply CSS to an HTML document: 
1. Inline styles;
2. Embedded style sheets; 
3. External style sheets.

Each method works differently and is used in different situations.

## Inline Styles
Inline styles are written directly inside an HTML element using the `style` attribute.<br>
Example:

PHAgc3R5bGU9ImNvbG9yOiBibHVldmlvbGV0OyI+CiAgTGV0J3MgdXNlIGlubGluZSBzdHlsZXMgYW5kIGNoZWNrIHRoZSByZXN1bHQKPC9wPg==

This style applies only to this specific element.

Inline styles are quick to use, but they are not reusable and are difficult to manage in larger projects.

## Embedded Style Sheet

An embedded style sheet is written inside `<style>` tags in the `<head>` section of an HTML document.<br>
Example:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxzdHlsZT4KICAgICAgcCB7CiAgICAgICAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgICAgICAgZm9udC1zaXplOiAzNnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPldlIHdvcmsgd2l0aCBhbiBlbWJlZGRlZCBzdHlsZSBzaGVldCBpbiB0aGUgaGVhZCBvZiBIVE1MLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

This method applies styles to the entire page, but only within this single HTML file.

It is useful for small or standalone pages.

## External Style Sheet

External CSS stores styles in a separate `.css` file and connects it to HTML using the `<link>` tag.<br>
Example:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gV2UgY2FuIGFkZCBtdWx0aXBsZSBsaW5rcyB0byBDU1Mgc3R5bGUgc2hlZXRzIGlmIG5lZWRlZC4gLS0+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlcy5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+V2Ugd29yayB3aXRoIGFuIGV4dGVybmFsIHN0eWxlIHNoZWV0IGNvbm5lY3RlZCBpbiB0aGUgaGVhZC48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

cCB7CiAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgZm9udC1zaXplOiAzNnB4Owp9

This method allows styles to be reused across multiple pages.

It is the preferred and most scalable approach for real projects.

Inline styles: applied directly to elements, but not reusable.

Embedded style sheet: applied inside the `<head>`, affects only one page.

External style sheet: stored in a separate `.css` file, reusable and recommended for most projects.

Summary

In this course, we will primarily use external style sheets.

What ways of adding styles to the HTML document exist?

Master the essentials of CSS, the styling language that transforms the look and feel of web pages. Explore core concepts such as text styles, colors, spacing, the box model, Flexbox, and decorative effects. Build the skills to create visually engaging and well-structured web pages.

Understand how CSS connects to HTML and how styles are applied through selectors. Apply colors, text styling, and hover effects to control visual presentation.

Improve typography using line height, spacing, font properties, and custom fonts. Control font families, weight, style, and size for better readability.

Control layout structure using margin, padding, borders, and width properties. Understand box sizing behavior and element display types such as block, inline, and inline-block.

Control horizontal and vertical layouts using Flexbox properties. Adjust direction, alignment, and spacing to structure UI components.

Enhance layouts using background colors, images, pseudo-elements, and shadows. Style visual components for depth and contrast.

Connecting CSS to HTML

How CSS Is Added to HTML

Inline Styles

Embedded Style Sheet

External Style Sheet