lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans"
      rel="stylesheet"
    />

    <title>CSS Example</title>

    
    <link rel="stylesheet" type="text/css" href="example.css" />

    
    <style>
      .internal-style {
        
      }
    </style>
  </head>
  <body>
    <h1 class="external-style">External CSS Style Example</h1>
    <h2 class="internal-style">Internal CSS Style Example</h2>
    <p style="color:green;">Inline CSS Style Example</p>
  </body>
</html>

# How to Load CSS

**1. External CSS**

- This method involves creating a separate file for CSS code and linking that file to the HTML document.

- Code example:
  ```html title="Linking an external CSS file to an HTML document"
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  ```
  The `styles.css` file contains the style code.

<br />

**2. Internal CSS**

- This method defines the style within the `<head>` section of the HTML document using the `<style>` tag. The CSS defined this way will only apply to the specific HTML document.

- Code example:
  ```html title="Defining CSS internally in an HTML document"
  <head>
    <style>
      body {
        background-color: lightblue;
      }
    </style>
  </head>
  ```

<br />

**3. Inline CSS**

- This method applies styles directly to HTML elements. The defined style will only apply to that specific element.

- Code example:
  ```html title="Applying styles directly to an HTML element"
  <p style="color:red;">This sentence will be displayed in red.</p>
  ```

Which method you choose depends on the project requirements, ease of maintenance, and other factors.

<br />

### Follow the highlighted parts in code examples to practice.

Internal CSS is the method of defining CSS using the `<style>` tag within the `<head>` section of an HTML document. This only applies to that particular HTML document and does not affect other documents.

### Among the three ways to load CSS, what is the method called when defining styles within the `<style>` tag in the `<head>` section of an HTML document?

How to Load CSS

Follow the highlighted parts in code examples to practice.

Among the three ways to load CSS, what is the method called when defining styles within the <style> tag in the <head> section of an HTML document?

Among the three ways to load CSS, what is the method called when defining styles within the `<style>` tag in the `<head>` section of an HTML document?