Types of CSS

« Prev Next »

There are 3 ways to apply CSS to HTML. Each method has different characteristics, advantages and disadvantages. They are useful in different circumstances, depending on the size of the project, the reusability of the styles and maintenance requirements.

css-type

Inline CSS

  • CSS rules are written directly within an HTML element, using the style attribute.
  • Quick and dirty, suitable for 1-line styles.
  • Not recommended for larger projects, as it is not easily maintained.

Syntax

<tagname style="property: value;">Content</tagname>

Example

<p style="color: red; font-size: 18px;">This is Inline CSS</p>
Run ›

Internal CSS

  • CSS rules are written within the <style> tag inside the <head> tag of the HTML document.
  • Styles are global to the page, but not to other pages.

Syntax

<head>
  <style>
    selector {
      property: value;
    }
  </style>
</head>

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 18px;
      color: gray;
    }
  </style>
</head>
<body>

<h1>Internal CSS Example</h1>
<p>This paragraph is styled using internal CSS.</p>

</body>
</html>
Run ›

External CSS

  • CSS rules are written in an external .css file.
  • Linked to HTML using the <link> tag inside <head>.
  • Extremely reusable for multiple pages.
  • Best for medium to large sites.

Syntax

<head>
  <link rel="stylesheet" href="styles.css">
</head>
Type Location Scope Use Case
Inline Inside HTML tag (style="...") Single element Quick fixes, one-off styling
Internal <style> in <head> Single pag e Small projects, single-page sites
External Separate .css file Multiple pages Large websites, reusable styles
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.