Java Training School

HTML Styles

HTML style is an attribute that is used to add some cosmatic effect to the elements, such as color, background color, font size, and many more.

Examples

<!DOCTYPE html>
<html>
<body>

<p>This is without style</p>
<p style="color:red;">This is red color text</p>
<p style="background-color:blue;">This is blue background</p>
<p style="font-size:50px;">This is big font-size.</p>

</body>
</html>

Output:

HTML Style Syntax:

The HTML style attribute has the following syntax:

<tagname style="property:value;">

Where the property is a CSS property. The value is a CSS value.

Background Color:

The CSS background-color property defines the background color for an HTML element.

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

<p>This is yellow page</p>

</body>
</html>

Output:

Fonts:

There are many Font properties like font-size, font-family, font-weight etc.

  • font-size : Used to increase size of text.
  • font-family : Used to provide text style.
  • font-weight : Used to provide thikness of text.

Example:

<!DOCTYPE html>
<html>
<body>

<p style="font-size:30px;">This is of example of font size</p>

<p style="font-weight:bold;">This is of example of font weight</p>

<p style="font-family:courier;">This is of example of font family</p>

</body>
</html>

Output:

Multiple Style properties:

There can be multiple style properties for single tag.

Example:

<!DOCTYPE html>
<html>
<body>

<p style="font-size:30px; font-weight:bold;color: red;">This is of example of multiple style properties</p>

</body>
</html>

Output:

<—Previous
Next—>