Difference between Inline, Internal and External CSS
Last Updated :
20 Feb, 2024
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.
Inline CSS Syntax:
<p style="css_styles">
// Content
</p>
Inline CSS Example:
In this example, we will change the color and font size of a paragraph element with the help of the “style” attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Inline CSS
</title>
</head>
<body>
<h2 style="color: green;
font-size: 18px;">
Welcome To GFG
</h2>
<p style="color: red;
font-size: 14px;">
This is some text. style by inline CSS
</p>
</body>
</html>
|
Output:
Inline CSS
Inline CSS Example Explanation:
Here is the basic explanation of the above code example.
- The style attribute is added directly to the <p> tag.
- Within the style attribute, CSS rules like color and font-size are specified.
- These rules affect only the specific paragraph where the style attribute is used.
Internal CSS:
Internal CSS, also known as embedded CSS, involves adding CSS rules directly within the <style> element in the <head> section of an HTML document. It allows styling specific to that document.
Internal CSS Syntax:
<style>
// CSS Properties
</style>
Internal CSS Example:
Here i s the basic implementation of internal CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Internal CSS
</title>
<style>
h1 {
color: blue;
font-size: 24px;
font-weight: bold;
}
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>GeeksForGeeks</p>
</body>
</html>
|
Output:
Internal CSS
Internal CSS Example Explanation:
Here is the explannation of the above-code example.
- CSS rules are enclosed within the <style> element.
- CSS rules target the <h1> and <p> elements, styling them with specific colors, font sizes, and weights.
- Internal CSS applies only to this HTML file and cannot be reused elsewhere.
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.
External CSS Syntax:
<head>
<link rel="stylesheet"
type="text/css" href="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.
External CSS Example:
Here is the basic example of using external css file.
HTML
<!DOCTYPE html>
<html>
<head>
<title>External Style</title>
<link rel="stylesheet"
type="text/css" href="style.css">
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>GeeksForGeeks</p>
</body>
</html>
|
Create a CSS file named styles.css and write all the codes in that CSS file
File name: style.css
CSS
h1 {
color: blue;
font-size: 24px;
font-weight: bold;
}
p {
color: green;
font-size: 16px;
}
|
Output:
External CSS
External CSS Example Explanation:
Here is the explanation of the above code example.
- Here we are using External CSS file style.css to provide styling to our HTML element.
- CSS rules target the <h1> and <p> elements, styling them with specific colors, font sizes, and weights.
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.
Inline, Internal and External CSS Use Cases:
To apply inline CSS, use the style attribute within an HTML tag, specifying CSS property-value pairs directly within the element.
To write a:hover in inline CSS, use the style attribute with the “:hover” pseudo-class applied to the HTML element.
To create a responsive inline form using CSS, set form elements to display:inline-block and use media queries for responsiveness.
To include external CSS in an HTML document, use the <link> tag in the <head> section with the href attribute pointing to the CSS file.
To override inline styles with external CSS, ensure that the external CSS rules have higher specificity or are loaded after the inline styles.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...