> For the complete documentation index, see [llms.txt](https://codingzonebd.gitbook.io/html-elements/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codingzonebd.gitbook.io/html-elements/html-styles.md).

# HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

**<**<mark style="color:orange;">**tagname**</mark> <mark style="color:red;">**style**</mark>**="**<mark style="color:green;">**property:value;**</mark>**">**

{% code overflow="wrap" lineNumbers="true" %}

```html
<body style="background-color:powderblue;">
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    
    <!-- Set background color -->
    <h1 style="background-color:powderblue;">This is a heading</h1>
    <p style="background-color:tomato;">This is a paragraph.</p>
    
    <!-- Text Color -->
    <h1 style="color:blue;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>
    
    <!-- Fonts -->
    <h1 style="font-family:verdana;">This is a heading</h1>
    <p style="font-family:courier;">This is a paragraph.</p>
    
    <!-- Text Size -->
    <h1 style="font-size:300%;">This is a heading</h1>
    <p style="font-size:160%;">This is a paragraph.</p>
    
    <!-- Text Alignment -->
    <h1 style="text-align:center;">Centered Heading</h1>
    <p style="text-align:center;">Centered paragraph.</p>
</body>
```

{% endcode %}

**Summary**

* Use the `style` attribute for styling HTML elements
* Use `background-color` for background color
* Use `color` for text colors
* Use `font-family` for text fonts
* Use `font-size` for text sizes
* Use `text-align` for text alignment
