We can apply and use CSS in a single element by inline CSS technique.
The inline CSS is also a method to insert style sheets in HTML document.
If you want to use inline CSS, you should use the style attribute to the relevant tag.
<h1 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h1><p>This paragraph is not affected.</p>
Inline CSS is applied on this heading.
This paragraph is not affected.
Disadvantages of Inline CSS
You cannot use quotations within inline CSS. If you use quotations the browser will interpret this as an end of your style value.
These styles cannot be reused anywhere else.
These styles are tough to be edited because they are not stored at a single place.
It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
Inline CSS does not provide browser cache advantages.
Example Of Inline CSS
this is paragraph tag
this is paragraph tag
The internal style sheet is used to add a unique style for a single document. It is defined insection of the HTML page inside the tag.
In internal CSS the style of CSS is specified in thesection. This is internal CSS, it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body. For that, we can use the style in the head tag.
Example Of Internal CSS
<h1>The internal style sheet is used on this heading.</h1>
<p>No styling applied on paragraph tag</p>
The internal style sheet is used on this heading.
No styling applied on paragraph tag
The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.
The external style sheet may be written in any text editor but must be saved with a .css extension. This file should not contain HTML elements.
this is heading tag
Generally, external Cascading Style Sheets are used whenever we have many HTML attributes and we can use them as required; there is no need to rewrite the CSS style again and again in a complete body of HTML that inherits the property of the CSS file.
In External CSS we create a .css file and use it in our HTML page as per our requirements.
There are two ways to create a CSS file.
The first is to write the CSS code in Notepad and save it as a .css file, the second one is to directly add the style sheet in our Solution Explorer and direct Visual Studio to use it on our HTML page.
How to create and use an External CSS.
Add a style sheet.
Write your CSS code and save it.
Open your HTML page and drag down the style sheet.