CSS is a programming language used to develop websites. You can use CSS during coding with HTML or Java Script. But many users are not aware of how many ways CSS can be used. If you want to know about the types of CSS, read the information given here.
Major tasks related to the design of any website are done using CSS, which can make the look of the website attractive. With the help of CSS, font size, color, background color, font family, etc. are changed on any web page or website, which gives an attractive look to the site. If you are learning CSS or working on CSS then you must be aware of its type.
There are mainly 3 types of CSS
Inline CSS
Internal/ Embedded CSS
External CSS
1. Inline CSS
As you can understand from its name, this way you can use CSS in one line, in this way you can use CSS in one line. If you want to use CSS in a line or paragraph of HTML coding, you can do the coding using CSS with a DIV or HTML tag. With the help of the first type of CSS you can use the CSS in HTML in your programming also you can check the given example and with the use of the example, you can create your program.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS in HTML </title>
</head>
<div style=”height:110px;width:400px;background-color:black;color:yellow;”>
<h1>Welcome to our Website</h1>
<p style=”color:blue;”>This is a paragraph.This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
</div>
</body>
</html>
2. Internal/ Embedded CSS
Internal CSS means, CSS is used inside HTML coding, it means that you use CSS inside the <head> tag in HTML coding. To use it, the class ID is called HTML. Internal CSS means that when you create CSS in HTML, then that page is called internal CSS of CSS. It simplifies the task of creating HTML pages. Internal CSS is used by creating a style in the head tag of HTML.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS in HTML </title>
<style>
.header{
height:110px;
width:400px;
background-color: grey;
color:white;
}
p{
color:red;
}
</style>
</head>
<div class=”header”>
<h1>Welcome to our Website</h1>
<p>This is a new world.</p>
</div>
</body>
</html>
3. External CSS
This is the third type of CSS, which is known as External CSS, in which you connect to the page during programming by creating a separate file of CSS, in this external CSS file all the code of CSS is written. This type of CSS is the most used in today’s time, it is also easy to use. To create a separate file of CSS, the code is written in notepad and saved as a new file. The new file is named style.css.
After completing this file, it is connected to HTML, through which you can make a site built on HTML an attractive site with the help of CSS. You can save this new file as style.css, header.css, footer.css, etc.
The following code is used to link any CSS file to an HTML file.
<link rel=”stylesheet” type=”text/CSS” href=”myfile.css”>
For example, you can see this:
<link rel=”stylesheet” type=”text/CSS” href=”myfile.css”>
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS in HTML </title>
<link rel=”stylesheet” type=”text/CSS” href=”myfile.css”>
</head>
<div class=”header”>
<h1>Hello world</h1>
<p>This is our test.</p>
</div>
</body>
</html>
Conclusion
So, that’s there to it. The project you’re working on will determine completely which one of the 3 types of CSS you should use. If you want to learn more about CSS, we recommend learning from youtube. Because youtube is free and it has all the knowledge you need. The only issue with YouTube is that it is not organized as an online course. It helps when each video is arranged like chapters in a book. You can use Career Ninja‘s Learn Tube to do just that. The platform arranges Youtube videos into a course-like format. If you want to learn “CSS tutorial”, search that term on LearnTube and it will show you a bunch of videos like an online course. As a beginner, you’ll click through the videos from the first to the last, as if you were taking an online course tailored specifically for you.
