Skip to main content
Practice

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:

    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.


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:

    Defining CSS internally in an HTML document
    <head>
      <style>
        body {
          background-color: lightblue;
        }
      </style>
    </head>

3. Inline CSS

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

  • Code example:

    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.


Follow the highlighted parts in code examples to practice.​

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.