Back to: HTML Tutorials
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;”>
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:
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:
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 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:
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.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.