This forum is now read-only. Please use our new forums! Go to forums
CSS within HTML and as a separate file.
When CSS tags can be added within the HTML file itself using style<> tag
Ex: <>style p { color: purple; } </>style
What is the purpose or when it is absolutely necessary to use CSS as a separate file to support the HTML page?
Answer 53c6ee7f80ff33d6a9004616
When is it necessary to use external CSS files? Always. What is the purpose? To prevent repetition and cloning errors.
One style sheet, one file, many web pages tied to it with <link>
. This is the power of external style sheets. They can be applied to an entire site, or a large part of one. They can allow any page to load any plug-in so long as they link to the associated style sheet.
When we create a webpage with embedded styles
, which is what <style></style>
is, those style rules can only apply to that single document. Once the page is gone, so too are all the styles that came with it. If we wish to clone that page to create a new one with similar layout and styles, we must clone the embedded styles, as well. Say we then make a couple a small changes to the style rules. Now this style sheet is nearly the same as the one it is cloned from, but not exactly the same. Months down the road we decide to clone a page and this time we take the second clone, not the original page. Now we have two pages with different style rules than the original.
You see where this is going, eh? Not only are we piling up on duplicate style sheets, we are bulking up our site with needless excess. If all pages are drawing from the same external style sheet, cloning them (spinning off new pages) is a breeze. They will all look like spitting images of each other.
There are occasions where a page will have the fit and finish of the site, but may have one or two special rules that do not/will not ever be used anywhere else on the site. In this case, we would link to the site styles, and either embed the custom styles in this page, or create a custom style sheet that we link to after the main style sheet is loaded.
I say after, because no doubt the custom styles have changed some of the site styles. In order for those changes to hold sway, they must appear farther down the cascade (if they have the same specificity) or have greater specificity than the rules they are overriding.
CSS related terms to explore: selector, cascade, specificity, inheritance. Also, external, embedded and inline styles:
<head>
<title>Three ways to apply style rules</title>
<link rel="stylesheet" href="styles.css" title="external style sheet">
<style>
/* embedded style sheet */
h1 {
font-size: larger;
}
</style>
</head>
<body>
<h1 style="font-size: 2em">Inline style on top level heading</h1>
</body>
The above illustrates the three basic methods for applying style rules. Note that the inline rule will override the embedded rule (it has way higher specificity) and the embedded rule will override the default style rule (assuming same specificity) because it is lower down in the cascade.
Ask questions if you are still not quite up to speed with this.
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
3 comments
Thank you Roy. For such a detailed answer. Now I can understand the purpose of external CSS file and style rule clearly.
Very helpful thank you.
Thanks next time im going to do the truffle shuffle for you!!!!