How to use CSS in HTML | Link CSS

Techno HTML5

Types of CSS use In HTML

CSS is known as cascading stylesheet that is used to design a webpage. Every HTML page includes CSS to design the contents. There are three types of CSS using in HTML page .
1. Inline CSS

2. Internal CSS

3. External CSS



It is a very easy to include CSS in HTML document. There is a designing part of the website that is done by CSS. There is three type of using CSS in HTML. In simple words, if you want to include CSS in HTML then you can do three ways.

The first way you can use internal CSS. You can do it by just creating the CSS in the head and use in the HTML page.

What is Inline CSS

Inline CSS is the way of using CSS in one line . The name indicate (inline) --in one line . In simple words if you have needed to use CSS in one line or paragraph then you can specify the CSS with one DIV or one HTML tag .

The following example of inline CSS will show you the main purpose of Inline CSS .


Inline CSS


<!DOCTYPE>
<html>
<head>
<title>Inline CSS in HTML   </title>

<head>

Welcome to our Website

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

</body> </head> </html>

What is Internal CSS

Internal CSS is refers to on page page that means we create a css inside the head div and use it by call the class and id . Its is a very simple to create and use in one HTML page .

The following example of inline CSS will show you the main purpose of Internal CSS .


CSS in HTML


<!DOCTYPE>
<html>
<head>
<title>Internal CSS in HTML   </title>

<head>

Welcome to our Website

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

</body> </head> </html>
Run

What is External CSS

The second way: In the second type of including the CSS in HTML from the external source file . To include, you have to create an HTML file and CSS file then include the CSS file in HTML file via link .

The following example of inline CSS will show you the main purpose of External CSS .



First of all you need to create a HTML file .

myfile.html


<!DOCTYPE>
<html>
<head>
<title>Internal CSS in HTML   </title>

<head>

Welcome to our Website

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

</body> </head> </html>
Run

In above example, we have created an HTML page and use the stylesheet link to link the CSS file. When you link the CSS file with HTML page it includes the all attributes effect on HTML pages.
CSS LINKED to HTML via -


myfile.css is another css file .

Now you have to create the CSS file.


myfile.css



.header{
height:100px;
width:400px;
background-color:grey;
color:white;
}
p{
color:red;
}