How to apply inline CSS?

CSS Web Development Front End Technology

Inline CSS is writing the styles for a particular HTML element inside its “style” attribute. The styles here are unique to the element itself, and generally override the CSS provided internally or externally. CSS is used to apply styling to the HTML elements in a web application, and there are various ways through which we can achieve this. One of the ways of applying custom styles is by using inline CSS.

Syntax

<tag_name style=”/* inline styles here */”></tag_name>

Here, “tag_name” refers to any HTML tag name, and the “style” attribute of the HTML tag allows us to add inline styles to the element directly.

Example 1

In this example, we will style the “p” tag to give it a different color and font style using inline CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply inline CSS?</title>
</head>
<body>
   <p style="color: red; font-style: oblique;">How to use inline CSS?</p>
</body>
</html>

Example 2

In this example, we will style the “button” tag to give it a different background color and font color using inline CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply inline CSS?</title>
</head>
<body>
   <h3>How to apply inline CSS?</h3>
   <button style="color: white; background-color: black;">button</button>
</body>
</html>

Conclusion

In this article, we learned what inline CSS is, and we used it to style HTML elements in a web application, with the help of 2 examples. In the first example, we applied a “red” font color to the text, and in the second example, we applied a “white” text color and a “black” background color to the button using inline CSS.

Dishebh Bhayana

Updated on: 22-Feb-2023

221 Views

Kickstart Your Career

Get certified by completing the course

Get Started