Blog

You are currently viewing Types of CSS

Types of CSS

CSS (Cascading Style Sheets) is a stylesheet language used to control the visual presentation of web pages. It works alongside HTML (HyperText Markup Language) to define elements’ appearance, including layout, colors, fonts, and animations. Without CSS, websites would be plain, unstyled documents with default browser formatting. This article discusses the three main types of CSS and how to use them to build a responsive website.

You can begin your web development journey by enrolling in our web development full course. You will be ready to get a high-paying job within four months as a front-end developer.

Types of CSS 

There are three main types of CSS. These are:

  1. Inline CSS: This style is applied directly within an HTML element using the style attribute.
  2. Internal (Embedded) CSS. This Style is defined within a <style> block in the HTML <head>.
  3. External CSS: Styles stored in a separate .css file and linked to HTML documents.

1. Inline CSS

Inline CSS is styling applied directly within an HTML element using the style attribute. The syntax involves adding CSS property-value pairs inside the style attribute of an HTML tag. To learn more about CSS properties, check out the CSS Properties Guide.

Example:

<p style="color: blue; font-size: 16px;">This is a blue text.</p>

<p> Tag

This is an HTML paragraph element that displays text content.

By default, browsers render <p> text in black with a default font size.

style Attribute

The style attribute is used to apply CSS directly to this specific <p> element.

Everything inside style=”…” is CSS code.

CSS Properties Inside style include:

 color: blue;

   -Sets the text color to blue.

   -color is the CSS property, and blue is its value.

font-size: 16px;

-Sets the font size to 16 pixels.

 -font-size is the CSS property, and 16px is its value.

 -Semicolons separate multiple CSS rules (;).

Note:

  • No Selectors Needed: Unlike internal/external CSS, inline styles don’t require a CSS selector (like p {…}).

  • Overrides Other CSS: Inline styles have the highest priority (unless !important is used elsewhere).

  • Single-Element Scope: Only affects this specific <p> tag—other <p> tags on the page remain unstyled (unless they also have inline CSS).

Advantages

  • Quick and Easy: Ideal for applying styles to a single element without needing separate CSS rules.
  • Highest Specificity: Overrides styles from internal and external CSS, making it useful for quick fixes or testing.

Disadvantages

  • Poor Maintainability: Difficult to manage across large projects since styles are scattered throughout HTML.
  • Mixes Content with Presentation: Violates the principle of separation of concerns, making code harder to read and update.
  • No Reusability: Styles cannot be reused across multiple elements, leading to code duplication.

When to Use Inline CSS

  • For temporary styling during development or debugging.
  • When a single element needs a unique style that won’t be reused.
  • In email templates or environments where external CSS may not be supported.

Inline CSS should be used sparingly, as it can make long-term maintenance challenging. 

2. Internal  CSS

Internal CSS is also called embedded CSS. It is written inside a <style> tag, which is placed within the <head> section of an HTML document.

 It allows you to style multiple elements on the same page.

Example:

<!DOCTYPE html>

<html>

<head>

  <style>

    p {

      color: red;

      font-size: 16px;

    }

  </style>

</head>

<body>

  <p>This paragraph will be red.</p>

  <p>This one too!</p>

</body>

</html>

In this example, all <p> elements on the page will be styled with red text and a font size of 16px.

Advantages of Internal CSS:

  1. Better Organization than Inline CSS:
     Styles are grouped together in one section (inside the <style> tag), instead of being spread across the HTML elements.
  2. Applies Styles to Multiple Elements:
     You can target many elements at once with selectors, making it more efficient than inline CSS when working on a single page.

 Disadvantages of Internal CSS:

  1. Not Reusable Across Pages:
     Styles written in an HTML file apply only to that file. If you have multiple pages, you’ll have to duplicate the style block in each one.
  2. Increases Page Load Time if Overused:
     Putting too many styles in the HTML file can make the page heavier and slightly slower to load, especially if you could’ve used an external stylesheet instead.

 How Internal CSS Works

Internal CSS lives inside a <style> tag within the <head> of your HTML document. It tells the browser:

“Before rendering anything, here are the style rules for this page.”

The browser reads the style block first and applies the rules to the matching elements as it renders the page.

When Should You Use Internal CSS?

Best for:

  • Small projects or one-off pages (like email templates, landing pages, or small assignments).
  • Prototypes or demos where you don’t need multiple HTML files.
  • Quick testing of styles before moving them to an external stylesheet.

Avoid using internal CSS when:

  • You have multiple pages and want consistent styling.
  • You want to keep content and design separate (good practice in professional work).
  • You want faster performance via caching (external CSS can be cached, internal can’t).

CSS Priority Rules (The Cascade)

CSS applies styles based on a hierarchy known as the cascade, which determines which styles take priority when multiple rules target the same element.

From highest to lowest priority:

Inline styles: these are written directly inside an HTML element using the style attribute.
 Example:

<p style="color: blue;">Hello</p>

Internal (embedded) styles: these are written within a <style> tag in the HTML <head>.
 Example:

<style>

  p {

    color: red;

  }

</style>

External stylesheets are styles linked from an external .css file using the <link> tag.
 Example:

<link rel="stylesheet" href="style.css">

