When we add CSS in HTML file, the browser reads a style sheet, format the document according to information in the style sheet.
Following are three ways to insert CSS in HTML file.
With an external CSS, you can apply CSS on multiple pages. The HTML page must include a reference to the external style sheet file inside the element, in the head section.
You can write an external style sheet in any text editor, but it must be saved with a .css extension.
Here is how the “style.css” file looks like:
Internal CSS is used to apply CSS on a single HTML document or page.
It is written inside the <style> tag within head section of html.
Inline CSS is used to apply a unique style for a single element. To apply inline CSS, you should use the style attribute to the relevant tag.
Disadvantages of Inline CSS:
Consider that an external style sheet has the following style for the <h2> element:
Then, consider that an internal style sheet has the following style for the <h2> element:
The last read style sheet will be used. So, if the internal style is defined after the link to the external style sheet, the <h2> elements will be “red”:
For example, if the internal style is defined before the link to the external style sheet, the <h2> elements will be “yellow”: