How to Add CSS

By /

Now that you know what CSS is, let’s learn how to actually add CSS to an HTML page. There are three main ways to add CSS, and we’ll understand each one step by step.

How to Add CSS to HTML?

You can add CSS to an HTML document in three ways:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Let’s look at each method.

1. Inline CSS

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>Inline CSS Example</title>
</head>
<body>

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

  <p style="color: green;">I am learning CSS.</p>

</body>
</html>

What Happens?

  • The heading appears blue.
  • The paragraph appears green.

Here, the CSS is written directly inside the HTML tags.

2. Internal CSS

Internal CSS is written inside the <style> tag in the <head> section of an HTML document.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>

  <style>
    h1 {
      color: blue;
    }

    p {
      color: green;
    }
  </style>

</head>
<body>

  <h1>Welcome to CSS</h1>

  <p>I am learning CSS.</p>

</body>
</html>

What Happens?

  • All <h1> elements become blue.
  • All <p> elements become green.

Internal CSS is useful when you want to style a single HTML page.

3. External CSS

External CSS is written in a separate file with the .css extension. This is the most commonly used method because you can connect one CSS file to multiple HTML pages.

Step 1: Create an HTML File

Create a file named:

index.html

Copy and paste this code:

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Welcome to CSS</h1>

  <p>I am learning CSS.</p>

</body>
</html>

Step 2: Create a CSS File

Create another file named:

style.css

Copy and paste this code:

h1 {
  color: blue;
}

p {
  color: green;
}

Make sure both files are saved in the same folder.

Your Folder Should Look Like This

my-project/
│
├── index.html
│
└── style.css

Now open index.html in your browser. The heading will appear blue, and the paragraph will appear green.

Which Method Should You Use?

  • Inline CSS → For small and quick styling.
  • Internal CSS → For styling one HTML page.
  • External CSS → For larger websites and multiple pages.

For most websites, External CSS is the recommended method.

Quick Recap

  • CSS can be added to HTML in three ways.
  • Inline CSS uses the style attribute.
  • Internal CSS uses the <style> tag.
  • External CSS uses a separate .css file.
  • External CSS is commonly used for larger websites.

Frequently Asked Questions (FAQs)

Q1. How can I add CSS to HTML?

You can add CSS to HTML in three main ways: Inline CSS, Internal CSS, and External CSS. Each method is used for different styling needs.

Q2. What are the three ways to add CSS to HTML?

The three ways to add CSS to HTML are Inline CSS, Internal CSS, and External CSS.

Q3. What is Inline CSS?

Inline CSS is written directly inside an HTML element using the style attribute. It is useful for applying simple styles to individual elements.

Q4. What is Internal CSS?

Internal CSS is written inside a style tag in the head section of an HTML document. It is commonly used when styling a single web page.

Q5. What is External CSS?

External CSS is written in a separate file with a .css extension and linked to an HTML document. This method allows the same CSS file to style multiple web pages.

Q6. Which is the best way to add CSS to HTML?

External CSS is generally the best option for larger websites because it keeps HTML and CSS separate, makes code easier to manage, and allows one stylesheet to be used across multiple pages.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top