Inline, Internal and External CSS: How to Link a style.css File to HTML, with Examples

Updated: 9 October 2026 · Applies to: HTML and CSS in current browsers (cascade tested in Chromium 152), any web hosting, WordPress 6.2 and later

CSS (Cascading Style Sheets) is the language that controls how an HTML page looks: colours, fonts, spacing and layout. A CSS style sheet is simply a list of CSS rules. There are three methods to add CSS to a page:

• Inline CSS: a style attribute on one element.
• Internal CSS (also called embedded CSS): a <style> block in the page’s <head>.
• External CSS: a separate file, usually style.css, linked from every page with <link rel="stylesheet" href="style.css">.

For a website with more than one page, use an external style sheet. The details, examples and a tested answer to “which one wins” follow.

What is a CSS rule, and what is style.css?

A rule has a selector (which elements) and declarations (property and value):

p { color: #1d2b64; font-size: 18px; }

style.css is just the usual name for a site’s main external style sheet. Browsers do not care about the name, only about the <link> that points to it: it is a plain text file with the .css extension, and the web server sends it with the type text/css. The name does matter in WordPress: every theme must have a style.css whose header comment contains at least Theme Name:, because WordPress reads it to recognise the theme.

1. External CSS: put the styles in a separate file

1. Create a folder css next to your HTML files and a file css/style.css in it:

   body { font-family: Arial, sans-serif; }
   h1 { color: #1d2b64; }
   .button { background: #4035c8; color: #fff; }

2. Link it inside the <head> of every page:

   <head>
     <link rel="stylesheet" href="css/style.css">
   </head>

3. Get the path right. It is relative to the HTML page: style.css (same folder), css/style.css (a subfolder), ../css/style.css (one folder up) or /css/style.css (from the root of the website).
4. Upload the HTML and CSS files to your hosting, for example with cPanel File Manager, and reload the page.

One file now styles every page, a change in it updates the whole site, and browsers cache the file, so later pages load faster.

A style sheet can load another one with @import url("base.css");. According to MDN, @import must come at the top of the file, before other rules, or the browser ignores it. In our test an @import on the first line of style.css worked.

2. Internal (embedded) CSS: a style block in the page

<head>
  <style>
    h1 { color: #1d2b64; }
    .button { background: #4035c8; color: #fff; }
  </style>
</head>

Use it for styles that only one page needs, or when your system does not let you edit CSS files. On a site with many pages it is less efficient: every page carries its own copy, and one change means editing every page.

3. Inline CSS: the style attribute

<p style="color:#1d2b64; font-size:18px;">Welcome to our site</p>

Good for a one-off change, for HTML email (inline styles work in the widest range of email programs) and for styles set by JavaScript. It is the hardest to maintain, and it overrides the other two methods.

Which one wins? A tested example

We loaded a test page in headless Chromium 152 and printed the colour the browser actually applied to each element (getComputedStyle). The page linked css/style.css, which contains p { color: blue }, .note { color: green }, #intro { color: purple } and .imp { color: teal !important }, and then had an internal <style> block with p { color: orange }. The paragraphs were:

<p id="p1">
<p id="p2" class="note">
<p id="intro">
<p id="p4" class="note" style="color: brown">
<p id="p5" class="imp" style="color: brown">

Result (shortened to the paragraphs):

p1: rgb(255, 165, 0)
p2: rgb(0, 128, 0)
intro: rgb(128, 0, 128)
p4: rgb(165, 42, 42)
p5: rgb(0, 128, 128)

That is orange, green, purple, brown and teal. What this shows:

• Same selector, different places: the rule that comes later wins. The internal p rule came after the <link>, so paragraphs were orange. When we moved the <link> below the <style> block, the same paragraph became rgb(0, 0, 255), blue. Internal CSS is not stronger than external CSS; only the order counts.
• More specific selectors win: a class beats an element selector, and an ID beats a class, wherever they are.
• Inline CSS beats every normal rule, even an ID selector.
• !important in a style sheet beats inline CSS. Use it rarely: it makes later changes harder.

External CSS file not working?

• Wrong path: when we pointed the <link> at a file that did not exist, the browser showed no error on the page. It simply ignored the whole file (headings lost their colour and the font fell back to Times New Roman), while inline and internal styles still worked. Open the browser’s developer tools (F12), reload, and check the CSS file on the Network tab: it should load with status 200, not 404.
• Old copy in the cache: reload without the cache or clear the browser cache. To stop visitors seeing an old file, change its URL when it changes, for example style.css?v=2.
• Wrong type: the server must send .css files as text/css. According to MDN, when the server also sends X-Content-Type-Options: nosniff, browsers block a style sheet with any other type.
• @import placed after other rules: it is ignored. Move it to the top.
• A more specific rule wins: see the test above.

Adding your own CSS in WordPress

• Classic themes: Appearance > Customize > Additional CSS.
• Block themes: Appearance > Editor > Styles, then the three-dot menu > Additional CSS (available since WordPress 6.2; in 6.9 it moved to the menu in the header of the Styles panel). WordPress notes that this CSS survives theme updates but is cleared when you switch themes.
• Do not edit the theme’s own style.css: an update replaces it. For larger changes, create a child theme, whose style.css names the parent theme folder in a Template: line.

Building a site from scratch? See how to build a website with HTML and put it online.

Official documentation: MDN: Getting started with CSS, MDN: Specificity and WordPress: Main Stylesheet (style.css).