How to Add CSS to HTML: Inline, Internal and External

There are three ways to add CSS to HTML: inline styles, an internal <style> tag, and an external stylesheet file. This lesson shows each one and explains why external CSS is best.

Inline CSS: the style attribute

Inline CSS goes directly on an HTML element using the style attribute. The styles only affect that one element.

<h1 style="color: purple; text-align: center;">Welcome to My Bakery</h1>
<p style="font-size: 20px;">Fresh bread every morning.</p>

In the browser, the heading is purple and centered, and the paragraph text is a little bigger. Notice that each declaration ends with a semicolon, and all of them sit inside the quotes of the style attribute.

Inline styles are quick for a small test, but they get messy fast. If you have 50 paragraphs, you would need to write the same style 50 times. Inline styles also win over most other rules, which can make your CSS confusing later.

Internal CSS: the style tag

Internal CSS goes inside a <style> tag, placed in the <head> of your page. The rules apply to the whole page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Bakery</title>
  <style>
    h1 {
      color: purple;
      text-align: center;
    }
    p {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Bakery</h1>
  <p>Fresh bread every morning.</p>
  <p>Cakes made to order.</p>
</body>
</html>

Now one rule styles every paragraph on the page. Both paragraphs get the bigger font size, and you only wrote it once. This is great for a single-page project or for learning, but the CSS still lives inside one HTML file. Other pages cannot use it.

External CSS: link rel="stylesheet"

External CSS lives in its own file, usually named something like styles.css. You connect it to your HTML with a <link> tag in the <head>. This is how real websites are built.

First, make a folder with two files: index.html and styles.css.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Bakery</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Bakery</h1>
  <p>Fresh bread every morning.</p>
  <p>Cakes made to order.</p>
</body>
</html>

Then put only CSS (no <style> tag) in styles.css:

h1 {
  color: purple;
  text-align: center;
}

p {
  font-size: 20px;
}

The page looks exactly the same as the internal example. The difference is that the styles are now in a separate file. If you add about.html and menu.html, they can all link to the same styles.css, and they will all share one design.

• rel="stylesheet" tells the browser this file is a stylesheet.
• href="styles.css" is the path to the file. If the CSS is in a folder called css, write href="css/styles.css".

Common mistake: Writing <style> tags inside styles.css. A .css file contains only CSS rules. The <style> tag is HTML and belongs only in an HTML file.

Inline vs internal vs external CSS: pros and cons

Method	Where it goes	Good for	Problems
Inline	style attribute on one element	Quick tests, one-off changes	Repeats a lot, hard to maintain, very strong priority
Internal	<style> tag in the <head>	One-page projects, learning	Can't share styles with other pages
External	Separate .css file with <link>	Real websites, any size	One extra file to manage (a tiny cost)

Why external CSS is the best choice

External stylesheets keep content and design apart, like keeping your clothes in a wardrobe instead of on the floor. You get many benefits:

• One change, every page. Change a color once and the whole site updates.
• Cleaner HTML. Your HTML files only contain content and structure.
• Faster websites. The browser downloads the CSS file once and saves it (this is called caching), so the next pages load faster.
• Easier teamwork. One person can work on the HTML while another works on the CSS.

Tip: If your styles don't appear, check the href path first. Open the browser's developer tools (press F12) and look in the Console or Network tab for a "404" error, which means the file was not found.

Practice exercise

Create a folder called bakery with index.html and styles.css. Link the stylesheet, then make the heading orange and all paragraphs dark gray (#333). Next, add a second page menu.html that links the same file, and check that it gets the same styles.

Hint: both HTML files need the same <link rel="stylesheet" href="styles.css"> line in their <head>.

Key takeaways

• Inline CSS uses the style attribute and affects only one element.
• Internal CSS uses a <style> tag in the <head> and affects one page.
• External CSS is a separate .css file linked with <link rel="stylesheet" href="styles.css">.
• Use external CSS for real projects: it is easier to maintain and faster to load.