Browser default styles – if no other styles are applied, the browser’s built-in defaults are used. These vary depending on the browser.

 Example in Action

Let’s say you have the following HTML:

<p style="color: blue;">Hello</p>

And in your internal CSS, you define the following:

p {

  color: red;

}

In this case, the inline style takes priority, so the text appears blue even though there’s a conflicting internal style.

Maintenance and Scalability

Internal CSS doesn’t scale well:

  • Repeating styles in many HTML files makes them harder to maintain.
  • You end up copying the same <style> block into each file.
  • Changing the design later? You’ll need to update every file manually.

In contrast, external CSS lets you change the design site-wide by editing just one file. Want to learn how to structure your code like a pro and build scalable, professional websites? Join our software development course in Kenya and get hands-on training in HTML, CSS, and more.

 Advanced Example

Let’s say you have different elements with custom styles on a single page:

<head>

  <style>

    h1 {

      color: dark green;

      text-align: center;

    }

    .highlight {

      background-color: yellow;

      font-weight: bold;

    }

    #special {

      font-size: 20px;

      color: purple;

    }

  </style>

</head>

<body>

  <h1>Welcome!</h1>

  <p>This is a <span class="highlight">highlighted</span> word.</p>

  <p id="special">This is a special paragraph.</p>

</body>

Here you’re using:

  • An element selector (h1)
  • A class selector (.highlight)
  • An ID selector (#special)

This shows that internal CSS still allows for complex styling, but it’s better suited for single-document use cases. For a university-level explanation of when internal versus external stylesheets are appropriate, see Wellesley College’s guide on CSS best practices that emphasizes using internal CSS only when needed in one-page scenarios.

3. External CSS 

External CSS is a separate .css file that contains all your style rules. You link this file to your HTML documents using a <link> tag in the <head> section.

This method separates content (HTML) and style (CSS) a best practice in web development.

Example

 style.css (External file)

body {

  font-family: Arial, sans-serif;

  background-color: #f9f9f9;

}

h1 {

  color: navy;

  text-align: center;

}

p {

  color: #555;

}

 index.html (HTML file)

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <h1>Welcome to My Website</h1>

  <p>This is a paragraph styled using external CSS.</p>

</body>

</html>

Advantages of External CSS

  1. Reusable Across Multiple Pages
     Link the same CSS file to multiple HTML files. This ensures a consistent look and makes updates easier.
  2. Separation of Concerns
     Keeps your HTML clean and focused on content, and your CSS focused on styling.
  3. Easier Maintenance
     Want to change your font or color scheme? Update one file instead of editing styles in every HTML page.
  4. Smaller HTML Files
     Your HTML stays lightweight and loads faster because it doesn’t carry all the styling information inside.
  5. Browser Caching
     Browsers cache the external CSS file after the first load, speeding up future visits.

 Disadvantages of External CSS

  1. Slightly Slower First Load
     The browser needs to make an extra HTTP request to fetch the .css file, which can delay rendering on slower connections.
  2. No Styles Without Internet (if hosted externally)
     If the CSS file is hosted on a server and the user loses connection, styles might not load. This is rare but possible.

 When to Use External CSS?

For any project with more than one HTML file
 For scalable, maintainable, and professional websites
 When working in teams or using version control like Git
 When optimizing performance with caching

 Comparison with Inline and Internal CSS. 

Inline CSS

  • Location: Directly within the HTML tag
     Example:

    <p style="color: red;">Text</p>
  • Reusability: Only affects a single element
  • Maintenance: Difficult to manage in larger projects
  • Performance: Slowest, especially with many inline styles
  • Best For: Quick testing or very small edits

2. Internal CSS

Location: Inside a <style> tag within the HTML <head>
 Example:
<style>

 p { color: red; }

</style>

  • Reusability: Only works within that specific HTML file
  • Maintenance: Moderate manageable for small projects
  • Performance: Okay, but not ideal for larger sites
  • Best For: Simple one-page websites or prototypes

3. External CSS

Location: In a separate .css file linked to the HTML
 Example:

 p { color: red; }
  • Developers can reuse it across multiple HTML files.
  • Maintenance: Easiest to manage and scale
  • Performance: Best, especially when the browser caches the CSS
  • Best For: Full-scale websites and production environments

Best Practices for Using CSS Types

 Use Inline CSS Sparingly

  • Use only for quick fixes or dynamic changes (like JavaScript interactions).
  • Not ideal for a large project, it clutters HTML and makes code hard to update.

 Internal CSS for Single-Page Applications

  • Best for small websites, email templates, or prototypes.
  • All styles are in the same file, which makes setup easy, but it doesn’t scale well across multiple pages.

 Use External CSS for Scalable Projects

  • Ideal for multi-page websites and professional development.
  • Styles are kept in a separate .css file, making them reusable and easy to maintain.

 Combine Approaches When Necessary

  • Example: External CSS for overall site styles + inline for small overrides.
  • Choose the best mix based on your project’s size and complexity.

In conclusion, choosing the right type of CSS, whether inline, internal, or external, depends on the size and complexity of your project. Inline CSS is useful for quick, one-off changes. Internal CSS works well for single-page designs. External CSS is the most scalable option for multi-page websites. Understanding how each type functions and when to use them helps you write cleaner, more maintainable, and efficient code.

Leave a Reply