The Style Element in CSS

• Definition: The <style> element adds embedded CSS directly inside an HTML document’s <head>.

• Use Cases: It works best for quick testing, single-page sites, and code demos.

• Modern Syntax: HTML5 automatically assumes CSS, so the type="text/css" attribute is no longer required.

• Best Practice: Large projects should use external stylesheets instead for better reusability and maintenance.

RECOMMENDED ARTICLES

In previous modules, you learned how to connect CSS using an external stylesheet and the <link> element.

Now let’s look at another way to add CSS to a webpage: the <style> element.

Instead of placing CSS in a separate file, we can place it directly inside the HTML document.

This approach is called embedded CSS or internal CSS.

What Is the <style> Element?

The <style> element allows you to write CSS directly inside an HTML document.

Example:

The browser reads the CSS inside the <style> element and applies it to the page.

Why Use the <style> Element?

Sometimes creating a separate CSS file is unnecessary.

For example:

• Testing CSS quickly
• Creating a simple webpage
• Demonstrating CSS examples in tutorials
• Building a single-page project

In such situations, embedded CSS can be convenient.

Simple Analogy

Imagine decorating a room.

External CSS

• You keep all decoration instructions in a separate notebook.

Embedded CSS

• You write the decoration instructions directly on a whiteboard inside the room.

Both approaches work. The difference is where the instructions are stored.

Basic Syntax

A style block begins with:

<style>

and ends with:

</style>

Everything between these tags is CSS.

Example:

Complete Example

When the page loads:

The heading appears navy.

The paragraph appears dark gray.

Where Should the Style Element Be Placed?

The <style> element belongs inside the <head> section.

Correct:

Why Place It in the Head?

The browser reads the head section before displaying the page.

This allows the styles to be loaded before the content appears.

As a result:

• The page renders correctly.
• Visual flickering is reduced.
• The browser works more efficiently.

Incorrect Placement

Avoid:

Although some browsers may still process it, this is not considered good practice.

Understanding type=”text/css”

The type attribute tells the browser what type of content is inside the style element.

Example:

Is the type Attribute Still Required?

In modern HTML5, browsers automatically assume CSS.

Therefore most developers simply write:

You may still encounter type=”text/css” in older books and projects.

Note

When reading older documentation, do not be surprised if every style element includes:

type=”text/css”

It was once considered standard practice.

What Is an Embedded Stylesheet?

The CSS inside a <style> element is called an:

• Embedded stylesheet
• Internal stylesheet
• Document stylesheet

All three terms refer to the same concept.

Example:

This stylesheet exists inside the HTML document itself.

Embedded CSS vs External CSS

Embedded CSS

Stored inside the HTML file.

External CSS

Stored in a separate file.

Comparison

Can Embedded CSS Use External Stylesheets?

Yes.

A style block can import external CSS files.

This is done using:

@import

Example

The browser:

• Loads theme.css
• Reads the embedded CSS
• Applies both sets of rules

How Browsers Process Embedded Stylesheets

Suppose the browser encounters:

The browser:

Step 1

Reads the stylesheet.

Step 2

Stores the rules.

Step 3

Finds matching elements.

Step 4

Applies the styles.

When Should You Avoid Embedded CSS?

For larger websites:

• 10 pages
• 50 pages
• 100 pages
• 500 pages

embedded CSS becomes difficult to maintain.

External stylesheets are usually a better choice.

Memory Aid

Imagine a recipe.

Embedded CSS

• The recipe is written directly on the cooking pot.

External CSS

• The recipe is stored in a cookbook.

For one meal, writing on the pot may be fine.

For a restaurant, a cookbook is much better.

Common Mistakes Beginners Make

1. Putting CSS Outside the Style Element

Wrong:

CSS must be inside a style block.

Correct:

2. Placing the Style Element in Random Locations

Wrong:

Place it inside the head section.

3. Forgetting the Closing Tag

Wrong:

4. Mixing HTML and CSS

Wrong:

Only CSS rules belong inside a style element.

5. Using Embedded CSS for Large Projects

Beginners sometimes place hundreds of CSS rules inside one HTML page.

This quickly becomes difficult to manage.

For larger projects, use external stylesheets.

Note

Professional developers typically prefer external stylesheets because they:

• Improve organization
• Promote reuse
• Simplify maintenance
• Reduce duplication

However, understanding embedded stylesheets is essential because you will encounter them in tutorials, examples, and existing projects.