HomeWeb DesignHTMLHTML Styles: How to Set color, font, size, and more

HTML Styles: How to Set color, font, size, and more

HTML Styles: Set color, font, size, and more

Topics List: We will learn

  • How to use the style attribute for styling HTML elements
  • How to use background-color for background-color
  • How to use color for text colors
  • How to use font size for text sizes
  • How to use text-align for text alignment

In order to add styles to content like changing color, font, size, and more, we use the HTML Style attribute.

following syntax:

<tagname style="property:value;">
  • The property defines CSS property.
  • The value defines a CSS value.

How to set background color for an HTML element

To set the background color for an HTML element, we will use the CSS property “background-color”. In this example, We will set Set the background color for a page.

<body style="background-color:#008000;">

<h1> I am Changing background color </h1>
<p> Wow... i have learnt this attribute.</p>

</body>

As well as, we can also set different background color for different elements. Can check the example given below.

<body>

<h1 style="background-color:red;"> I Set Background color to red color. </h1>
<p style="background-color:blue;"> I Set Background color to blue color. </p>

</body>

How to Set text color for an HTML element:

To set the text color for an HTML element, We use The CSS “color” property. Lets understand with an example here.

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Welcome to PrepareExams</h1>
<p style="color:red;"> Learn HTML with us </p>

</body>
</html>

Output:

Welcome to PrepareExams

Learn HTML with us

How to Set Text Size for an HTML element:

The CSS font-size property is used for the text size for an HTML element.

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:200%;"> Heading 1 </h1>
<p style="font-size:150%;"> Change Font-Size </p>

</body>
</html>

Output:

Heading 1

Change Font-Size



How to set text alignment for an HTML element

To make text alignment for an HTML element, we use CSS text-align property.

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">We set Heading to Center</h1>
<p style="text-align:center;">We set paragraph to Center.</p>

</body>
</html>

Output:

We set Heading to Center

We set paragraph to Center.

- Advertisment -

Latest Articles