How to Add CSS to HTML Page

Back to: CSS Tutorials for Beginners and Professionals

How to Add CSS to HTML Page with Examples?

In this article, I am going to discuss How to Add CSS to HTML Page with Examples. Please read our previous article where we give a brief introduction to CSS.

How to Add CSS to HTML Page?

There are three different ways of adding CSS to an HTML Page. They are as follows:

  1. Inline Style
  2. Internal Style
  3. External Style
Adding CSS to HTML Page using Inline Style Sheet:

An inline CSS is used to apply a unique style to a single HTML element. In Inline CSS, we use the style attribute directly on the element where you want to add it and you would write all styles, if you have multiple ones, you can separate them with semi-colons in the same line.

Style=” color: #ff9900″

Here, style is the attribute is a normal HTML attribute that you can add to any HTML element. Color is a property, and the value of that color is #ff9900. For a better understanding, please have a look at the following example.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Course</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat"rel="stylesheet">
</head>
<body>
    <p style="color: #ff9900">This text has been styled using inline style sheets.</p>
</body>
</html>
Output

Adding CSS to HTML Page using Inline Style Sheet

Advantages of Inline CSS:
  1. You can easily and quickly insert CSS rules into an HTML page. That’s why this method is useful for testing or previewing the changes, and performing quick fixes to your website.
  2. You don’t need to create and upload a separate document as in the external style.
Dis-Advantages of Using Inline Style
  1. If you create a bigger page with many styles, it quickly becomes very hard to understand and read your code because your style is always applied to the element you want to change.
  2. If you ever want to change a style, you must find that element in your document flow and this is hard to debug.
  3. Additionally, if you add multiple rules, let’s say you have like 10 different properties you want to change, you get a very long list of properties you assign here and that also is hard to read.
When to Use Inline Styles in Real-time Application?

Professional web developers do not use inline styles often, but there are some situations where it is necessary to use Inline Styles. Following are a few scenarios where you may see inline styles:

  1. HTML e-mail
  2. Older websites
  3. CMS content (e.g. WordPress, Drupal)
  4. Dynamic content (i.e. HTML created or changed by JavaScript)

Emails often include HTML content. When you receive a fancy-looking e-mail, it is either one big image file or it is an HTML e-mail. The HTML viewers in email clients are not standardized, and most of them do not allow <style> tags. For this reason, HTML e-mail often contains lots of inline styles. Some of the styles included may be archaic, to support older e-mail-viewing clients.

Adding CSS to HTML Page using Internal Style Sheet:

An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. In this case you use style tag <style></style> in our header section to define our CSS rules.

<style>
       background-color: red;
</style>

If you just write background and then your color here like red, of course, CSS would have no chance of knowing what you want to style with that color, you don’t attach it directly to the element. So, we need to add a selector. A selector simply is an additional piece of information that tells CSS to which element in your DOM, so inside your HTML page to assign this declaration.

<style>
      section{
            background-color: red;
      }
</style>

Here section is the selector and the background color is the property and red is the value. So, in the above code, you say that it should look for all section elements on the page and apply this style to all found instances.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Course</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
        section{
            background-color: red;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <h1>First Section Header</h1>
        </section>
        <section>
            <h1>Second Section Header</h1>
        </section>
        <section>
            <h1>Third Section Header</h1>
        </section>
    </main>
</body>
</html>
Output

Adding CSS to HTML Page using Internal Style Sheet

Advantages of Internal CSS:
  1. You can use class and ID selectors in this style sheet.
  2. Since you’ll only add the code within the same HTML file, you don’t need to upload multiple files.
Disadvantages of Internal CSS:
  1. Adding the code to the HTML document can increase the page’s size and loading time.
Adding CSS to HTML Page using External Style Sheet:

An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <head> section of each HTML page. In this approach, you create a new file with the extension .css because you are going to store the CSS rules in this file without any style tag.

section{
     color: blueviolet;
}

And then attach this file to the HTML page where you want to apply these CSS rules by using the link tag.

<link href=”stylesheet” rel=”code.css”>

Here, href as stylesheet as you are going to add a CSS file and code.css is the name of your CSS file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Course</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="code.css">
</head>
<body>
    <main>
        <section>
            <h1>First Section eader</h1>
        </section>
        <section>
            <h1>Second Section Header</h1>
        </section>
        <section>
            <h1>Third Section Header</h1>
        </section>
    </main>
</body>
</html>
Output

Adding CSS to HTML Page using External Style Sheet

Advantages of using External Style Sheet

You can have a clear separation of your HTML and your CSS code which is especially useful as your CSS code grows and it would bloat your head section at some point. Additionally, if you use the same stylesheet on multiple pages let’s say, then your browser can cache the stylesheet and doesn’t need to re-download it for every new page, whereas if you include your styles in the head section, you increase the file size of your HTML file and the browser need to re-download it since it’s part of the HTML page for every new page which can be slower.

Disadvantages of External CSS:
  1. Your pages may not be rendered correctly until the external CSS is loaded.
  2. Uploading or linking to multiple CSS files can increase your site’s download time.
Summary:

In this tutorial, you’ve learned the difference between the three types of CSS: internal, external, and inline.

  1. Inline: Apply CSS rules for specific elements.
  2. Internal: Aadd <style> tag in the <head> section of HTML document
  3. External: Link the HTML sheet to a separate .css file

So, which CSS style will you use? Share with us in the comments section below.

In the next article, I am going to discuss CSS Selectors with Examples. Here, in this article, I try to explain How to add CSS to HTML Pages with Examples. I hope this How to Add CSS to HTML Pages with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *