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:
Multiple Style Sheets
If more than one properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.
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”: