Table of Contents

How to Add CSS to HTML

What is CSS?

CSS stands for Cascading Style Sheets. CSS is used to design a webpage. With the help of CSS we can control the color, font and the size of the text. We will learn more about CSS in upcoming articles.

Adding CSS to HTML documents

We can add CSS to html documents in three ways:

Inline
Internal
External

Inline CSS

Inline CSS is used to style a single HTML Element.

In Inline CSS, we use the style attribute inside the particular element to style it.

In an Example below we will set the text color of the <h3> element to red, and the background color of the <p> element to green:

Example

<html>
<head>
</head>
<body>
<h3 style="color:red;"> A red heading </h3>
<p style="background-color:green;"> A paragraph with green background </p> 
</body>
</html>

Copy the code and run it here

Internal CSS

Internal CSS is used to define a style for a whole html page.

We have to add <style> element in the <head> section of the html page to define an Internal CSS.

In an Example below we will set the text color of all the <p> elements to blue, and the background color of the whole html page to green.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:green;}
p    {color:blue;}
</style>
</head>
<body>

<h1>This is a  normal heading</h1>
<p>This is a paragraph.</p>
</br> 
<p>This is also a paragraph.</p>

</body>
</html>

Copy the code and run it here

External CSS

An External CSS style sheet is used to define a style for one or more html pages.

We can use external CSS by adding it’s link in the <head> section of html page.

The external CSS style sheet can be written in an Text Editor. The file must be saved with .css extension and must not contain html code.

Below in an Example I have showed you how you can add external CSS style sheet to any HTML Page:

Example

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>This is a  normal heading</h1>
<p>This is a paragraph.</p>
</br> 
<p>This is also a paragraph.</p>

</body>
</html>

Summary

CSS stands for Cascading Style Sheets.

We can add CSS to HTML documents in three ways: Inline, Internal, External.
Inline CSS is used to style a single html element, by adding style attribute inside that particular element.
Internal CSS is used to define a style for a whole html page, by adding <style> element inside the <head> section.
An External CSS style sheet is used to define a style for one or more html pages, by adding external style sheet’s link inside the <head> section.

Next

Related Posts

HTML Style Attribute

HTML Inline and Block Elements

How to Add CSS to HTML – crus4