What is CSS ?
CSS full form is Cascading Style Sheets
CSS is a computer language that describes the style of an HTML Webpage document.
CSS describes how HTML elements should be displayed.
What is CSS language ?
CSS is a markup language used along with html to design the users interface of the website.
CSS style is applied all over the webpage for improving user experience.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
How CSS applied in HTML ?
There are three ways we can apply CSS in HTML document.
1. Inline style
2. Internal style
3. External style
1. Inline style
Inline CSS is used to apply a unique style to a single HTML element.
style attribute is used inside HTML for styling the element.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
</head>
<body>
<h1 style="color: red;font-style: italic;text-align: left;font-size: 20px; ">This is Heading 1</h1>
<h2 style="color: green;font-style: italic;text-align: left;font-size: 20px; ">This is Heading 2</h2>
<h3 style="color: blue;font-style: italic;text-align: left;font-size: 20px; ">This is Heading 3</h3>
<h4 style="color: brown;font-style: italic;text-align: left;font-size: 20px; ">This is Heading 4</h4>
<h5 style="color: orange;font-style: italic;text-align: left;font-size: 20px; ">This is Heading 5</h5>
<h6 style="color: pink;font-style: italic;text-align: left;font-size: 20px; ">This is Heading 5</h6>
<p style="color: red;font-style: italic;text-align: left;font-size: 30px; ">This is paragraph 1</p>
<p style="color: green;font-style: italic;text-align: left;font-size: 30px; ">This is paragraph 2</p>
<p style="color: blue;font-style: italic;text-align: left;font-size: 30px; ">This is paragraph 3</p>
<p style="color: brown;font-style: italic;text-align: left;font-size: 30px; ">This is paragraph 4</p>
<p style="color: orange;font-style: italic;text-align: left;font-size: 30px; ">This is paragraph 5</p>
</body>
</html>
Output :
Online html learning !!!
Click to Learn More about – HTML Tutorial for beginners
2. Internal style
Internal CSS is used to define a style for a single HTML page.
Internal CSS is defined inside the <head> section of an HTML page.
<style></style> tag is added inside the <head> element.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
<style>
h1,h2,h3{
color: red;font-style: italic;text-align: left;font-size: 20px;
}
h4,h5,h6{
color: green;font-style: italic;text-align: left;font-size: 25px;
}
p{
color: blue;font-style: italic;text-align: left;font-size: 20px;
}
</style>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 5</h6>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
<p>This is paragraph 5</p>
</body>
</html>
Output :
Internal style with class attribute
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
<style>
.h1{
color: red;font-style: italic;text-align: left;font-size: 20px;
}
.h2{
color: green;font-style: italic;text-align: left;font-size: 20px;
}
.h3{
color: blue;font-style: italic;text-align: left;font-size: 20px;
}
.h4{
color: brown;font-style: italic;text-align: left;font-size: 20px;
}
.h5{
color: pink;font-style: italic;text-align: left;font-size: 20px;
}
.h6{
color: orange;font-style: italic;text-align: left;font-size: 20px;
}
.p1{
color: blue;font-style: italic;text-align: left;font-size: 20px;
}
.p2{
color: red;font-style: italic;text-align: left;font-size: 20px;
}
.p3{
color: green;font-style: italic;text-align: left;font-size: 20px;
}
.p4{
color: orange;font-style: italic;text-align: left;font-size: 20px;
}
.p5{
color: pink;font-style: italic;text-align: left;font-size: 20px;
}
</style>
</head>
<body>
<h1 class="h1">This is Heading 1</h1>
<h2 class="h2">This is Heading 2</h2>
<h3 class="h3">This is Heading 3</h3>
<h4 class="h4">This is Heading 4</h4>
<h5 class="h5">This is Heading 5</h5>
<h6 class="h6">This is Heading 5</h6>
<p class="p1">This is paragraph 1</p>
<p class="p2">This is paragraph 2</p>
<p class="p3">This is paragraph 3</p>
<p class="p4">This is paragraph 4</p>
<p class="p5">This is paragraph 5</p>
</body>
</html>
Output :
Internal style with id attribute
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
<style>
#h1{
color: red;font-style: italic;text-align: left;font-size: 20px;
}
#h2{
color: green;font-style: italic;text-align: left;font-size: 20px;
}
#h3{
color: blue;font-style: italic;text-align: left;font-size: 20px;
}
#h4{
color: brown;font-style: italic;text-align: left;font-size: 20px;
}
#h5{
color: pink;font-style: italic;text-align: left;font-size: 20px;
}
#h6{
color: orange;font-style: italic;text-align: left;font-size: 20px;
}
#p1{
color: blue;font-style: italic;text-align: left;font-size: 20px;
}
#p2{
color: red;font-style: italic;text-align: left;font-size: 20px;
}
#p3{
color: green;font-style: italic;text-align: left;font-size: 20px;
}
#p4{
color: orange;font-style: italic;text-align: left;font-size: 20px;
}
#p5{
color: pink;font-style: italic;text-align: left;font-size: 20px;
}
</style>
</head>
<body>
<h1 id="h1">This is Heading 1</h1>
<h2 id="h2">This is Heading 2</h2>
<h3 id="h3">This is Heading 3</h3>
<h4 id="h4">This is Heading 4</h4>
<h5 id="h5">This is Heading 5</h5>
<h6 id="h6">This is Heading 5</h6>
<p id="p1">This is paragraph 1</p>
<p id="p2">This is paragraph 2</p>
<p id="p3">This is paragraph 3</p>
<p id="p4">This is paragraph 4</p>
<p id="p5">This is paragraph 5</p>
</body>
</html>
Output :
3. External style
External style sheet is used to define the style for one or many HTML pages.
External CSS is defined inside the <head> section of an HTML page.
<link></link> tag along with “rel” , “href” attributes are used inside the <head> element.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
<link rel="stylesheet" href="external.css"></link>
</head>
<body>
<h1 id="h1">This is Heading 1</h1>
<h2 id="h2">This is Heading 2</h2>
<h3 id="h3">This is Heading 3</h3>
<h4 id="h4">This is Heading 4</h4>
<h5 id="h5">This is Heading 5</h5>
<h6 id="h6">This is Heading 5</h6>
<p id="p1">This is paragraph 1</p>
<p id="p2">This is paragraph 2</p>
<p id="p3">This is paragraph 3</p>
<p id="p4">This is paragraph 4</p>
<p id="p5">This is paragraph 5</p>
</body>
</html>
CSS File external.css
#h1{
color: red;font-style: italic;text-align: left;font-size: 20px;
}
#h2{
color: green;font-style: italic;text-align: left;font-size: 20px;
}
#h3{
color: blue;font-style: italic;text-align: left;font-size: 20px;
}
#h4{
color: brown;font-style: italic;text-align: left;font-size: 20px;
}
#h5{
color: pink;font-style: italic;text-align: left;font-size: 20px;
}
#h6{
color: orange;font-style: italic;text-align: left;font-size: 20px;
}
#p1{
color: blue;font-style: italic;text-align: left;font-size: 20px;
}
#p2{
color: red;font-style: italic;text-align: left;font-size: 20px;
}
#p3{
color: green;font-style: italic;text-align: left;font-size: 20px;
}
#p4{
color: orange;font-style: italic;text-align: left;font-size: 20px;
}
#p5{
color: pink;font-style: italic;text-align: left;font-size: 20px;
}
Output :
Aw, this was a really good post. Taking a few minutes and actual effort to produce a great article… but what can I say…
I put things off a lot and never seem to get nearly
anything done.
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.