Table of Contents

Insert CSS code to HTML

This tutorial will teach us how to insert CSS code into an HTML document. There are three ways to add CSS to an HTML document.

Inline
Internal CSS
External CSS file

Insert CSS to HTML Document

Inline

Inline styling is used to apply a unique style to a single HTML element in the web page. We can place the inline CSS using the style attribute in the HTML elements.

Example

In the example, we have added paragraph background and added paragraph text color.

<p style=”background: lightgrey; color: blue;”>
This is a sample paragraph text in an HTML document. We can add inline CSS style information.
</p>

Internal CSS

Internal CSS styling is used to define a style for a single HTML document/web page. CSS can be embedded in the HTML document internally within the web document. We can use the <style> element in the <head> section of the HTML document to place the CSS code.

Example

We have embedded CSS code in the head section.

<head>
<title> HTML Tutorials – CSS Demo </title>
<style type=”text/css”>

h1 {
color: blue;
text-align: center;
}

</style>
</head>

External CSS file

We can style the webpage using one or more external CSS files. An external stylesheet defines the style for many HTML documents/web pages.

We can use the <link> tag to link the external CSS file in the <head> section of the HTML document. The external CSS file should be saved with a .css file extension.

Example

<head>

<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” />

</head>

Using external CSS files is the best approach. We can separate the CSS code and the HTML code in this approach. We can add the stylesheet to many HTML pages to get a uniform look and feel to the website.

An external style sheet can be created using any text editor or IDE tools like Eclipse, IntelliJ, NetBeans IDE, etc. The CSS file should not contain any HTML tags.

—