How to apply inline CSS
How to Apply Inline CSS
Inline CSS is when you write styles for a specific HTML element within its “style” attribute. The styles here are unique to the element itself and will often override internally or externally provided CSS. CSS is used to style HTML elements in web applications, and we can do this in a variety of ways. One way to apply custom styles is by using inline CSS.
Syntax
<tag_name style=”/* inline styles here */”></tag_name>
Here, “tag_name” refers to the name of any HTML tag, and the “style” attribute of an HTML tag allows us to add inline styles directly to an element.
Example 1
In this example, we will use inline CSS to style the “p” tag with different colors and font styles.
<!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’ll use inline CSS to style the “button” label with different background and font colors.
<!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>
Summary
In this article, we learned what inline CSS is and used it to style HTML elements in web applications with the help of two examples. In the first example, we applied a “red” font color to text, and in the second example, we applied a “white” text color and a “black” background color to a button using inline CSS.