Different Types Of CSS

 Hello friends  😃


As we understood in our previous article or blog about what is the main difference between HTML and CSS?

In today's article or blog, we will know how many types of CSS are there.  So let's get started - 🤟

 Different Types Of CSS- 

HTML page can be design by CSS in three ways, hence there are three types of CSS, ie it can be used in HTML Elements in three ways, as follows:-

  •  Inline CSS
  •  Internal CSS
  •  External CSS

 1. Inline CSS - 

Inline CSS is a method of styling HTML elements with style rules written directly into the HTML element's tag. It is defined in the style attribute of the HTML tag. Inline CSS has the highest specificity (priority) than the other CSS styles.


Example:  This is a heading

<html>

<head>
<title>Inline CSS </title>
</head>
<body >
<h1 style=”background-color:green;”>This is inline CSS </h1>
</body>
</html>

Output - This is inline CSS

2. Internal CSS - 

Internal CSS is a method of styling HTML using the element within the section of the HTML document. This method allows a web designer to define a set of unique style rules for one or more HTML pages on a website. It is defined within the section of the HTML document. It has moderate specificity.

Example:
<html>

<head>

<title>Internal Style Demo</title>

<style>
.s1{
background-color:red;
}
</style>

</head>

<body>
<h1 class="s1">This is internal CSS</h1>
</body>

</html>

Output - This is internal CSS

3. External CSS - 

  • External CSS is a method of styling HTML using a separate CSS file that is linked to the HTML document.  
  • This method makes it easy to maintain a consistent look and feel throughout a website.   
  • External CSS has the lowest specificity and its styles can be overridden by inline, internal or other external CSS styles.


Example:

where style.css is the stylesheet file that contains the CSS style rules.

HTML file -
<html>

<head>

<title>External Style Demo</title>
<link rel=”stylesheet” type=”text/css” href=”Classdemo.css”>

</head>

<body>
<p> This is external CSS</p>
</body>

</html>
CSS file - 
body{
background-color:blue;
}
Output-  

 This is external CSS            
Hope you have understood the types of CSS we read in today's article, if you like the article then definitely give your feedback.

👇❤‍🔥

Comments

Post a Comment