Back to Web Development

CSS Styles Lab

This tiny page starts with external CSS. Your job is to rebuild the same page two more ways: internal CSS and inline CSS.

Goal: all three finished pages should look the same, but the CSS should live in a different place each time.

External CSS

The CSS lives in a separate file. This page starts that way with css-styles-lab.css.

An external stylesheet is connected with a link tag in the HTML head. The browser reads css-styles-lab.html, then loads css-styles-lab.css for the colors, spacing, and fonts.

Best use: one CSS file can style many pages.

Internal CSS

The CSS moves into a <style> block inside the HTML <head>.

Internal CSS still uses the same selectors and declarations. The difference is that the CSS is stored inside the HTML file instead of in a separate file.

Best use: a small one-page demo or quick practice file.

Inline CSS

The CSS moves directly onto HTML tags with the style="" attribute.

Inline CSS styles one exact tag at a time. A rule like color: blue; moves directly onto the element that needs it.

Best use: testing one quick style, not building a whole website.

Your Job

Part 1: Make the external CSS starter

  1. Create css-styles-lab.html and css-styles-lab.css in VS Code.
  2. Open this page source with Ctrl+U, copy the HTML, and paste it into css-styles-lab.html.
  3. Open css-styles-lab.css, copy the CSS, and paste it into your CSS file.
  4. Open css-styles-lab.html in your browser. It should look like this page.

Part 2: Build the internal CSS version

  1. Make a copy of css-styles-lab.html named internal-css.html.
  2. In internal-css.html, delete the external stylesheet line: <link rel="stylesheet" href="css-styles-lab.css">.
  3. In the <head> section, add a <style> block and paste all of the CSS inside it.

Internal CSS example:

<head>
  <title>CSS Styles Lab</title>
  <style>
    body { background: #eef6ff; font-family: Arial, sans-serif; }
  </style>
</head>

Part 3: Build the inline CSS version

  1. Make another copy of css-styles-lab.html named inline-css.html.
  2. In inline-css.html, delete the external stylesheet line.
  3. Move the CSS declarations directly onto the matching HTML tags with style="".
  4. If one element matches more than one CSS rule, combine all of those declarations into one style="" attribute.

Inline CSS example with a span:

External CSS:
.term { background: #fef08a; }

Original HTML:
<span class="term">link tag</span>

Inline HTML:
<span style="background: #fef08a;">link tag</span>

Inline CSS example with combined rules:

External CSS:
article { border: 3px solid #1f2937; padding: 16px; }
.card { margin: 18px 0; }
.external { background: #dcfce7; }

Original HTML:
<article class="card external">

Inline HTML:
<article style="border: 3px solid #1f2937; padding: 16px; margin: 18px 0; background: #dcfce7;">

Tip: do the internal version first. Then use it as a guide when you build the inline version.

Turn in: internal-css.html and inline-css.html.