Exploring CSS Styling Methods: Inline, Internal, and External CSS

2 min readJul 13, 2023

Inline CSS, internal CSS, and external CSS are three different methods of applying Cascading Style Sheets (CSS) to HTML documents.

Inline CSS: Inline CSS involves writing CSS code directly within the HTML tags using the style attribute. The CSS rules defined inline apply only to the specific element that contains the inline style. Here's an example:

<p style="color: blue; font-size: 18px;">This is a paragraph with inline CSS.</p>

In this example, the color property is set to blue, and the font-size property is set to 18 pixels for the <p> element. Inline CSS is useful when you want to apply unique styles to individual elements.

Internal CSS: Internal CSS is placed within the <style> tags in the head section of an HTML document. The CSS rules defined internally apply to the entire HTML document or a specific section defined by a class or ID. Here's an example:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph with internal CSS.</p>
</body>
</html>

In this example, the CSS rules within the <style> tags apply to all <p> elements in the document. Internal CSS is useful when you want to apply consistent styles to multiple elements within a single HTML file.

External CSS: External CSS involves creating a separate CSS file with a .css extension and linking it to the HTML document using the <link> tag. The CSS rules defined externally apply to the HTML document or multiple HTML documents when linked. Here's an example:

HTML file (index.html):

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is a paragraph with external CSS.</p>
</body>
</html>

CSS file (styles.css):

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

In this example, the CSS rules in the styles.css file apply to all <p> elements in the index.html file. External CSS is useful when you want to apply the same styles to multiple HTML files, promoting code reusability and separation of concerns.

Overall, inline CSS is useful for applying unique styles to individual elements, internal CSS is suitable for applying consistent styles within a single HTML file, and external CSS is beneficial for applying styles across multiple HTML files.

“👏🏻👏🏻👏🏻👏🏻 Clap to show support. Follow me for more insights. Let’s make a positive impact!”

Exploring CSS Styling Methods: Inline, Internal, and External CSS

Written by Ramdhas