본문으로 건너뛰기

Methods of Including CSS

Methods of Including CSS

1. External CSS

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

  • Example code:

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

    The style code is contained within a separate file named styles.css.


2. Internal CSS

  • Styles are defined within the <head> section of the HTML document using the <style> tag. The CSS defined in this way is only applied within the HTML document.

  • Example code:

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

3. Inline CSS

  • This method applies the style directly to the HTML element. The defined style is only applied to that specific element.

  • Example code:

    Applying style directly to an HTML element
    <p style="color:red;">This sentence will appear in red.</p>

Which method to choose depends on various factors such as project requirements and ease of maintenance.


Follow along with the parts of the code emphasized with asterisks.