Skip to main content
Practice

Ways to Include CSS

1. External CSS

  • This method involves creating separate CSS files and linking them to the HTML document.

  • Code Example:

    Linking an External CSS File to HTML
    <head>
      <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

    The stylesheet's code is inside a separate file called styles.css.


2. Internal CSS

  • This method involves defining CSS within the <style> tag in the <head> section of an HTML document. The styles defined here apply only to that specific HTML document.

  • Code Example:

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

3. Inline CSS

  • This method involves applying styles directly to HTML elements. The defined styles apply only to the specific element they are inline with.

  • Code Example:

    Applying Inline CSS to an HTML Element
    <p style="color:red;">This sentence is displayed in red.</p>

Which method to choose depends on various factors such as project requirements, maintainability, etc.


Follow the highlighted code sections for practice.​

Want to learn more?

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