CSS Integration

Connect CSS to HTML using inline, internal, and external styles.

CSS integration means connecting CSS to an HTML document so the browser can apply visual styles to the webpage.

HTML creates elements such as headings, paragraphs, images, and buttons. CSS controls how these elements look.

For example:

HTML
<h1>Welcome to DevBrainBox</h1>

CSS can change the heading's colour:

CSS
h1 {
  color: blue;
}

There are three main ways to integrate CSS with HTML:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

HTML
<h1 style="color: blue;">Welcome to DevBrainBox</h1>

You can add multiple declarations by separating them with semicolons:

HTML
<p style="color: green; font-size: 18px;">
  Start learning CSS today.
</p>

Inline CSS is useful for:

  • Applying a unique style to one element
  • Quickly testing a CSS declaration
  • Creating simple HTML email styles

However, it has some disadvantages:

  • Styles must be repeated on multiple elements.
  • HTML becomes longer and harder to read.
  • Updating repeated styles takes more time.
  • It is difficult to manage on a large website.

Inline CSS is best used only when a style is needed for one specific element.

Internal CSS

Internal CSS is written inside a <style> element. The <style>element is normally placed within the <head> section of the HTML document.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Example</title>

  <style>
    h1 {
      color: navy;
    }

    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Learn CSS</h1>
  <p>This page uses internal CSS.</p>
</body>
</html>

Internal CSS is helpful for:

  • A single-page website
  • A small practice project
  • A page with a unique design
  • Testing several styles together

The styles apply only to the current HTML page. If a website contains several pages, the same CSS may need to be copied into every document.

External CSS

External CSS is written in a separate file with a .css extension. This file is connected to HTML using the <link> element.

First, create a file named styles.css:

CSS
body {
  background-color: lightblue;
}

h1 {
  color: navy;
}

p {
  font-size: 18px;
}

Connect it to the HTML document:

HTML
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>

The <link> element contains two important attributes:

  • rel="stylesheet" identifies the file as a stylesheet.
  • href="styles.css" provides the location of the CSS file.

External CSS is commonly preferred because:

  • One stylesheet can control multiple webpages.
  • HTML files remain cleaner.
  • Styles can be reused.
  • Website-wide changes are easier.
  • The design stays consistent across pages.

Choosing the Right Integration Method

Choose the method based on your project:

  • Use inline CSS for a small, element-specific style.
  • Use internal CSS for a simple page with unique styles.
  • Use external CSS for reusable styles and multi-page websites.

For most websites, external CSS is the best choice because it creates cleaner and more maintainable code.