DEV Community

Cover image for Types of CSS
Rakshambika
Rakshambika

Posted on

Types of CSS

#css #webdev #vscode

Types of CSS

CSS (Cascading Style Sheets) is used to control the appearance and layout of web pages. It allows developers to apply colors, fonts, spacing, positioning, and other visual styles to HTML elements. There are three main types of CSS: Inline CSS, Internal CSS, and External CSS.

1. Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute. The styles apply only to that specific element.

Example 

<p style="color: blue; font-size: 20px;">
    Welcome to CSS!
</p>
Enter fullscreen mode Exit fullscreen mode

Advantages

  • Quick and easy to apply.
  • Useful for testing small style changes.
  • Overrides internal and external styles when specificity rules allow.

Disadvantages

  • Difficult to maintain for large projects.
  • Cannot be reused across multiple elements.
  • Makes HTML code less readable.

2. Internal CSS

Internal CSS is written inside a <style> tag within the <head> section of an HTML document. The styles apply to all matching elements on that page.

Example 

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Advantages

  • Keeps styles separate from individual elements.
  • Suitable for single-page websites.
  • Easier to manage than inline CSS.

Disadvantages

  • Styles are limited to one webpage.
  • Not reusable across multiple pages.

3. External CSS

External CSS is stored in a separate .css file and linked to the HTML document using the <link> tag. This is the most commonly used method in modern web development.

HTML File 

<head>
    <link rel="stylesheet" href="styles.css">
</head>
Enter fullscreen mode Exit fullscreen mode

CSS File (styles.css) 

body {
    background-color: lightgray;
}

h1 {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

Advantages

  • Reusable across multiple webpages.
  • Easy to maintain and update.
  • Keeps HTML clean and organized.
  • Improves consistency throughout a website.

Disadvantages

  • Requires an additional file request.
  • Styles will not load if the CSS file path is incorrect.

CSS Priority Order

When multiple CSS types target the same element, the browser follows a priority order:

  1. Inline CSS (Highest Priority)
  2. Internal CSS
  3. External CSS (Lowest Priority)

Example 

<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>

<body>
    <p style="color: red;">
        Hello World
    </p>
</body>
Enter fullscreen mode Exit fullscreen mode

Output: The text color will be red because Inline CSS has higher priority than Internal CSS.

Top comments (0)