Loading Please Wait...
HTML supports the styling of an element like changing color, font, size, background color, etc.
The style attribute is used to set the style of an element.
The Style attribute is written in property-value pair.
<tagname style="property1: value1; property2: value2;">
Here the property is a CSS property like color, font-size, etc. and value is a CSS value like red, blue, green, etc.
The color property defines the text color for an element.
The color property accepts color name as value like (red, green, pink, cyan, etc.).
<!DOCTYPE html>
<html>
<body>
<p style="color: red;">This is a paragraph in red color</p>
<p style="color: cyan;">This is a paragraph in cyan color</p>
</body>
</html>
The background-color property defines the background color for an element.
<!DOCTYPE html>
<html>
<body>
<p style="background-color: red; color: white;">This is a paragraph</p>
<p style="background-color: cyan;">This is a paragraph</p>
</body>
</html>
The font-family property defines the font for the element.
<!DOCTYPE html>
<html>
<body>
<p style="font-family: courier">This is a paragraph</p>
<p style="font-family: cursive">This is a paragraph</p>
</body>
</html>
The font-size property defines the text size for the element.
The px, %, rem, em, etc. are the unit for the font size.
<!DOCTYPE html>
<html>
<body>
<p style="font-size: 24px">This is a paragraph</p>
<p style="font-size: 120%">This is a paragraph</p>
<p style="font-size: 3rem">This is a paragraph</p>
<p style="font-size: 2em">This is a paragraph</p>
</body>
</html>
The font-weight property defines the text weight (thick or thin) for the element.
The normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 are the value for the font weight.
<!DOCTYPE html>
<html>
<body>
<p style="font-weight: bold">This is a paragraph</p>
<p style="font-weight: lighter">This is a paragraph</p>
<p style="font-weight: bolder">This is a paragraph</p>
<p style="font-weight: 800">This is a paragraph</p>
</body>
</html>
The text-align property defines the horizontal alignment for the text like left, center, right, justify.
<!DOCTYPE html>
<html>
<body>
<p style="text-align: center;">This is a paragraph</p>
<p style="text-align: right;">This is a paragraph</p>
</body>
</html>
The border-width, border-color, and border-style properties define the border around the element.
You can also use border shorthand property.
<!DOCTYPE html>
<html>
<body>
<p style="border-width: 1px; border-style: solid; border-color: red;">This is a paragraph</p>
<p style="border-width: 1em; border-style: dashed; border-color: orange;">This is a paragraph</p>
<p style="border: 2px solid green;">This is a paragraph</p>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved