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 apply 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 set 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
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<p style="background-color: lightblue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</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
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<p style="background-color: lightblue; color: green;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</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
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p style="background-color: lightblue; font-style:italic ;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</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
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p style="font-size: 30px; font-style:italic ;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>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.