In this section, we will learn how to style an HTML element using the style attribute.
Styles in HTML: Inline HTML Style
HTML elements can be styled! For example, if you have a paragraph and change its text color into red, blue etc. or change its background into any color other than the white color that you see by default. Or, we can set a colorful border for an HTML element! Basically, there are many types of styling that could be applied to an HTML element.
We do this styling on each element using an attribute called `style`. This attribute takes CSS properties and applies those properties to the target HTML element.
Note: the process of using the style attribute on each element is called inline styling. This is because we apply the CSS styles right where the element is written. But remember that this is not the only way of applying CSS styles to HTML elements! In the CSS section, we’ve explained other methods as well.
Inline Style Attribute in HTML Syntax and Declaration:
This is the syntax of using the style attribute:
<element-name style = “prop1:value; prop2:value; prop_n:value”> </element-name>
As you can see, we put the style attribute in the opening tag of elements and the value we put for this attribute is one or more CSS properties, each separated via a semicolon `;`.
HTML Background Color
One of these CSS properties is called background-color and it is used to change the background of an element!
For example, if you have a paragraph in your document and want to change its background color, then the background-color property is the property to use.
Simply put, this property as the value of the style attribute and sets a color name for the property and as a result the background of the target element will change to the specified color.
Example: background color in HTML
HTML Color Text
If we have a text content in our program and want to change the color of the text, we can use a CSS property called `color`. Simply, set a color name for this property and put the property and its value as the value of the `style` attribute and thus it will change the text color of the element that the style attribute is defined for.
Example: change color of text in HTML
HTML Font Style: How to Change the Font in HTML
Another CSS property that we can put as the value of the style attribute is called font-style. Using this property, we can change the style of a font into italic for example.
Example: font style in HTML
Font Style Size in HTML
Another CSS property that could be used as the value of the style attribute is called font-size, which is in charge of changing the font size of a text content in an HTML document.
Let’s run an example and see how it works.
Example: font size in HTML style
By default, the font size of the text content used in a <p> element is 16px. But as you can see, we’ve used the font-size property and changed this size to 30px.