6/5/21

How to Add CSS in HTML Documents :- CSS Tutorials

Hey Friends in our last tutorial we have seen that how to select the Html element in CSS. And Different types of selectors available in CSS. Now in this tutorial, we are going to learn about how to insert CSS in our Html file. So let’s begin…

How to ADD CSS in HTML Document.

There are commonly three ways to add CSS in your Html document. These are:- 

  • Inline CSS
  • Internal CSS
  • External CSS

1) INLINE CSS

The first method to add css into html document was Inline CSS. In the Inline CSS, CSS Property will be written inside the html element. For Example:- 

Ex :-    <p style="color: red; background-color: yellow; "> This is a Paragraph.</p>

Example :- 

<html>
<head>
    <title> Add CSS to html File </title>
</head>
<body>
   <p style="color: red; background-color: yellow; font-size: 30px;"> This is a Paragraph.</p>
</html>

Output :- 

2) Internal CSS 

This is the second method to add CSS into the Html documents. Internal CSS is used under the style tag. It affects all the Html elements of the page. For Example:- 

Ex :-    <style> p : { color : red; } </style>

Important: The main difference between inline and internal CSS Was:- 

  • In Inline CSS, CSS Property is used only on the particular element in which CSS has written, it doesn’t affect other elements. 
  • But in Internal CSS, CSS Property will apply in all the Html elements used in your Html document. Look at the example below. 

Example :- 

<html>
<head>
    <title> Add CSS to html File </title>
</head>
<style>
    p{
        color: red;
        font-size: 33px;
        background-color: rgb(168, 214, 168);
    }
</style>
<body>
   <p> This is a Paragraph.</p>
   <p> This is the Second Paragraph. </p>
</html>
Output :-

3) External CSS 

This is the last method and for web developers, it is a very useful method comparing to the other methods. In this method, a new CSS file will be created and add to the Html documents. All the CSS property is written on this file.  Let us see through an example

Example:- 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">   // Style.css is a File in which all the css code is written. 
</head>
<body>
    <h1> This is a Heading. </h1>
    <p> This is a Paragraph </p>
    <div>
        <p> This is a Paragraph Inside Div Container.</p>
    </div>
</body>
</html>

CSS Code :- 

p{
    background-color: yellow;
    color: red;
    font-size: 23px;
}
h1{
    font-size: 30px;
    color: green;
    background-color: greenyellow;
}

Output:-

You May Also Like :- 


1 comment:

  1. best logo design company in the world
    Good blog along with the excellent quality stuff and I’m sure this will be greatly helpful.

    ReplyDelete

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Mad About Computer. Powered by Blogger.