CSS Types & Using 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.


Inline CSS:

As we learn about  Inline CSS written in the opening tag in HTML element by using 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=" ". Let's see with an example:

Example:

index.html

<!DOCTYPE html>
<html>
<head>
    <title> Inline CSS </title>
</head>
<body>
    <p style="color: red;"> CSS Master Series </p>
</body>
</html>

Output:


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. 

index.html

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

Output:


External CSS

So finally, 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.

Example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title> External CSS </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p> CSS Master Series </p>
</body>
</html>

style.css

p{
    color: purple;
}

Output:


Types of CSS Part-2 PDF

Post a Comment

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

Top Post Ad

Below Post Ad