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. Let’s start with How to Add CSS.

How to Add CSS to HTML?

You can add CSS to 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 to add CSS in HTML?

  • 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

  • There are three ways to link CSS to HTML.
  • 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.

Mini Quiz

0%

CSS - QUIZ 2

1 / 5

Q1. How many main ways are there to add CSS to an HTML document?

2 / 5

Q2. Where is Inline CSS written?

3 / 5

Q3. Where is Internal CSS written?

4 / 5

Q4. Which method uses a separate file with the .css extension?

5 / 5

Q5. Why is External CSS recommended for larger websites?

Your score is

The average score is 100%

0%

By Wordpress Quiz plugin

Mini Project

Mini Project: Personal Introduction Card

Question:

Create a simple personal introduction webpage with your name, a short introduction, and different text colors using Inline, Internal, and External CSS.

Requirements

  • Add a main heading with your name.
  • Add a short paragraph introducing yourself.
  • Use Inline CSS to change the main heading color.
  • Add another heading for your interests.
  • Use Internal CSS to change the interests heading color.
  • Add a short paragraph about your interests.
  • Add another heading for your skills.
  • Create a separate style.css file.
  • Use External CSS to change the skills heading color.
  • Link the style.css file with index.html.
  • Save both files in the same folder.
View Answer Code
<!DOCTYPE html>
<html>
<head>
    <title>My Introduction</title>

    <style>
        .interests {
            color: green;
        }
    </style>

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

<body>

    <h1 style="color: blue;">Rahul</h1>
    <p>Hello! My name is Rahul. I am interested in technology and web development.</p>

    <h2 class="interests">My Interests</h2>
    <p>I enjoy coding, designing websites, and exploring new technologies.</p>

    <h2 class="skills">My Skills</h2>
    <p>I am learning HTML and CSS to create webpages.</p>

</body>
</html>
style.css
.skills {
    color: red;
}

Frequently Asked Questions (FAQs)

Q1. How to add CSS in 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 link CSS to HTML?

The three ways to link 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