1. Introduction to Types of CSS
1.5. Combining The Different Types of CSS
Now, what will happen if you combine all three CSS types in a single document? Then a “Cascading” effect will take place. Meaning all the styles will be combined into one “virtual” style rule for an HTML element wherein the properties nearest to the element will take precedence regarding its effect. This is called the “cascading rule”, wherein Inline CSS properties will have precedence over Internal and External CSS. While the position of the <style></style> and the <link> in the head section affects who has precedence over the other between the Internal and External CSS. If no style sheet incorporated into the HTML document, then it uses a browser’s default. Please refer to the following screenshot examples.
The example below shows that the <h1> tag has both an internal and inline CSS applied to it.
The effect is that all the properties are combine into one style rule for <h1>. The inline CSS
properties will take precedence over the internal. So, the color of the text would be white instead of
teal, then centered and has a background color of blue.
Another example on the next page showing both an external and internal CSS are present in one HTML document. This means that there would only be one style rule for the HTML document, and the properties that are the same for the same selector, the Internal CSS will take precedence over the one defined in the External stylesheet. In case that the <link> tag comes after the <style></style> tag, then the reverse would be true, meaning the external stylesheet will take precedence over the internal stylesheet for the same properties of the same selector to form one style rule.
<!DOCTYPE html>
<html>
<head>
<!-- incorporate an external stylesheet saved in mystyle.css -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {
background-color: teal;
}
h3 {
color: white;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>