How to use inline CSS style for an element in HTML?

Front End Technology HTML Web Development

Using inline CSS we can apply a distinct style to one HTML element at a time. This can be done using the style attribute. Inline CSS always overrides style properties determined in internal or external style sheets.

Syntax

<element style="mystyles">

Following are the examples…

Example

In the following example we are applying inline style defined within the style attribute of relevant element


<!DOCTYPE html>
<html>
<body>
   <p style="color:lightgreen;">Hello Everyone</p>
   <p style="color:red;">Welcome to Tutorialspoint</p>
</body>
</html>

On executing the above script the incline css get activated and applied to the elements in the text.

Using JavaScript

Using JavaScript, the style property can be used to set the inline css properties of a particular element.

Syntax

element_name.style

Example

In the following example we use the style object to set the css properties of a paragraph with the id Varma.


<!DOCTYPE html>
<html>
<body>
   <p id="varma">HELLO WORLD..!</p>
   <script>
      let p = document.querySelector('#varma');
      p.style.color = 'red';
      p.style.fontWeight = 'bold';
   </script>
</body>
</html>