How to Apply CSS Inline Style.
In this article, I want to cover CSS Inline style. Where you can also apply styles directly to an HTML element. When authoring your CSS, you have a few options available to you, as to where you can write your styles.
I want to cover those options one by one and how they’re going to impact your overall site. Now basically, styles can be located in one of three different locations.
There are 03 Types of CSS Style sheets:
you can also apply styles directly to an HTML element, which is Inline Styles referred to as an inline style. These styles are added to an element as an HTML attribute.
The syntax can be a little awkward, as you start with a style attribute and then follow that with a semicolon-separated list of CSS rules.
For the most part, using inline styles are discouraged, as they’re inefficient and can be very hard to override or maintain.
Editing an inline style requires you to track down the element that the style is applied to and edit the HTML code directly.
This can be even more difficult if you are having to update somebody else’s code, as there’s no way to tell where the styles have been applied without first looking at the code itself.
An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method carefully!
It is very difficult to maintain, update and also take the long time to write.
The Example of Inline style.
<title>Using inline styles</title>
<h1>This is a heading one</h1>
<p style=”font-size:14px; color:red;”>This is Paragraph-1</p>
<p style=”font-size:12px; color:blue font-style:italic;”>This is Paragraph-2</p>
<p style=”font-size:12px; color:green; font-style:italic;”>This is Paragraph-3</p>
The only place where inline styles are still used extensively is in HTML emails, where older email clients offer weaker CSS support.