Difficulty: Easy
Correct Answer: External style sheets separate content from presentation, allow reuse across many pages, reduce duplication, and improve maintainability and caching.
Explanation:
Introduction / Context:
Developers can place CSS directly on elements as inline styles or store it in external style sheets that are linked to one or more HTML pages. Modern best practice favors external style sheets because they promote clean structure and efficient maintenance. This question checks whether you understand the key advantages of external styles over inline styles.
Given Data / Assumptions:
- We have a website with multiple HTML pages that share a common design.
- CSS can be applied inline, internally, or externally.
- The goal is to build maintainable and efficient styles.
- External style sheets are served as separate .css files.
Concept / Approach:
External style sheets store presentation rules in one place and let many pages link to the same file. This reduces repeated code and ensures that changing one rule updates the entire site. Browsers can cache external CSS, improving load times for subsequent page views. Inline styles mix content and presentation, which makes large projects harder to manage. The correct answer must mention separation of concerns, reuse, and caching benefits.
Step-by-Step Solution:
Step 1: Recall that external style sheets are referenced with link tags in the head of each HTML document.
Step 2: Recognize that one external file can style many pages at once.
Step 3: Compare external styles with inline styles, which duplicate style attributes across many elements.
Step 4: Select the option that highlights reuse, maintainability, and caching as key advantages.
Verification / Alternative check:
You can verify the benefit by updating a color in an external style sheet and seeing the change reflected on every linked page without editing their HTML. Browser network tools will also show that the external CSS file is downloaded once and reused from cache on later requests, which supports the performance advantage. These observations confirm that external style sheets are more efficient and maintainable.
Why Other Options Are Wrong:
Option B is wrong because CSS does not control whether JavaScript runs. Option C is misleading since external style sheets often reduce page size and can improve load times after caching. Option D is false because external files are specifically designed to be shared by many pages. Option E exaggerates by claiming that CSS generates new HTML automatically, which is not accurate.
Common Pitfalls:
A common pitfall is mixing many inline styles with external styles, leading to conflicting rules. Another issue is forgetting to update all inline occurrences when a design change is needed, which external style sheets would avoid. Developers should rely mostly on external style sheets and keep inline styles limited to rare one off cases or dynamic styling that is injected by scripts.
Final Answer:
External style sheets provide clear separation of content and presentation, allow the same CSS file to be reused across many pages, reduce duplication, and improve maintainability and caching compared to inline styles.
Discussion & Comments