How to add CSS in HTML?

Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!

We spend hours scrolling social media and waste money on things we forget, but won’t spend 30 minutes a day earning certifications that can change our lives.
Master in DevOps, SRE, DevSecOps & MLOps by DevOps School!

Learn from Guru Rajesh Kumar and double your salary in just one year.


Get Started Now!

CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline CSS is used to apply CSS on a single line or element.

Syntax

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>    

Internal CSS

Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page. It is written inside the style tag within head section of html.

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-color: linen;  
}  
h1 {  
    color: red;  
    margin-left: 80px;  
}   
</style>  
</head>  
<body>  
<h1>internal  </h1>  
<p>Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page. 
It is written inside the style tag within head section of html</p>  
</body>  
</html> 

External CSS

External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a css file. Its extension must be .css for example style.css.

p{color:blue}

You need to link this style.css file to your html pages like this:

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

Related Posts

Find Professionals Near Me: Complete Guide to Trusted Local Services

Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps! We spend hours scrolling social media and waste money on things we forget, but won’t spend 30…

Read More

The Comprehensive Guide to AIOps Training: From Fundamentals to Architecture

Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps! We spend hours scrolling social media and waste money on things we forget, but won’t spend 30…

Read More

Mastering the Evaluation of DevOps Trainer Testimonials

Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps! We spend hours scrolling social media and waste money on things we forget, but won’t spend 30…

Read More

The Essential Guide to Verifying Professional Training Instructor Expertise

Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps! We spend hours scrolling social media and waste money on things we forget, but won’t spend 30…

Read More

Comparing DevOps Trainer Pricing and Value for Professional Growth

Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps! We spend hours scrolling social media and waste money on things we forget, but won’t spend 30…

Read More

Essential DevOps Trainer Review Checklist for Career Success

Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps! We spend hours scrolling social media and waste money on things we forget, but won’t spend 30…

Read More
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x