link rel="stylesheet"
Connects an external CSS file to the HTML document.
Platform under construction
External CSS
Learn External CSS as the bridge between clean HTML and professional CSS: visual hierarchy, maintainable styling, responsive behavior and live practice.
HTML styling foundation
External CSS is how real websites keep design consistent.
External CSS lives in a separate .css file and is linked from the HTML document. This is the normal production pattern for websites and applications.
The biggest win is reuse. One stylesheet can style many pages, and one class can become part of a design system. The browser can also cache CSS files, which helps performance.
Once a CSS file grows, organization matters. A stylesheet of 2,000 lines can still be fine when it is structured. A random stylesheet of 500 lines can already be painful.
href path
Points to the stylesheet location, often assets/css/styles.css.
Caching
Browsers can reuse the same CSS file across pages.
Organization
Large CSS needs sections, naming rules and eventually splitting.
Syntax and structure
The link element belongs in head.
Use rel="stylesheet" and a correct href path. The browser loads the CSS before styling the visible page.
External CSS linked from HTML
<head>
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
<article class="course-card course-card--featured">
<h1>External CSS</h1>
<p>One stylesheet can support many pages.</p>
</article>
</body>
Everything duplicated per page
<!-- Every page repeats its own styles -->
<style>
.course-card { padding: 32px; }
.button { background: red; }
.hero { min-height: 80vh; }
</style>
Rules that matter
CSS becomes powerful when it is written as a system.
Styling is not only making something look nice once. Good CSS stays readable, reusable and predictable while the project grows.
Link once, reuse everywhere
Shared components should not be restyled from scratch on every page.
Use clear paths
Know whether href starts from the current folder, the site root or a parent directory.
Organize by purpose
Base styles, layout, components and utilities are easier to scan than random order.
Name classes clearly
A class should explain role or component, not only current color or position.
Split when needed
A huge stylesheet can be split into base, layout, components and pages when the project grows.
Keep HTML clean
HTML should show structure and classes. CSS should carry the visual system.
Production thinking
CSS affects trust, accessibility, performance and maintainability.
Why does this matter?
This matters because CSS becomes serious when the site grows. External CSS is where styling changes from one-page decoration into a maintainable frontend system.
Accessibility
External CSS should include global focus styles, readable line-height, sufficient contrast and responsive behavior shared across the site.
Production note
External stylesheets are essential for caching, maintainability, code review and design consistency. They also make it possible to refactor a full site without touching every HTML file.
SEO note
A clean external stylesheet helps performance and maintainability. Faster, readable pages tend to perform better for users, and user behavior can support search performance indirectly.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Rename .hero-panel to .course-hero in both HTML and CSS.
- Add one new component class for a small badge.
- Run the preview and check whether the stylesheet still feels organized.
Practice assignment
Do this before moving to the next lesson.
- Write CSS in sections: base, layout and components.
- Use class names that can survive design changes.
- Explain when one CSS file is enough and when splitting becomes smarter.
Try it yourself
Style a page as if CSS is external
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?