Correct Syntax for Adding an External Style Sheet (HTML)

To add an external CSS file in HTML, you use the <link> element with rel="stylesheet" and an href attribute pointing to the CSS file URL. This is the standard browser mechanism for stylesheet inclusion.2

A helpful contrast is:

Given the options:

• (i) <style href='main.css'></style> ❌ incorrect (the <style> element does not use href to load external stylesheets)2
• (ii) <style src='main.css'></style> ❌ incorrect (src is not the way <style> loads external CSS)2
• (iii) <link rel='stylesheet' type='text/css' src='main.css'> ❌ incorrect because it uses src instead of href for the stylesheet URL; href is required.2
• (iv) <link rel='stylesheet' type='text/css' href='main.css'> ✅ correct; it uses rel="stylesheet" and href correctly.2

Therefore, the correct syntax is (iv):
<link rel='stylesheet' type='text/css' href='main.css'>2

Key terms you’ll see in this topic:

• external stylesheet
• [stylesheet link element]{def="HTML tag used to connect an external stylesheet to a document"}
• href attribute
• rel attribute

Footnotes

1. MDN Web Docs — <style> element (internal CSS) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style - Explains the purpose of <style> for embedding CSS rules. ↩ ↩² ↩³

2. MDN Web Docs — <link> element (stylesheet linking via rel/href) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link - Describes rel="stylesheet" and using href to load stylesheets. ↩ ↩² ↩³ ↩⁴

3. WHATWG HTML Standard — <style> element definition https://html.spec.whatwg.org/multipage/semantics.html#the-style-element - Specifies <style> content model for inline CSS. ↩ ↩²

4. MDN Web Docs — link rel and stylesheet examples https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attributes - Covers common attributes used when linking stylesheets (including rel and href). ↩ ↩² ↩³

Why (iv) is correct

The <link> element for stylesheets uses:

• rel="stylesheet" to declare the relationship
• href="..." to provide the resource URL

This matches the standard stylesheet linking pattern documented for HTML.2

In contrast, the <style> element is meant to contain CSS text inside the document, not to reference an external CSS file via href or src attributes.2

Quick syntax comparison

Footnotes

1. MDN Web Docs — <link> element (stylesheet linking via rel/href) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link - Describes rel="stylesheet" and using href to load stylesheets. ↩

2. MDN Web Docs — link rel and stylesheet examples https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attributes - Covers common attributes used when linking stylesheets (including rel and href). ↩

3. MDN Web Docs — <style> element (internal CSS) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style - Explains the purpose of <style> for embedding CSS rules. ↩

4. WHATWG HTML Standard — <style> element definition https://html.spec.whatwg.org/multipage/semantics.html#the-style-element - Specifies <style> content model for inline CSS. ↩