There are three types of style-sheets :
- Default (a.k.a User-agent/ Browser) Style Sheet
- User Style Sheet
- Author Style Sheets
We will go through each kind of style sheet in detail below.
Default Style Sheet
Browser applies this by default for every web page it renders. So even if the author doesn't apply any styling, it is not styleless. It still applies the styling details present in the default style sheet installed within the browser.
User-Style Sheet
Browsers give the option of extending the browser's default style to the user. This is not seen in modern browsers as web design has improved a lot since old times. This style sheet was a part of old browsers. Google Chrome has even stopped supporting user style sheets. Many websites crash nowadays on using user style sheets.
Author Style Sheets
These are defined in the website created by the creator/ author of the website. These are of three types:
- In-line: Defined inside the tag itself.
<div style="width:20px;"> </div>
- Internal / Embedded : CSS styles in
<style>tag inside<head>tag of an html page.
- External : CSS styles defined in separate physical files
(e.g. abc.css)which are applied to an html web page using<link>tag present inside<head>tag.
<link rel="stylesheet" type="text/css" href="abc.css">
We have a dilemma when all three of them are used. Using all three results in confusion hence browsers have a predefined order of priority form highest to lowest which is as follows:
Author Style Sheet >> User Style Sheet>> User Agent Style Sheet (Default Style Sheets)
!important styles priority order is just reverse.
Note:
!importantrule styles always have higher preference than normal styles.
Thankyou for taking time off to read my blog..... Godspeed !!!