What Is CSS? Inline, Internal and External Styles

What you will learn

In the HTML course you built pages that work, but they look plain: black text on a white background. CSS is the language that fixes that. In this lesson you will learn what CSS is, the three ways to add it to a page (inline, internal and external), how to link your own stylesheet, and why the “C” in CSS stands for cascading.

What is CSS?

CSS stands for Cascading Style Sheets. It describes how HTML elements should look: colours, fonts, spacing, sizes, layout and even animations.

A simple way to think about it:

• HTML is the skeleton and the walls of a house. It decides what exists.
• CSS is the paint, the furniture and the lighting. It decides how it looks.

The same HTML can look completely different with different CSS. Here is a small HTML page:

<h1>My Coffee Corner</h1>
<p>Welcome! Fresh coffee every morning.</p>

On its own it is black text in a Times-style font. Now add this CSS:

h1 {
  color: white;
  background-color: saddlebrown;
  padding: 12px;
}

p {
  color: saddlebrown;
  font-size: 20px;
}

Same HTML, very different result. Use the Try it button on the CSS above to see it run.

Each block in that CSS is called a rule. A rule says “find these elements, and give them these styles”. The next-but-one lesson (CSS Syntax and Selectors) explains rules in detail. For now, just read them like sentences: “Every h1 gets white text on a saddlebrown background with 12px of padding.”

Good to know: CSS is not a programming language. Like HTML it only describes things, but this time it describes how they look, not what they are.

How the browser uses CSS

When you open a page, the browser downloads the HTML, finds any CSS that belongs to it, and combines the two. Each element is drawn using the styles that match it. Change the CSS, refresh the page, and the look changes without touching the HTML at all. That separation is the whole point: HTML for content, CSS for appearance.

Three ways to add CSS

There are three places you can write CSS. They all produce the same visual result, but they are not equally good.

1. Inline CSS

You put the CSS directly on one element using the style attribute:

<h1 style="color: tomato; text-align: center;">My Coffee Corner</h1>
<p style="color: gray;">Welcome!</p>

You have already seen this in the HTML course. It is quick, but it has real problems:

• It styles only that one element. Ten paragraphs mean ten copies of the same style.
• It mixes content and appearance in the same file, which makes the code messy.
• It is hard to change later, because you must hunt through the HTML.

Use inline styles for a quick test at most, not for real pages.

2. Internal CSS

You put a <style> element inside the <head> of the page and write your rules there:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Coffee Corner</title>
  <style>
    h1 {
      color: tomato;
      text-align: center;
    }

    p {
      color: gray;
    }
  </style>
</head>
<body>
  <h1>My Coffee Corner</h1>
  <p>Welcome!</p>
  <p>Fresh coffee every morning.</p>
</body>
</html>

This is much better: the single p rule styles every paragraph on the page. The limit is that the CSS lives inside this one HTML file, so a second page cannot reuse it. Internal CSS is good for one-page demos and experiments.

3. External CSS (the one you will use)

You write the CSS in its own file, usually named style.css, and connect it to your HTML with a <link> element in the <head>.

The HTML file (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Coffee Corner</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>My Coffee Corner</h1>
  <p>Welcome!</p>
  <p>Fresh coffee every morning.</p>
</body>
</html>

The CSS file (style.css), which contains only CSS:

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

p {
  color: gray;
}

This is how almost every real website works, because:

• One file can style many pages. Every page that links style.css gets the same look, and changing one line updates the whole site.
• Your HTML stays clean and easy to read.
• Browsers remember (cache) the file, so it is not downloaded again on every page, which makes the site faster.

Understanding the <link> element

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

• <link> is a void element (no closing tag) and belongs in the <head>.
• rel="stylesheet" tells the browser what kind of file this is (its relationship to the page).
• href is the path to the file, the same idea as the href on a link.

The path is relative to the HTML file:

<link rel="stylesheet" href="style.css">        <!-- same folder -->
<link rel="stylesheet" href="css/style.css">    <!-- inside a css folder -->
<link rel="stylesheet" href="../style.css">     <!-- one folder up -->

In the MyCodeNest editor: the CSS tab is your style.css file. When you open the editor with Practice in Editor or a Try it button, the <link> tag is added to the HTML for you. If you start from a blank editor, add <link rel="stylesheet" href="style.css"> to your HTML yourself, otherwise your CSS will not apply.

Which one should you use?

Method	Where you write it	Best for
Inline	style attribute on one element	A quick test, or a rare one-off
Internal	<style> inside <head>	One-page demos and experiments
External	A separate .css file linked with <link>	Real websites (use this!)

Why “cascading”?

What if two rules try to style the same element differently? CSS has a system for deciding the winner, and that system is the cascade. The simplest part of it is this: when two rules are equally specific, the one written last wins.

h1 {
  color: tomato;
}

h1 {
  color: seagreen;
}

The heading turns green, because the second rule comes later and overrides the first. Try swapping the two rules and watch the colour change.

There are more parts to the cascade, for example inline styles beat rules in a stylesheet, and some selectors are stronger than others. You will learn all of it in the Specificity and the Cascade lesson. For now, remember: order matters.

Common mistakes

• Forgetting rel="stylesheet" on the <link>. Without it the browser does not treat the file as CSS.
• A wrong path or file name. href="styles.css" will not find a file called style.css. File names are case-sensitive on most web servers, so Style.css and style.css are different files.
• Putting <style> tags inside a .css file. A .css file holds only CSS. The <style> tag belongs in HTML.
• Writing CSS in the HTML without <style>. The browser then shows your CSS as plain text on the page.
• Editing the CSS but not saving, or not refreshing the browser. If a change does not show up, save the file and do a hard refresh (Ctrl + Shift + R, or Cmd + Shift + R on Mac).
• Using inline styles everywhere. They work, but they turn into a maintenance nightmare very quickly.

Practice

1. Click Practice in Editor. In the CSS tab, change the h1 colour to any colour name you like (for example teal or crimson), then add a rule that gives the p a color and a font-size: 18px.

2. Here is a page that uses inline styles. Move all the styles into the CSS tab using an h1 rule and a p rule, and delete the style attributes from the HTML:

   <h1 style="color: navy; text-align: center;">Study Plan</h1>
   <p style="color: gray;">Monday: HTML</p>
   <p style="color: gray;">Tuesday: CSS</p>

3. In the HTML tab, remove the <link> line (if you can see it), or write a new page with an internal <style> block instead. Which version do you find easier to read?

4. Cascade experiment: write two p rules that set different colours. Which colour wins? Now swap the order of the rules. What changes?

Recap

• CSS (Cascading Style Sheets) controls how HTML looks. HTML is the structure, CSS is the appearance.
• A CSS rule picks some elements and gives them styles.
• You can add CSS inline (style attribute), internal (<style> in the head) or external (a .css file linked with <link rel="stylesheet" href="...">).
• External CSS is the best choice for real websites: reusable, clean and cacheable.
• When rules of equal strength conflict, the last one wins. That is the start of the cascade.
• Next you will learn how to inspect and debug your CSS with the browser’s DevTools.