Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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: 2022-09-02T11:18:54+05:30
449 Views
Advertisements