What is CSS? How CSS Works & Types of CSS (Inline, Internal, External)

In today’s digital world, designing a beautiful and responsive website requires more than just HTML. That’s where CSS (Cascading Style Sheets) comes in. If you’re a beginner in web development, this article will help you understand what CSS is, how it works, and the three main types of CSS: Inline, Internal, and External.

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the look and feel of HTML elements on a web page. It defines styles like:

Colors
Fonts
Layouts
Spacing
Animations
Responsiveness

Why Use CSS?

Keeps content and design separate
Makes your site cleaner and faster
Enables reusable styles across pages
Improves website performance and SEO

How CSS Works

CSS uses selectors to target HTML elements and apply styles through rules made up of properties and values.

Basic Syntax:

selector {
  property: value;
}

Example:

p {
  color: blue;
  font-size: 16px;
}

This CSS rule makes all <p> tags blue with a font size of 16px.

Types of CSS

There are three primary ways to apply CSS to your HTML documents:

1. Inline CSS

Inline CSS is written directly inside the HTML tag using the style attribute.

Example:

<p style="color: red;">This is a red paragraph.</p>

Use When:

Applying styles to a single element
Testing or quick edits

⚠️ Avoid When:

Working on larger projects (hard to maintain)

2. Internal CSS

Internal CSS is placed inside the <style> tag within the <head> section of an HTML file.

Example:

<head>
  <style>
    h1 {
      color: green;
      text-align: center;
    }
  </style>
</head>

Use When:

Styling a single page
You don’t need to reuse styles elsewhere

3. External CSS

External CSS is written in a separate .css file and linked to your HTML using a <link> tag.

Example:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

styles.css

body {
  font-family: Arial, sans-serif;
}

Use When:

Building multiple pages
Creating clean, maintainable, and reusable styles

Conclusion

CSS is the backbone of modern web design, allowing developers to create visually appealing, responsive, and consistent user experiences. Understanding the three types of CSS—inline, internal, and external—is crucial for writing better code and building scalable websites.