crus4

crus4

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> 

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>

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.


Related Posts

HTML Style Attribute

HTML Inline and Block Elements

How to Add CSS to HTML – crus4

8 thoughts on “How to Add CSS to HTML – crus4

Leave a Reply

Your email address will not be published.