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.
- External CSS
- Internal CSS
- Inline CSS
External CSS
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:
"style.css"
Internal CSS
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
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:
- The inline CSS styles cannot be reused anywhere else.
- To style pseudo-codes and pseudo-classes with inline CSS is not possible.
- These styles are difficult to be edited because they are not stored at a single place.
- Inline CSS does not provide browser cache advantages.
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:
Example:
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”:
Example:
For example, if the internal style is defined before the link to the external style sheet, the <h2> elements will be “yellow”: