Multiple Style Sheets
If the same selector is set in more than one style sheet, the value from the last style sheet the browser reads wins.
Suppose an external style sheet sets the <h1> color to navy, and an internal style sheet sets the same <h1> color to orange. The result depends on which one is read last.
Internal after external
The internal style is placed after the link to the external sheet, so the <h1> elements are orange.
<style> block after it.
In the head, put the <link> to mystyle.css first, then a <style> block setting h1 to orange. Because the internal style comes last, the heading should be orange. Include an <h1> in the body.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The internal style is read last, so the heading is orange.</p>
</body>
</html>
Internal before external
The internal style is placed before the link to the external sheet, so the <h1> elements are navy.
<style> block first, then links an external style sheet (mystyle.css) after it.
In the head, put a <style> block setting h1 to orange first, then the <link> to mystyle.css (which sets h1 to navy). Because the external style is read last, the heading should be navy. Include an <h1> in the body.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The external style is read last, so the heading is navy.</p>
</body>
</html>
External style
The style for <h1> in the external sheet.
h1 {
color: navy;
}
Internal style
The style for <h1> in the internal sheet.
h1 {
color: orange;
}
Cascading Order
When more than one style is set for the same element, which one is used?
All the styles on a page cascade into one virtual style sheet. The priority order, from highest to lowest, is:
- Inline style (inside an HTML element).
- External and internal style sheets (in the head section).
- Browser default.
So an inline style has the highest priority and overrides external styles, internal styles, and browser defaults.
Inline wins
An internal style sets the heading to navy, but an inline style sets it to orange. The inline style wins.
<style> block that makes h1 navy. Then give a single <h1> an inline style setting its color to orange. The inline style has the highest priority, so the heading should appear orange.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: navy;
}
</style>
</head>
<body>
<h1 style="color:orange;">This is a heading</h1>
<p>The inline style overrides the internal style sheet, so the heading is orange.</p>
</body>
</html>