#        
## Overview
We can incorporate CSS into the webpage in three ways:

1. Inline 
2. Internal
3. External CSS file 

## Inline 

The `inline` CSS styles are added to the HTML tag using the `style` attribute. 

The `inline` CSS is not recommended because we need to add style individually for each HTML tag. It will be hard to maintain the style. 

## Example

<!DOCTYPE html>
<html>
<body style="background-color:tomato;">
  <h1 style="color:white;padding:30px;">Educative io Inline styles</h1>
</body>
</html>

codemirror

In the code above, we add the `style` attribute to the `body` and  `h1` tags. This applies the style to that element.

# Internal 

The internal CSS means inside the `head` tag. We can include the `<style>` tag to define the style for the webpage.

The limitation of the internal CSS is that we cannot use the defined style on another HTML page. We need to include the same `<style>` section on every HTML page.

## Example

<html>
  <head>
    <style>
        body {
          background-color: blue;
        }
        div {
          color: white;
          padding: 60px;
        } 
    </style>
  </head>
  <body>
    <div id=""/>Educative io Inilne css</div>
  </body>
</html>

We define the styles inside the `head` element in the above code. 

## External CSS

In external CSS, we define the styles in a specific file(file extension should be `.css`) and link that to our web pages using the `link` tag.

This is a recommended way of including styles on a webpage because we can define the common CSS styles in specific files and include that file in all web pages.

## Example

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://darny.github.io/csstemplate/style.css" />  
  </head>
  <body>
    <button class="button"/>Sample button</button>
  </body>
</html>

## Explanation 

In **line 3**, we include an external CSS file from Github.

```html
<link rel="stylesheet" type="text/css" href="https://darny.github.io/csstemplate/style.css" /> 
```

We link the `style.css` file using the `link` tag in the above HTML file.

This loads the styles from the `style.css` file.

Inline vs. internal vs. external CSS

Inline CSS is hard to maintain; internal CSS can't be reused across pages; external CSS is recommended for reusable styles.