- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
How to apply inline CSS?
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.
- Related Articles
- How to apply CSS to iframe?
- Inline-level Elements and Inline Boxes in CSS
- How to use inline CSS (Style Sheet) in HTML?
- How to create a responsive inline form with CSS?
- How to make div elements display inline using CSS?
- How to display paragraph elements as inline using CSS?
- Working with Inline CSS
- Display Inline using CSS
- How to apply CSS properties using jQuery?
- How to apply CSS style using jQuery?
- How to apply multiple CSS properties using jQuery?
- Display Inline-Block using CSS
- Display Inline Working with CSS
- How to use inline CSS style for an element in HTML?
- How to Apply Shadow Effect on Text Using CSS?
