How To Include CSS In Html Pages

This article will tell you how to use inline CSS code in Html pages, it will also tell you how to include external CSS files into Html pages using the Html link tag or the @import command.

Table of Contents

1. How To Use Inline CSS Code In Html Pages.

There are 2 methods to include CSS code directly on the Html page.

One method is to define the CSS code in the Html page header section’s <style></style> code block to use it later.
The other method is to define the CSS code in the Html tag‘s style attribute value to apply the CSS to the Html element.

1.1 Define CSS Code In Html Header Section’s <style></style> Block.

This example defines a universal CSS code for the Html body tag, it also defines a tag CSS code for the h1 tag.

All the CSS code is included in the Html page’s header section <style></style> tag like below.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Define CSS Code In Html Header</title>
<style>
    body {
        background-color: green;
    }
    
    h1 {
        color: red;
        text-align: center
    }
</style>
        
</head>
<body>
<h1>The h1 tag uses the inline CSS code.</h1>
</body>
</html>

When you save the above code in an Html file and browse it in a web browser, you can see the web page background color is green, and the h1 tag wrapped text is red and aligned in the page center horizontally.

1.2 Define CSS Code In The Html Tag’s style Attribute Value.

You can also apply the CSS code to the Html tag element by defining the CSS code in the Html tag’s style attribute value like below.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Define CSS Code In Html Tag style Attribute</title>
</head>
<body>
<span style="color:red; font-size:69px; text-align:center">Define the CSS style code in the Html tag's style attribute</span>
</body>
</html>

2. How To Include External CSS Files In Html Page.

You can also define the CSS source code in a separate and external file, the file name extension should be .css.
Then you can include the external CSS file in the Html web page either by the Html link tag or by the @import url(‘external_css_file_path’) command.
Write the CSS code in the file external_css_example.css. The .css file only contains the CSS code, do not need to include the <style></style> tag.
```
@charset "ISO-8859-1";

body {
    background-color: yellow;
}
    
h1 {
    color: blue;
    text-align: center
}
```

Then you can use the Html link tag in the Html header section to include the above .css file in the Html page file like below.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Include The External CSS File Through The link Tag In Html Header</title>
<link rel="stylesheet" href="../css/external_css_example.css">        
</head>
<body>
<h1>The h1 tag uses the inline CSS code.</h1>
</body>
</html>

Besides this, you can also use the command @import url(‘css_file_path’) to import the external CSS file into the current Html file. But the @import command should be included in the Html <header><style></style></header> section like below.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Import External CSS File In Html Header</title>
<style>
@import url("../css/external_css_example.css"); 
</style>
</head>
<body>
<h1>The h1 tag uses the inline CSS code.</h1>
</body>
</html>

1. How To Use Inline CSS Code In Html Pages.

1.1 Define CSS Code In Html Header Section’s <style></style> Block.

1.2 Define CSS Code In The Html Tag’s style Attribute Value.

2. How To Include External CSS Files In Html Page.

Leave a Comment Cancel Reply