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

See the Pen background color in HTML by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen change color of text in HTML by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen font style in HTML by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen font size in HTML style by Omid Dehghan (@odchan1) on CodePen.

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.