Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   
JAVA SPRING SPRINGBOOT HIBERNATE HADOOP HIVE ALGORITHMS PYTHON GO KOTLIN C# RUBY C++ HTML CSS JAVA SCRIPT JQUERY


❮❮ PREV NEXT ❯❯


CSS - Types


There are three types of CSS :

  1. Inline CSS


    Inline CSS is used within the HTML elements using the style attribute. 


    <p style="color: red;>

  2. Internal CSS


    Internal CSS is used within the HTML page. The CSS properties are defined within the <style> element inside the HTML page.


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

  3. External CSS


    External CSS is a CSS file with .css extension. We can use this CSS file in the HTML page using the <link ...> element. 


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


    Where my_style.css is the name of the external CSS file.

Inline CSS - First type of CSS


This is the first type of CSS which is used within the HTML elements using the style attribute.


Let us understand it with the below example.


Example : 



<html>	
<body>
	<p style="color:red;font-size:40px"> 
		This is the first paragraph.
	</p>
</body>
</html>


Output :



 

So, if you look at the above example, we have used the style attribute within the <p> element itself.


And inside the style attribute we have specified the CSS properties.


<p style="color:red;font-size:40px">

We can specify multiple CSS properties separated by a semicolon(i.e. ;).


CSS-Syntax

Internal CSS - Second type of CSS


This is the second type of CSS where the CSS properties are defined within the <style> element inside the HTML page.


Example : 



<html>
<head>
	<style>
		p {
  			color: red;
  			font-size:40px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>


Output :



 

So, if you look at the above example, the CSS properties are defined inside the <style> element.


<style>
	p {
		color: red;
		font-size:40px;
	}
</style>

External CSS - Third type of CSS


This is the third type of CSS where the CSS properties are not defined inside the HTML document. And is a three step process.

  1. Create a separate file with .css extension.

  2. Define the CSS properties in that CSS file.

  3. Include that CSS file in the HTML file using the <link> element.


Now, let us see it in action with the below example.


So the first step is to create a file with .css extension. And let us name the CSS filemy_style.css.


And the second step is to define the CSS properties in that CSS file.


my_style.css 


p {
	color: red;
	font-size:40px;
}

And the third step is to include the CSS file in the HTML file using the <link> element.


Example : 



<html>
<head>
	<link rel="stylesheet" type="text/css" href="my_style.css">
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>


Output :



 

So, in the above example, we have created an external CSS file name my_style.css and included it in the HTML file using the <link> element.


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

Just remember to place the <link> element within the <head> element.


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

CSS Type Priority


Among the three types of CSS, the inline CSS has the highest priority. And will override any CSS property defined in the internal and external CSS.



❮❮ PREV NEXT ❯❯