Inline, Internal and External CSS


Types of CSS

  • There are mainly three types of CSS, Inline CSS, Internal CSS and External CSS.

  • Inline CSS written in the opening tag of the HTML element by using style attribute and we can write our CSS for every element of HTML.

  • Internal CSS is written in the head tag of HTML by using style tag. This stylesheet is included in the HTML file.
  • External CSS is written in the external file with .css extension. And this is almost the same as Internal CSS but this is a different CSS file.


What is Inline CSS?

Inline CSS is written in the opening tag in HTML element using the style attribute. But it is difficult to write CSS for every element individually. In Inline CSS the CSS style is written within double quotes " " like this style=" ".

Syntax of Inline CSS

<p style="color: red;"> CSS Master Series </p>

In the given syntax style attribute is used to set Inline CSS, color is the property and red is the value. (Watch YouTube video for better understanding in Hindi)

What is Internal CSS?

Internal CSS is written in the head tag of an HTML element by using style tag. This saves a lot of time because in this we can target multiple elements and can apply the same style to them.

Syntax of Internal CSS

<!DOCTYPE html>
<html>
<head>
    <title> Internal CSS </title>
    <style>
        p {
            color: red;
         }
    </style>
</head>
<body>
    <p> CSS Master Series </p>
</body>
</html>


What is External CSS?

External CSS is written in the external file with a .css extension. And this is almost the same as Internal CSS but this is a different CSS file. And this will be added using <link> tag. This style can be used on multiple HTML pages by linking them with <link> tag. And this file is added within head tag.

Syntax of Internal CSS

<link rel="stylesheet" href="style.css">


Code Described in the video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Types of CSS </title>
    <style>
        p {
            color: purple;
        }
        h2 {
            color: hotpink;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1 style="color:red;"> This is a heading </h1>
    <h2> This is another heading </h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, consectetur.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, consectetur.</p>
    <p> This is another paragraph </p>

    <li> This is list one </li>
    <li> This is list second </li>
    <li> This is list third </li>
    <li> This is list fourth </li>
</body>
</html>



Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming-related Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad