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


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>

On running the above code, the elements in the text get applied with inline CSS

Updated on: 02-Sep-2022

315 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements