How To Use CSS In HTML


In this section, we are going to learn how to use CSS in HTML. We will go through the different 3 ways of using CSS in HTML with its pros and cons.

CSS is a style sheet language that describes the presentation of a document written in HTML. CSS describes how HTML elements should be displayed on the screen, on paper, in print, or in other media.

But both HTML and CSS are not the same things they are two different languages. So we need to connect them to make them work together.


Include CSS In HTML

There are 3 different ways to include CSS in HTML.

  1. Inline CSS - Inline CSS is the CSS code that is written inside the HTML tag.
  2. Internal CSS - Internal CSS is the CSS code that is written inside the HTML file in the <style> tag.
  3. External CSS - External CSS is written in a separate CSS file and is included in the HTML file using the <link> tag.
how to use CSS in HTML

1. Inline CSS

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

The CSS properties are written in property: value pair. If there is more than one property then they are separated by semicolons.

Example

<h1 style="color: #c94b7b">Heading of webpage.</h1>
<p style="background: #c79bac">This is paragraph.</p>
<ul style="list-style: circle">
  <li>Suger</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Pros (Inline CSS) Cons (Inline CSS)
Inline CSS has the highest priority means it will overwrite all other CSS targeted at the same element. Using inline CSS is a bad practice because it can lead to CSS conflicts. It also makes the HTML file more complicated.
You need not to create any external file and then link it When using inline CSS you can't style pseudo-elements like :hover or :focus.
Inline CSS is quick and easy to test your CSS code. It's quite a time taking to style the elements.

2. Internal CSS

Internal CSS is also called embeded CSS. The CSS code is written within the HTML file in the <style> tag.

The <style> element is placed in the head of the HTML file.

While writing internal CSS you have to target the element first by using CSS selectors and then write the CSS properties in property: value pairs separated by semicolons.

Example

<head>
  <style>
    h1 { color: #c94b7b }

    p { background: #c79bac }

    ul { list-style: circle }
  </style>
</head>

<body>
  <h1>Heading of webpage.</h1>
  <p>This is paragraph.</p>
  <ul>
    <li>Suger</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</body>
Pros (Internal CSS) Cons (Internal CSS)
Internal CSS separates the HTML code from the CSS code within the HTML file. It is an easier bit easier to maintain than inline CSS. Since internal CSS is written in the file, it can't be used to style multiple HTML files at once.
It is easier to download with an HTML file and is faster to load than external CSS which need extra HTTP request.

3. External CSS

External CSS is the best way to write CSS code. It is written in a separate CSS file and is included in the HTML file using the <link> tag.

Here are the complete steps to create and include an external CSS file in the HTML file.

  1. Create a CSS file with an extension of .css.
  2. Target the element from the desired HTML file and write the CSS code in it.
  3. Include the CSS file in the HTML file using the <link> tag. Set path to the CSS file using href attribute.

Your external file is now linked to the HTML file and you can link it to as many HTML files as you want.

  • HTML
// External CSS file
// saved with name style.css in same folder as HTML file

h1 { color: #c94b7b }

p { background: #c79bac }

ul { list-style: circle }
<head>
  <title>External CSS</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <h1>Heading of webpage.</h1>
  <p>This is paragraph.</p>
  <ul>
    <li>Suger</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</body>
Pros (External CSS) Cons (External CSS)
External CSS completely separates the CSS code from the HTML code that makes it look professional. External CSS has the lowest priority and is overwritten by inline CSS and also by internal CSS depending on their position in the HTML file.
It can control the style of multiple HTML files at once which is a big advantage. Almost all websites use external CSS. Your webpage will not render property until the external CSS file is loaded.
You can control the entire website with it. Any change in the external CSS file will affect all the HTML files.

Import in CSS

Importing a CSS file within another CSS file is a great way to reuse CSS code.

To import a CSS file use the @import at-rule and set the path to the CSS file using url(''). Example @import url('./style.css').

You can import CSS files directly in HTML file within the <style> tag or in external CSS file.

  • HTML
// External CSS file

h1 { color: #c94b7b }

p { background: #c79bac }

ul { list-style: circle }
<head>
  <title>Import External CSS</title>
  <style>
    @import url('./style.css');
  </style>
</head>

<body>
  <h1>Heading of webpage.</h1>
  <p>This is paragraph.</p>
  <ul>
    <li>Suger</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</body>

You can import multiple CSS files in the same CSS file. Example @import url('./style.css'); @import url('./style2.css');. Once imported, the importing CSS file will have all the properties of the imported CSS file.

  • HTML
/* importing other CSS file */
@import url('./color.css');
@import url('./font.css');

p { background: #c79bac }

ul { list-style: circle }
/* color.css file */

h1 { color: #c94b7b }
/* font.css file */

h1 { font-size: 40px;
  font-family: sans-serif;
}

p { font-size: 20px;
  font-family: sans-serif;
}
<head>
  <title>Import External CSS</title>
  <style>
    @import url('./style.css');
  </style>
</head>

<body>
  <h1>Heading of webpage.</h1>
  <p>This is paragraph.</p>
  <ul>
    <li>Suger</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</body>

Note: The @import rule must come at the beginning of the CSS file. Also importing a stylesheet in another file is not recommended for the performance issues.


Conclusion

You can include CSS style in HTML files in 3 different ways inline, internal and external. You can also import CSS files into another CSS file.

External style is a recommended way to include CSS style in HTML files this way you can control the style of the entire website.