DEV Community

S Sarumathi
S Sarumathi

Posted on

Types of CSS

#beginners #webdev #css #html

  • Inline CSS

  • Internal or Embedded CSS

  • External CSS

Inline CSS

  • CSS is written inside the HTML tag using the style attribute.

  • Used to apply a single, quick style to an element.

  • Not recommended for large projects (hard to maintain).

<h2 style="color: blue; text-align: center;">Welcome to My Blog</h2>
<p style="color: green; font-size: 18px;">This is a simple example of inline CSS.</p>
Enter fullscreen mode Exit fullscreen mode

Internal or Embedded CSS

  • CSS is written inside a <style> tag in the

    section of the HTML file.

  • Used when styling is specific to a single page.

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    body {
      background-color: lightyellow;
    }
    h2 {
      color: darkblue;
      text-align: center;
    }
    p {
      font-size: 18px;
      color: brown;
    }
  </style>
</head>
<body>
  <h2>My CSS Blog</h2>
  <p>This blog explains Internal CSS.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

External CSS

  • CSS is written in a separate file (e.g., style.css) and linked to the HTML file using the tag.

  • Best for large websites — easy to manage and reuse.

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

Top comments (0)