Types of css

In this blog, we will learn about CSS types. CSS is used to style HTML elements such as change font size, color, background image, gradient, rounded corner, etc.  There are three ways to style an element that is inline, internal, external.

CSS TYPES

  • Inline CSS
  • Internal CSS
  • External CSS
 


Inline CSS:
As its name suggests, written in HTML tag by using the style attribute. Inline CSS is used to style one element at a time. It is less used on a website because it is not reusable.


It is used when:

  • We design e-mail templates for sending emails.
  • We design printable designs such as invoices, prescriptions.

In these two cases, we use inline CSS.


Example:


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
 
<body>
 
<p style="color:red;">hello css</p>
 
</body>
</html>
 


Internal CSS:
Internal CSS is used to style multiple elements on a single page. Internal CSS is better than inline CSS but it has limitations too. It is useful for a single-page website because it is also not reusable for multiple pages.


It is used when:

  • We design a single-page website.
  • We design email templates.
  • We design printable designs such as invoices, prescriptions.
 

Example:


<!DOCTYPE html>
<html>
<head>
<title></title>
 
<style>
p
{
  color:red;
}
</style>
 
</head>
 
<body>
 
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
 
</body>
</html>
 


External CSS:
This CSS is used to style multiple elements and multiple pages. It is mostly used in a project because it is reusable. It saves a lot of code and a lot of time. It is written in the head section.


Syntax:


<link rel="stylesheet" href="foldername/filename">


Example:
 


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

 
To use external CSS we use the following steps:


Step1: 
create a file and save it in a CSS folder named style.css file, write the following code:


p
{
            color:red;
}
 



Step2:
Create an HTML file named external1.html and link your CSS file in the head section.


<!DOCTYPE html>
<html>
<head>
<title></title>
 
<link rel="stylesheet" href="css/style.css">
 
</head>
 
<body>
 
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
 
</body>
</html>
 


Step3:
Create an HTML file named external2.html and link your CSS file in the head section.


<!DOCTYPE html>
<html>
<head>
<title></title>
 
<link rel="stylesheet" href="css/style.css">
 
</head>
 
<body>
 
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
<p>hello css</p>
 
</body>
</html>
 


In step2 and step3 we can see that we have created two HTML files with the same code we have linked the CSS file by using external CSS we share the same code with two files.

To use external CSS we need a CSS selector; in a style.css file, we have to use an element selector.

Categories: web designing css
Written By : Web Development Institute
Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing Expert Course

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 25 Days

Crash : 15 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Web Expert with Python

Regular : 12 Months

Fastrack : 6 Months

Crash : 3 Months

Related Blogs

Request For Demo