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
.svg)