Style attribute The style attribute is used for defining the styles which is applied to specific HTML element. The syntax for the style attribute is: Code: style = “property:value;” where, property defines any valid CSS property value is a CSS value Example: Code: <!DOCTYPE html> <html> <head> <title>HTML Style</title> </head> <body> <h1 style="color:orange;">Orange color</h1> <p style="color:blue;">Blue color</p> </body> </html> Output: Text color Using the color property, user can define the color of the element. Example: Code: <!DOCTYPE html> <html> <head> <title>Text color</title> </head> <body> <h1 style="color:Maroon;">Text color in HTML</h1> <p style="color:Green;">Text color is green</p> </body> </html> Output: Background color The color of background can be changed using the background – color property. Example: Code: <!DOCTYPE html> <html> <head> <title>Background color</title> </head> <body style="background-color:Aqua;"> <h1 style="color:Maroon;">Text color in HTML</h1> <p style="color:Green;">Text color is green</p> </body> </html> Output: Text size The size of the text is defined using the font – size property. Example: Code: <!DOCTYPE html> <html> <head> <title>Text size</title> </head> <body> <h1 style="font-size:200%;">Defines the size of the text</h1> <p style="font-size:130%;">Size of the text can be changed</p> </body> </html> Output: Fonts Different fonts can be assigned to the text using the font – family property. Example: Code: <!DOCTYPE html> <html> <head> <title>Fonts</title> </head> <body> <h1 style="font-family:courier;">Font style is courier</h1> <p style="font- family:arial;">Font style is arial</p> </body> </html> Output: Text alignment Using the text – align property, user can align the text. Example: Code: <!DOCTYPE html> <html> <head> <title>Text align</title> </head> <body> <h1 style="text-align:center;">Center alignment</h1> <p style="text-align:left;">Left alignment</p> </body> </html> Output:
