CSS is used to add styles on web pages that contain HTML elements. There are three methods to add styles on web pages, these are – Inline, Internal, and External. In this article, we will see the differences between Inline, Internal, and External CSS styles.
Inline CSS: Inline CSS is a way of defining the styling of an HTML element by adding CSS rules directly to the element’s tag using the “style” attribute. It is used for quick and simple styling changes to specific elements, without creating a separate CSS file.
Syntax:
<p style="css_styles">
// Content
</p>
Example: In this example, we will change the color and font size of a paragraph element with the help of the “style” attribute.
HTML
|
|
Output: Here, the “style” attribute has been added to the <p> tag and includes two CSS rules: “color” and “font-size”. The “color” rule is set to “red” and the “font-size” rule is set to “14px”. These rules will only apply to the specific paragraph element in which the “style” attribute has been added.
Inline CSS
Internal CSS: Internal CSS, also known as embedded CSS is a method of adding CSS rules directly to the head section of an HTML document. It involves using the <style> element to enclose the CSS code within the HTML document itself. Internal CSS is placed within the <head> section of the HTML document, typically after the document’s title and before any other content.
Syntax:
<style>
// CSS Properties
</style>
Example:
HTML
|
|
Output: In this example, the <style> element is used to enclose the CSS rules that apply to the h1 and p elements. Any styling applied with internal CSS is specific to that HTML document and cannot be used on other pages or websites.
Internal CSS
External CSS: External CSS is used to place CSS code in a separate file and link to the HTML document. To use external CSS, create a separate file with the .css file extension that contains your CSS rules. You can link this file to your HTML document using the “link” tag in the head section of your HTML document.
Syntax:
<head>
<link rel="stylesheet"
type="text/css" href="https://www.geeksforgeeks.org/difference-between-inline-internal-and-external-css/style.css">
</head>
In this case, the “link” tag specifies the type of the file (CSS), the relationship between the HTML document and the CSS file (“stylesheet”), and the location of the CSS file (“href” attribute). The href attribute points to the URL or file path of your external CSS file.
Example: HTML code:
HTML
|
|
Create a CSS file named styles.css and write all the codes in that CSS file
File name: style.css
CSS
|
|
Output:
External CSS
Differences between Inline, Internal, and External CSS:
| Feature | Inline CSS | Internal CSS | External CSS |
|---|---|---|---|
| Location | It is used within HTML tag using the style attribute. | It is used within <head> section of HTML document. | It is used in a separate .css file. |
| Selector Scope | Affects a single element or a group of elements. | Affects multiple elements within the same HTML element. | Affects multiple HTML documents or an entire website. |
| Reusability | Not reusable. Styles need to be repeated for each element. | Can be reused on multiple elements within the same HTML document. | Can be reused on multiple HTML documents or an entire website. |
| Priority | Highest priority. Overrides internal and external styles. | Medium priority. Overrides external styles but can be overridden by inline styles. | Lowest priority. Can be overridden by both inline and internal styles. |
| File Size | Inline styles increase the HTML file size, which can affect the page load time. | Internal styles are part of the HTML file, which increases the file size. | External styles are in a separate file, which reduces the HTML file size and can be cached for faster page loads. |
| Maintainability | Not easy to maintain. Changes need to be made manually to each element. | Relatively easy to maintain. Changes need to be made in one place in the <head> section. | Easiest to maintain. Changes need to be made in one place in the external .css file. |
Inline CSS is used for quick and specific styling, internal CSS is used for multiple elements within the same HTML document, and external CSS is used for a more organized and scalable approach to styling, allowing for reusability and maintainability.
CSS is used to add styles on web pages that contain HTML elements. There are three methods to add styles on web pages, these are – Inline, Internal, and External. In this article, we will see the differences between Inline, Internal, and External CSS styles.
Inline CSS: Inline CSS is a way of defining the styling of an HTML element by adding CSS rules directly to the element’s tag using the “style” attribute. It is used for quick and simple styling changes to specific elements, without creating a separate CSS file.
Syntax:
<p style="css_styles">
// Content
</p>
Example: In this example, we will change the color and font size of a paragraph element with the help of the “style” attribute.
HTML
|
|
Output: Here, the “style” attribute has been added to the <p> tag and includes two CSS rules: “color” and “font-size”. The “color” rule is set to “red” and the “font-size” rule is set to “14px”. These rules will only apply to the specific paragraph element in which the “style” attribute has been added.
Inline CSS
Internal CSS: Internal CSS, also known as embedded CSS is a method of adding CSS rules directly to the head section of an HTML document. It involves using the <style> element to enclose the CSS code within the HTML document itself. Internal CSS is placed within the <head> section of the HTML document, typically after the document’s title and before any other content.
Syntax:
<style>
// CSS Properties
</style>
Example:
HTML
|
|
Output: In this example, the <style> element is used to enclose the CSS rules that apply to the h1 and p elements. Any styling applied with internal CSS is specific to that HTML document and cannot be used on other pages or websites.
Internal CSS
External CSS: External CSS is used to place CSS code in a separate file and link to the HTML document. To use external CSS, create a separate file with the .css file extension that contains your CSS rules. You can link this file to your HTML document using the “link” tag in the head section of your HTML document.
Syntax:
<head>
<link rel="stylesheet"
type="text/css" href="https://www.geeksforgeeks.org/difference-between-inline-internal-and-external-css/style.css">
</head>
In this case, the “link” tag specifies the type of the file (CSS), the relationship between the HTML document and the CSS file (“stylesheet”), and the location of the CSS file (“href” attribute). The href attribute points to the URL or file path of your external CSS file.
Example: HTML code:
HTML
|
|
Create a CSS file named styles.css and write all the codes in that CSS file
File name: style.css
CSS
|
|
Output:
External CSS
Differences between Inline, Internal, and External CSS:
| Feature | Inline CSS | Internal CSS | External CSS |
|---|---|---|---|
| Location | It is used within HTML tag using the style attribute. | It is used within <head> section of HTML document. | It is used in a separate .css file. |
| Selector Scope | Affects a single element or a group of elements. | Affects multiple elements within the same HTML element. | Affects multiple HTML documents or an entire website. |
| Reusability | Not reusable. Styles need to be repeated for each element. | Can be reused on multiple elements within the same HTML document. | Can be reused on multiple HTML documents or an entire website. |
| Priority | Highest priority. Overrides internal and external styles. | Medium priority. Overrides external styles but can be overridden by inline styles. | Lowest priority. Can be overridden by both inline and internal styles. |
| File Size | Inline styles increase the HTML file size, which can affect the page load time. | Internal styles are part of the HTML file, which increases the file size. | External styles are in a separate file, which reduces the HTML file size and can be cached for faster page loads. |
| Maintainability | Not easy to maintain. Changes need to be made manually to each element. | Relatively easy to maintain. Changes need to be made in one place in the <head> section. | Easiest to maintain. Changes need to be made in one place in the external .css file. |
Inline CSS is used for quick and specific styling, internal CSS is used for multiple elements within the same HTML document, and external CSS is used for a more organized and scalable approach to styling, allowing for reusability and maintainability.