Table of Contents
What is HTML Style?
In your HTML document style attribute is used to provide extra features or characteristics like providing different font sizes, font colors, background colors, and many more features to the HTML element to your web page so that the content which you mention in your HTML Document will look more attractive. We can use style attributes in a paragraph tag, form tag, heading tag, etc.
Syntax- < tagname style=”property: value ;” >
Example-
<!DOCTYPE html>
<html>
<head>
<title>style tag</title>
</head>
<body data-rsssl=1>
<h1 style="color: rgb(140, 189, 27)">GEEKY4U.com(learn with passion)</h1>
<h2 style="color: rgb(119, 48, 185)">GEEKY4U.com(learn with passion)</h2>
<h2 style="color: rgb(214, 52, 165)">GEEKY4U.com(learn with passion)</h2>
</body>
</html>
Output:
What are the different types of HTML styles use in HTML documents?
In an HTML document, Style attributes basically define that how you can add extra features to your text so that it will look more attractive also it defines how your document will look in the browser. The style attribute is having background color, text color, font, text size, text alignment, etc.
HTML Style with Background color-
In an HTML document if you wish to add Background Color to the existing text then it is important to add Background color style in the HTML start tag.
Syntax- < html start tag style=”background-color: value” > your text </ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>style tag</title>
</head>
<body data-rsssl=1>
<h1 style="color: rgb(140, 189, 27)">GEEKY4U.com(learn with passion)</h1>
<h2 style="color: rgb(119, 48, 185)">GEEKY4U.com(learn with passion)</h2>
<h2 style="color: rgb(214, 52, 165)">GEEKY4U.com(learn with passion)</h2>
</body>
</html>
Output:
How we can give Text color to the HTML document?
In the HTML document, we can give text color to your text by using text color in the HTML style tag. For adding HTML text color, we need to add a style tag in the HTML start tag along with the color and its value.
Syntax- < html start tag style=”color: value” > your text </ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>text color</title>
</head>
<body data-rsssl=1>
<h2 style="color: rgb(45, 197, 164)">GEEKY4U.com(learn with passion)</h2>
<p style="color: rgb(99, 9, 72)">GEEKY4U.com(learn with passion)</p>
</body>
</html>
Output:
HTML Fonts in HTML style tag-
For adding font style to the text HTML consists of one inbuilt attribute called a font family. We can add different font styles by using the font family with the style tag.
Syntax- < html start tag style=”font-family: value” > your text </ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title> font style</title>
</head>
<body data-rsssl=1>
<h2 style="font-family: 'Times New Roman', Times, serif">
GEEKY4U.com (learn with passion)
</h2>
<p style="font-family: Arial, Helvetica, sans-serif">
GEEKY4U.com (learn with passion)
</p>
</body>
</html>
Output:
HTML style with different Text Size-
HTML allows making the text size larger, smaller, or according to the user convenience. For adding the different font styles we need to mention the style tag along with the text size in the HTML start tag.
Syntax- < html start tag style=”font-size: value” > your text </ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>text size</title>
</head>
<body data-rsssl=1>
<h1 style="font-size: larger ;)"> GEEKY4U.com (learn with passion) </h1>
<h2 style="font-size: smaller">GEEKY4U.com (learn with passion) </h2>
<p style="font-size: 200 %"> GEEKY4U.com (learn with passion) </p>
</body>
</html>
Output:
Text Alignment in HTML style-
You can give alignment to your text like center, left, right accordingly with the help of the text-align attribute with the style tag.
Syntax-< html start tag style=”text-align: value” > your text </ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>text color</title>
</head>
<body data-rsssl=1>
<h2 style="text-align: center">GEEKY4U.com (learn with passion) </h2>
<p style="text-align: left">GEEKY4U.com (learn with passion) </p>
<h2 style="text-align: center">GEEKY4U.com (learn with passion) </h2>
<p style="text-align: start">GEEKY4U.com (learn with passion) </p>
</body>
</html>
Output:
How to provide inline style in HTML?
In the inline style, the Style attribute is used inside the HTML start tag. It is similar to the basic HTML style tag.
Example-
<!DOCTYPE html>
<html>
<head>
<title>inline style</title>
</head>
<body data-rsssl=1>
<h1 style="background-color: rgba (94, 243, 243, 0.356)">
GEEKY4U.com (learn with passion)
</h1>
<h2 style="background-color: rgb (88, 236, 175)">
GEEKY4U.com (learn with passion)
</h2>
<p style="background-color: rgb (193, 226, 46)">
GEEKY4U.com (learn with passion)
</p>
</body>
</html>
Output:
How to provide internal style in HTML?
In HTML style tag, internal style attribute is use for providing HTML style element within the HTML body tag. Whatever the attribute we want to give to the HTML text we need to define all the attributes under the body tag then it will consider as an internal style tag element in HTML.
Example-
<!DOCTYPE html>
<html>
<head>
<title>internal style</title>
<style>
h1 {background-color: rgba(202, 71, 93, 0.356)}
h2 {color: rgb(88, 236, 175)}
p {background-color: rgb(104, 209, 192)}
</style>
</head>
<body data-rsssl=1>
<h1>
GEEKY4U.com(learn with passion)
</h1>
<h2>
GEEKY4U.com(learn with passion)
</h2>
<p>
GEEKY4U.com(learn with passion)
</p>
</body>
</html>
Output:
How to provide External style in HTML?
External style is used for providing the style attribute through the link which is provided into the HTML head by using an external style tag. HTML Style External style attribute is used for providing links into the head tag and by using this attribute HTML page will define style on different pages.
Example-
<!DOCTYPE html>
<html>
<head>
<title>internal style</title>
<link rel="stylesheet" href="style.css">
</head>
<body data-rsssl=1>
<h1>GEEKY4U.com(learn with passion)</h1>
<h2>GEEKY4U.com(learn with passion)</h2>
<p>GEEKY4U.com(learn with passion)</p>
</body>
</html>
Output:
