Ways to Add CSS

CSS can be added to HTML documents in three main ways, each serving a specific use case depending on the size and complexity of your project:

Inline CSS
Internal CSS
External CSS

Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute. It is applied to a single element only.

Syntax

				
					<h1 style="color: purple;">I'm Arshyan</h1>
<h2>I'm Learn With Arshyan</h2>

Explanation:

The style attribute is added to the <h1> tag.
Only this h1 will be styled in
Other elements (like h2) remain unaffected.

Best For: Quick, one-time custom styles

Drawback: Difficult to manage and maintain in larger projects.

Internal CSS

Internal CSS is written inside a <style> tag placed in the <head> section of an HTML page. It allows you to apply styles to multiple elements on the same page.

Syntax

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

<body>
  <h1>Learn With Arshyan</h1>
  <p>I'm Arshyan, from Learn With Arshyan</p>
  <p>I'm a Developer and founder of learnwitharshyan.com</p>
</body>

Best For: Single-page projects or styles that are only needed for one page.

Tip: Always place the <style> block inside the <head> section for best practices.

External CSS

External CSS stores all style rules in a separate .css file, which is then linked to one or more HTML files using a <link> tag.

HTML File:

				
					<html lang="en">
<head>
  <title>Learn With Arshyan</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p>I'm Arshyan, from Learn With Arshyan</p>
  <p>I'm a Developer and founder of learnwitharshyan.com</p>
</body>
</html>

CSS File (style.css):

				
					p {
  color: red;
}

Explanation:

The <link> tag connects the HTML to the CSS file.
rel= “stylesheet” tells the browser it’s a CSS file.
herf= “style.css” points to the file location.

Best For: Larger projects where the same style is reused across multiple pages.

Advantages:

keep HTML clean and readable.
Styles are easy to manage and update.
Encourages code reusability and modular design.

CSS Priority

If the same style is defined in all three methods, CSS follows this order of precedence:

Inline CSS > Internal CSS > External CSS

That means:

Inline styles override everything else.
Internal styles override external styles.
External styles apply if no other styles conflict.