FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Styling

Intermediate

Internal CSS

Learn Internal CSS as the bridge between clean HTML and professional CSS: visual hierarchy, maintainable styling, responsive behavior and live practice.

HTML styling foundation

Internal CSS styles one page from inside the document.

Internal CSS lives inside a style element, usually in the head of the HTML document. It is useful for demos, teaching pages, one-page prototypes and small standalone pages.

It is more maintainable than inline CSS because selectors and declarations live in one place. But it still belongs to one document. If many pages need the same styles, external CSS is usually better.

Internal CSS is a good learning step because you can see HTML and CSS together without creating extra files yet.

style element

Holds CSS rules inside the HTML document.

head placement

The style element usually belongs in head before the visible body content.

Single-page scope

Great for one page, weaker for shared design systems.

Teaching and prototypes

Useful when one file should show the complete example.

Syntax and structure

Internal CSS uses a style element and normal CSS selectors.

The CSS syntax is the same as in an external file. The difference is only where the CSS lives.

Internal CSS for a standalone page

<head>
  <style>
    .lesson-card {
      max-width: 720px;
      margin: 40px auto;
      padding: 32px;
      border-radius: 24px;
      background: #101a2d;
      color: white;
    }
  </style>
</head>
<body>
  <article class="lesson-card">...</article>
</body>

Internal CSS duplicated across many pages

<!-- index.html -->
<style>.button { background: #dc1f36; }</style>

<!-- about.html -->
<style>.button { background: #dc1f36; }</style>

<!-- contact.html -->
<style>.button { background: #dd2239; }</style>

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<head>
  <style>
    .lesson-card {
      max-width: 720px;
      margin: 40px auto;
      padding: 32px;
      border-radius: 24px;
      background: #101a2d;
      color: white;
    }
  </style>
</head>
<body>
  <article class="lesson-card">...</article>
</body>
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<main class="landing">
  <p class="eyebrow">Internal CSS</p>
  <h1>One page, one local style system.</h1>
  <p>Use selectors to style the page without touching the meaning of the HTML.</p>
  <button type="button">Start lesson</button>
</main>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #f4f1ea;
  color: #101620;
}

.landing {
  width: min(760px, calc(100% - 32px));
  padding: 42px;
  border-radius: 28px;
  background: white;
  box-shadow: 0 26px 80px rgba(16, 22, 32, 0.16);
}

.eyebrow { color: #dc1f36; font-weight: 900; text-transform: uppercase; }
h1 { font-size: 48px; line-height: 1; margin: 12px 0 16px; }
p { color: #4b5565; font-size: 18px; line-height: 1.7; }
button { border: 0; border-radius: 999px; padding: 14px 20px; background: #101620; color: white; font-weight: 800; }
button:focus-visible { outline: 4px solid #62d5ff; outline-offset: 4px; }
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<!-- index.html -->
<style>.button { background: #dc1f36; }</style>

<!-- about.html -->
<style>.button { background: #dc1f36; }</style>

<!-- contact.html -->
<style>.button { background: #dd2239; }</style>
What this gives you

A recognizable mistake you can search for and refactor.

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.

Put style in head

The browser can discover styles before painting the page.

Use real selectors

Write classes and element selectors, not only one-off hacks.

Keep it page-sized

If the internal CSS becomes long or repeated, move it to an external file.

Do not mix concerns forever

A small demo can live in one file. A product usually needs separated assets.

Use comments lightly

Comment sections when the CSS grows, but avoid explaining obvious declarations.

Practice clean ordering

Group base styles, layout, components and utilities so you can find things later.

Production thinking

CSS affects trust, accessibility, performance and maintainability.

Why does this matter?

This matters because internal CSS teaches the separation of structure and styling without adding file management yet. It is the stepping stone between style attributes and real stylesheets.

Accessibility

Internal CSS can style focus states, contrast and readable typography. Never remove outlines unless you replace them with an equally clear focus style.

Production note

Internal CSS can be useful for critical CSS or small landing pages, but shared websites usually need external stylesheets for caching and consistency.

SEO note

Internal CSS can help render a page quickly when used carefully, but bloated style blocks make HTML heavier and harder to maintain.

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.

  • Change the button background in CSS, not in HTML.
  • Add a :hover style for the button.
  • Run the preview and check whether the focus style is still visible.

Practice assignment

Do this before moving to the next lesson.

  1. Write a small single-page design with CSS in one organized block.
  2. Use at least three selectors: one base selector, one class and one state selector.
  3. Explain when you would move this CSS into an external file.

Try it yourself

Write internal-style CSS as if it lived in head

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

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.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?