HTML “style” attribute

CSS stands for Cascading Style Sheet. It describes the look of the webpage. It is used to format the layout of a webpage. In this chapter you will learn about “style” attribute in HTML.

CSS provides various style properties such as background-color, padding, margin, border-color, font-size and many more to style a webpage.

Each property in CSS has a name-value pair, and each property is separated by a semicolon (;). name-value pair is separated using “:” colon.

In this chapter, we have given a small overview of CSS.

You will learn everything in depth about CSS in our CSS tutorial.

Contents hide
“style” attribute
Example

“style” attribute

By using the style attribute inside HTML elements you can add CSS. This is known as inline CSS.

An inline CSS is used to apply a unique style to a single HTML element. It can apply style uniquely in each element.

To apply inline CSS, you need to use style attribute within HTML element. 

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"style" attribute</title>
</head>

<body>
    <h1 style="color:blue;">A Blue Heading</h1>

    <p style="color:red;">A red paragraph.</p>

<h3 style="color: red;  
            font-style: italic;  
            text-align: center;  
            font-size: 50px;  
            padding-top: 25px;">Learning HTML using Inline CSS</h3>

</body>

</html>

You can use as many properties as you want, but each property should be separated by a semicolon (;).

HTML “style” attribute example – Output

There are other ways also to add CSS in webpage. You will learn everything about CSS in our CSS Tutorial.