HTML <style> Element: Embedded CSS Basics

A style element lets you put CSS inside an HTML document. CSS changes appearance without changing the meaning of headings and paragraphs.

What You Need to Know

This is useful for small demonstrations; real projects often move CSS into a separate file using a link element. The style element normally belongs in head.

Think of an HTML document as a small book: the browser needs a title and some information about how to read it, while visitors need the actual chapters and text.

Example: See It in Action

This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.

If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.

<style>
    body { font-family: system-ui, sans-serif; }
    h1 { color: darkslateblue; }
</style>
<h1>My color experiment</h1>

Let’s Understand the Example

• The style element holds CSS rules that affect appearance, not the meaning of the HTML.
• An h1 introduces the main subject of the page. Use the heading level for structure rather than font size.

You should see a readable heading and its related content. The heading level tells readers how the ideas fit together, not merely how large the letters look.

What Should You See?

The page should display “My color experiment” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.

Try It Yourself

1. Change the h1 color and then move the CSS to a separate file in a later exercise.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Assuming CSS rules such as color are HTML attributes that belong on every heading.
• The title in the browser tab and the heading visible in the page are different pieces of information.

Key Takeaways

• A style element lets you put CSS inside an HTML document.
• The style element holds CSS rules that affect appearance, not the meaning of the HTML.
• This is useful for small demonstrations; real projects often move CSS into a separate file using a link element. The style element normally belongs in head.