---
title: "HTML style Attribute Tutorial"
url: https://weworkworldwide.com/tutorials/html-style-attribute-tutorial/
description: "HTML style Attribute Tutorial: In this section, we will learn what the style attribute is and how to use it in HTML."
date: 2026-11-01T09:00:03+00:00
source: https://weworkworldwide.com/llms.txt
---

# HTML style Attribute Tutorial

In this section, we will learn what the style attribute is and how to use it in HTML.

## What is Style: HTML Inline style Attribute Definition and Usage

The style attribute is used to set a CSS style for an HTML element.

Basically, the style attribute is used to create an inline style.

You should know that using inline style, will override any global style set in the <style> element or external styles brought via <link> element.

## HTML style Attribute Syntax

``` line-numbers
<element style = “CSS style”>
```

## HTML style Attribute Values

The value we set for the style attribute is any CSS property that we want to apply to the target element.

## Example: styles in HTML

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
background: blue;
}
</style>
</head>
<body >
<p style="background: red;"> This is a simple paragraph with red background </p>
</body>
</html>
```

For this example, the final background color is set to red which is the value set in the style attribute.

## Example: styles in HTML tags

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
</head>
<body >

<p> The content within the div element</p>

</body>
</html>
```

## Example: CSS div Style

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
</head>
<body >

<p> The content within the div element</p>

</body>
</html>
```

## Multiple style HTML

Multiple styles mean we want to use more than one CSS property and apply it to an element. For this to happen we use semicolon to separate each CSS property from the other.

## Example: multiple style in HTML

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
</head>
<body >
<p style="background: red; color: blue;"> This is a simple paragraph with red background and blue font </p>
</body>
</html>
```

## Example: styling text in HTML

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
</head>
<body >
<p style="font-size: 32px;"> This is a simple paragraph.</p>
</body>
</html>
```
