CSS Tutorial

CSS Introduction
CSS Syntax
CSS Selectors
How to Add CSS

How to Add CSS in HTML – Styling Made Simple at HQLEduTech

ppens When a Browser Loads Your Page?

When a browser loads your HTML document, it checks for CSS rules—either embedded in the document or linked from an external file—to apply styles such as layout, colors, fonts, and spacing.

Let’s look at the three main ways to add CSS:

1. External CSS

Best For: Styling multiple web pages consistently

External CSS is the most efficient and scalable way to manage styles. You write your styles in a separate .css file and link it to your HTML. This allows for cleaner code and centralized control over your website’s appearance.

How to Use:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <h1>Welcome to HQLEduTech</h1>
  <p>Master modern web design with us.</p>

</body>
</html>

Sample styles.css:

body {
  background-color: #f0f8ff;
}

h1 {
  color: #003366;
  margin-left: 30px;
}

✅ Tip: No space between numeric values and units.
❌ Incorrect: margin-left: 30 px;
✅ Correct: margin-left: 30px;

2. Internal CSS

Best For: Styling a single page or creating a quick prototype

Internal CSS is written inside a <style> tag within the <head> section of your HTML file. It’s convenient for single-page designs or temporary experiments.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #fff8dc;
    }

    h1 {
      color: #800000;
      text-align: left;
    }
  </style>
</head>
<body>

  <h1>Explore Our Courses</h1>
  <p>Enroll in HTML, CSS, JavaScript, and more.</p>

</body>
</html>

3. Inline CSS

Best For: Applying a unique style to a specific element

Inline CSS is added directly to an HTML element using the style attribute. While it can be useful for small tweaks, overuse leads to cluttered and hard-to-maintain code.

Example:

<!DOCTYPE html>
<html>
<body>

  <h1 style="color: steelblue; text-align: center;">HQLEduTech Web Design</h1>
  <p style="font-size: 18px; color: darkred;">Start building your skills today.</p>

</body>
</html>

⚠️ Note: Avoid using inline styles excessively in professional projects.

What if All Three Are Used?

When styles come from multiple sources, the browser decides which one takes effect using a priority rule called the Cascading Order.

Priority Order (from highest to lowest):

  1. Inline CSS
  2. Internal CSS
  3. External CSS
  4. Browser default styles

Example:

External CSS (styles.css)

h1 {
  color: navy;
}

Internal CSS (in <style> block)

h1 {
  color: orange;
}

Inline HTML

<h1 style="color: green;">Welcome</h1>

✅ Final Output: The heading will appear green (inline overrides internal and external).

CSS Placement Matters

Case 1: Internal after External

<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    h1 { color: orange; }
  </style>
</head>

✅ The h1 will be orange (internal overrides external).

Case 2: Internal before External

<head>
  <style>
    h1 { color: orange; }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>

✅ The h1 will follow external CSS (e.g., navy), because it comes later in the document.

Best Practices from HQLEduTech

  • Use external stylesheets for scalability and cleaner code.
  • Reserve internal CSS for individual pages or quick testing.
  • Limit inline CSS to rare, one-off styling needs.
  • Organize styles consistently and avoid duplication.
  • Follow proper syntax to prevent browser rendering issues.

Final Thoughts

Understanding how to add CSS to HTML is your first step toward becoming a confident web developer. At HQLEduTech, we don’t just teach syntax—we teach structure, strategy, and standards that scale in real-world projects.

Start practicing now and bring your web pages to life with CSS.

Scroll to Top