Menu
From Code Academy's Make a Website: CSS Styling:
<head>
<link href="font.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
"Inside the head element are two link elements. The order of these link elements matters.
The browser first sees the link for the custom font font.css, and makes the font available to use in the page.
Next the browser sees the link for main.css. Since the browser now knows about the custom font, we can use it from main.css to style elements."
I want to have an intuition/answer as to why does the order matter (link to fonts before the main CSS stylesheet)?
I tried to do it in the other order (link to main stylesheet before link to fonts) and it still worked.
527
Order matters when you're overriding CSS definitions. This is part of the "cascade" of cascading style sheets. If main.css does not contain any font definitions, then the order doesn't matter.
For example: you were given a default CSS file from a designer, but you need to tweak it a little. Instead of editing the default.css file, you create a custom.css file and change only the handful of definitions that you wanted to tweak. Now the order matters.
<head>
<link href="default.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>If you were to put custom.css first, then your changes would never appear.
Here's an article that gets into various levels of further detail. Warning, it can make your head spin.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
