# Unveiling the Three Paths
When it comes to designing a website, the visual appearance of a webpage is primarily influenced by two technologies - HTML and CSS. These two technologies work together in three distinct ways: **inline styles**, **embedded style sheets**, and **external style sheets**. Let's unravel the artistry behind these methods, exploring their strengths and weaknesses.

## Inline Styles
Inline styles introduce CSS directly to an HTML element using the `style` attribute. These styles are convenient when dynamic changes are needed – a realm where JavaScript often wields its magic. However, the drawback is their limited scope; they can't be easily extended or reused across different elements.
```html
<tag style="...">Some content</tag>
```
For example, let's apply an inline style to change the text color to `blueviolet`.

PHAgc3R5bGU9ImNvbG9yOiBibHVldmlvbGV0Ij5MZXQncyB1c2UgaW5saW5lIHN0eWxlcyBhbmQgY2hlY2sgdGhlIHJlc3VsdDwvcD4=

## Embedded Style Sheet
The embedded style sheet resides within an HTML document's `<head>`, encapsulated within `<style>` tags. This method allows us to tailor styles specifically to a single page. However, it lacks the versatility needed to be shared across multiple pages.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxzdHlsZT4KICAgICAgcCB7CiAgICAgICAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgICAgICAgZm9udC1zaXplOiAzNnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPldlIHdvcmsgd2l0aCBhbiBlbWJlZGRlZCBzdHlsZSBzaGVldCBpbiB0aGUgaGVhZCBvZiBIVE1MLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

## External Style Sheet
The external style sheet emerges as the grand maestro of CSS management. By employing the `<link>` tag within the `<head>` of an HTML document, this technique offers scalability, maintainability, and reusability – qualities coveted in web projects.

But how does it work? We create a file with the `css` extension and reference it in our HTML document. Below is a glimpse of both files, `index.html` and `index.css`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gV2UgY2FuIGFkZCBtdWx0aXBsZSBsaW5rcyB0byBDU1Mgc3R5bGUgc2hlZXRzIGlmIG5lZWRlZC4gLS0+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cD5XZSB3b3JrIHdpdGggYW4gZXh0ZXJuYWwgc3R5bGUgc2hlZXQgY29ubmVjdGVkIGluIHRoZSBoZWFkLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

The `rel` attribute stands for "relationship". `rel="stylesheet"` denotes how the `index.css` is related to the `index.html`.

> Note
>
> Remember that while inline styles cater to a single element, styles from an External Style Sheet or an Embedded Style Sheet can adorn multiple elements, streamlining your design efforts.

What ways of adding styles to the HTML document exist?

Introduction to CSS (Cascading Style Sheets), which is a styling language used to enhance the look and feel of web pages. We will cover how to deal with fonts, element positioning, colors, and other decorative effects.

Basic CSS concepts and rules to add styles to the web page.

Set of CSS properties that are used to style the text content of HTML elements.

Concept of arranging elements according to the box model, which describes the layout and spacing of all elements.

Method of arranging the set of elements in rows and columns.

Create visually stunning and interactive web designs by using advanced CSS techniques for adding decorative elements.

CSS Fundamentals

Connecting HTML and CSS

Unveiling the Three Paths

Inline Styles

Embedded Style Sheet

External Style Sheet