Different ways to bring CSS into the HTML file

We can add CSS to our projects in the following ways:

  1. Inline styling

  2. Internal styling

  3. External styling

Inline styling

Inline styling is a technique in HTML that allows you to apply style directly to an HTML element using the style attribute. It is called "inline" because the style is applied directly to the element, in the same line of HTML code.

Inline styles have the highest specificity, meaning that they will override any other styles that are applied to the same element.

It is also possible to use JavaScript to modify the style attribute of an element and change its styles dynamically.

Internal styling

Internal styling refers to the practice of using a style element within the head of an HTML document to define styles for the elements on the page. The style element should contain a list of CSS rules that specify the elements on the page.

To use internal styling, you should place the style element within the head of the HTML document, and include your CSS rules within the style element. You can then apply the styles to the elements on the page using CSS selectors.

External Styling

External styling refers to the practice of linking to an external CSS file from an HTML document using the link element. The link element should be placed within the head of the HTML document, and it should have a rel attribute with a value of "stylesheet" to indicate that it is linking to a style sheet.

To use external styling, you should create a CSS file and define your styles in that file. You can then link to the CSS file from your HTML document using the link element.