2a. Ways to add CSS

There are three different ways to add CSS to an HTML page, which are:

  1. Inline CSS
  2. Internal CSS
  3. External CSS
Note

The precedence is Inline CSS > Internal CSS > External CSS.
If we define the same property with different property values in three different ways, the element will have the property value of inline CSS.

Inline CSS

  • Inline CSS is used to add custom properties to specific elements. The added style will only reflect on that particular element only.
  • To use inline CSS, Insert the "style" attribute within the HTML element's opening tag.
  • Consider the code snippet:
<h1 style="color: purple;">I'm harry</h1>
<h2>I'm CodeWithHarry</h2>

inline css.png
Here, the inline style of color: purple is attached to only the h1 tag.

Note: The downside of using inline CSS is, that once the project complexity increases, it will become difficult to manage the styles of each and individual elements.

Internal CSS

Internal CSS is used to apply custom style to the multiple elements on the same page. The style can be used throughout the HTML page.
Internal CSS is defined in a style block, which will be inside the head section.

  • Consider the code snippet:
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>

<body>
    <h1>CodeWithHarry</h1>
    <p>I'm harry, from CodeWithHarry</p>
    <p>I'm a Developer and founder of CodeWithHarry.com</p>
</body>

</html>

css_Internal.png
Here, in the style block, selector p will target all p tags and assign them color:red.

Note: The <style> block should always be in the <head> section.

External CSS

  • Instead of adding the styles within the HTML file, we create a separate file with .css extension. This file will hold all the styling details.

  • Then, we link this file to the HTML page, giving it the instructions on how to look. 

  • The following points will explain each keyword's meaning: 

    1. <link>: This tag is used to create links between different resources, like stylesheets, fonts, and more. In our case, we are using a link tag to link the CSS file with the HTML file.
    2. rel="stylesheet": rel stands for relationship,  this defines the type of relationship between the HTML document and the linked resource. When set to "stylesheet", it specifies that the linked resource is a stylesheet that will be used to style the HTML content.
    3. href="style.css" : The href attribute stands for "hypertext reference." It specifies the path or URL to the external resource we want to link. In this case, it's the path to the external CSS file called "style.css".

  • Consider the code snippets:

<html lang="en">
<head>
    <title>CodeWithHarry</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>I'm harry, from CodeWithHarry</p>
    <p>I'm a Developer and founder of CodeWithHarry.com</p>
</body>

</html>
  • style.css:
p{
    color: red;
}

These code snippets will generate this page:
css_External.png

This approach enables to use of the same CSS to multiple HTML files, wherever the same custom style is required.
This is helpful when we have to maintain consistency on our web pages and want to use the same CSS styles across multiple pages.