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.