HTML Style

In Html,  style the attribute is used to change the style to an element. Following are different types of attributes like color, font, size, background-color, text-align and more.

We can use style attributes as the following syntax

<tagname style="property:value;">

Background Color:

The background-color property is used to define the background color for the html element.

Example 1

Try Now

<body style="background-color:gray;">
<h1>We are learning CSS background color properties</h1>
<p>Finally we have learned!.</p>
</body>

Example 2

Try Now

<body>
<h1 style="background-color:gray;">This is a heading with background color</h1>
<p style="background-color:green;">This is a paragraph with background color </p>
</body>

Fonts

The css has different font properties but here we will learn font-family

Try Now

<h1 style="font-family: courier;">This is a heading</h1>
<p style="font-family:Arial;">This is a paragraph.</p>

Text Color

The css color property is used to define the text color of html element.

Try Now

<h1 style="color:green;">This is a heading</h1>
<p style="color:blue;">This is a paragraph.</p>

Text Alignment

The css text-align property is used to define the horizontal text alignment for an html element.

Try Now

<h1 style="text-align:center;">heading text in center Centered </h1>
<p style="text-align:center;">Paragraph text in </p>

Text Transform

The css text-transform property is used to change the text format like Capitalize, lowercase, uppercase

Try Now

<h1 style="text-transform:uppercase;"> uppercase heading exampel </h1>
<h1 style="text-transform:lowercase;">LOWER CASE HEADING </h1>
<h1 style="text-transform:capitalize;">capitalize heading </h1>

Chapter summary

  1. Use the style attribute for styling HTML elements
  2. Use background-color property for background color
  3. Use color property for text colors
  4. Use font-family property for text fonts
  5. Use font-size property for text sizes
  6. Use text-align property for text alignment
  7. Use text-transform property for text format like uppercase, lowercase, capitalize

Note: We will learn more about CSS and advanced css in css tutorial.

Prev Next