Cascading of styles

We can add multiple styles to apply simultaneously to an element. We can even add in-line styles, the styles defined inside the document and the external style sheet. CSS defines the priority of rules that determine which style to apply to the element.

1.If an inline style exists for that element, the inline style is applied.
2.If the inline style doesnt exist for that element, the styles defined inside of the document of the element are applied.
3.If a style defined inside of the document doesnt exist for the element, the styles defined in external style sheet are applied.
4.If a style define in external style sheets doesnt exists for that element, the default html styles are applied.

style.css
body {padding: 20px;
h3 {font-style:italic; color: #efefef;}
snippet
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1 style="font-style:uppercase">Title with Inline Style</h1>
<h2>Title with Inside document style</h2>
<h3>Title with External Style Sheet style</h3>
<h4>Default HTML style</h4>
</body>
</html>
Output

Title with Inline Style

Title with Inside document style

Title with External Style Sheet style

Default HTML style