HTML Styles

<style> Defines style Information for a document. This attribute specifies an inline style associated with an element.

<!DOCTYPE html>
<html>
<body>
<p>This is a starting paragraph</p>
<p style="color:red;">This paragraph in red color.</p>
<p style="font-family:verdana">This test is in Verdana Font Style</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>

Try above exmample in browser by using written code in Notepad.

HTML Style Attribute

Add style attribute to the document to add styles like Font-Family, Color, font size, and more. The style attribute allows you to specify the Cascading Style Sheet (CSS) rules within the element. The HTML style attribute has the following syntax;

<tagname style="property:value;">

In above example, the property is a CSS property and Value is a CSS value.

Another Example

<strong style="font-family: Arial; font-size: 18px;">Another Text</strong>

HTML style – background color example

The background-color attribute defines the background color of a particular element. See below example.

<html>
<body style="background-color:blue">
<h2 style="background-color:yellow">This is h2 heading</h2>
<p style="background-color:green">This is a paragraph</p>
</body>
</html>

HTML style – font, color & size example

You can change font-familiy, color and text size by using respective style attributes like below given example:

<html>
<body>
<h2 style="font-family:Arial">H2 Heading</h2>
<p style="font-family:verdana;color:blue;font-size:25px;">Some text here...</p>
</body>
</html>

HTML style text-aligment example

Add text-align property to the element to define the horizontal text alignment in the document.

<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The above heading is aligned to centre of the document.</p>
</body>
</html>

HTML style Reference Manual

AttributesDescription
alignDefine the alignment of the text
bgcolorDefine Background color
colorDefine text color

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *