Styles in HTML

Styles in HTML with Examples

In this article, I am going to discuss Styles in HTML with Examples. Please read our previous article where we discussed HSL and HSLA in HTML with Examples. At the end of this article, you will learn everything about HTML Styles with Examples.

HTML Styles

The HTML style property is used to add color, font, size, and other styles to an element. HTML styles are rules that specify how a page will appear in a browser. Style properties for an HTML element can be specified using CSS.

The style attribute can be applied to any HTML tag. To style an HTML tag, you’ll need a basic understanding of CSS attributes such as color, background color, text-align, font-family, font size, and so on.

HTML Styles Syntax

The syntax for the HTML style attribute is as follows:

<tagname style=”property:value;”>

Styles in HTML with Examples

Example: <body style=”color:orange;”>

Background Color in HTML

The CSS background-color property specifies the color of an HTML element’s background.

<!DOCTYPE html>
<html>
<body style="background-color:slateblue;color:white;">

<h1>Welcome to Dot Net Tutorials</h1>
<p>This dot net tutorial website for those who want to learn Java, Dot Net, C, C++, Data Structure, Databases like SQL Server, Oracle, MySQL, MongoDb, MEAN, MERN, UI technologies like Angular, Node, React, HTML CSS, JavaScript,  and Bootstrap.</p>

</body>
</html>
Output:

Text Color in HTML

The CSS color property specifies the color of an HTML elements text.

<!DOCTYPE html>
<html>
<body style="color:orange;">

<h1>Welcome to Dot Net Tutorials</h1>
<p>This dot net tutorial website for those who want to learn Java, Dot Net, C, C++, Data Structure, Databases like SQL Server, Oracle, MySQL, MongoDb, MEAN, MERN, UI technologies like Angular, Node, React, HTML CSS, JavaScript,  and Bootstrap.</p>

</body>
</html>
Output:

Text Color in HTML

Fonts in HTML

The CSS font-family property specifies the font of an HTML element’s text.

<!DOCTYPE html>
<html>
<body style="font-family:verdana;background-color:lightblue;">

<h1>Welcome to Dot Net Tutorials</h1>
<p style="font-family:courier;">This dot net tutorial website for those who want to learn Java, Dot Net, C, C++, Data Structure, Databases like SQL Server, Oracle, MySQL, MongoDb, MEAN, MERN, UI technologies like Angular, Node, React, HTML CSS, JavaScript,  and Bootstrap.</p>

</body>
</html>
Output:

Fonts in HTML

Text Size in HTML

The CSS font-size property specifies the size of the text in an HTML element.

<!DOCTYPE html>
<html>
<body style="font-size:20px;background-color:lightcyan;">

<h1>Welcome to Dot Net Tutorials</h1>
<p style="font-size:18px;">This dot net tutorial website for those who want to learn Java, Dot Net, C, C++, Data Structure, Databases like SQL Server, Oracle, MySQL, MongoDb, MEAN, MERN, UI technologies like Angular, Node, React, HTML CSS, JavaScript, and Bootstrap.</p>

</body>
</html>
Output:

Text Size in HTML

Text Alignment in HTML

The CSS text alignment property specifies the alignment of HTML elements. In the example below we have aligned the h1 element in the center by using style=”text-align: center;”.

<!DOCTYPE html>
<html>
<body style="background-color:tomato;color:white;">

<h1 style="text-align:center;">Welcome to Dot Net Tutorials</h1>
<p>This dot net tutorial website for those who want to learn Java, Dot Net, C, C++, Data Structure, Databases like SQL Server, Oracle, MySQL, MongoDb, MEAN, MERN, UI technologies like Angular, Node, React, HTML CSS, JavaScript,  and Bootstrap.</p>

</body>
</html>
Output:

Styles in HTML with Examples

In the next article, I am going to discuss CSS in HTML with Examples. Here, in this article, I try to explain Styles in HTML with Examples and I hope you enjoy this HTML Styles with Examples article.

Leave a Reply

Your email address will not be published.