Different ways to bring CSS into the HTML file
We can add CSS to our projects in the following ways:
Inline styling
Internal styling
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.