CSS (Cascading Style Sheets) is a fundamental component of web design that enhances the visual appeal and aesthetics of websites.
There are various types of CSS that developers can utilize to style their web pages. Each type has its own syntax, usage, and advantages.
In this article, we will explore the three primary types of CSS: Inline CSS, Internal CSS, and External CSS.
By understanding the differences and applications of these styles, you can effectively enhance the presentation of your web pages.
Your CSS code can be included with your HTML document, there are four different ways. These are namely:
- Internal CSS
- Inline CSS
- External CSS and
- Imported CSS
To understand and make a choice about which kind of inclusion you should go with, we will now learn more about each one of these types:
Internal (Embedded) CSS in hTML
As the name suggests, Embedded CSS is when you include the CSS style code by adding it to your HTML document.
The <style> element in HTML is employed for this purpose. The <style> tag has to be put within the <head></head> tag.
Whatever rules you define within this, will be applied to the respective fields in the document.
Thus, Embedded CSS is useful when you are designing a webpage with separate styling constructs but you also want the design to be reusable within the page.
1 2 3 4 5 6 7 8 9 | <style> body { background-color: BurlyWood; } h1 { color: white; } </style> |
Embedded CSS Example
1 | The <style> element in HTML is used for this purpose. |
Inline CSS in HTML
This is another way of adding the CSS code within the HTML document. However, Inline CSS is more element specific than Embedded.
Here, instead of a separate <style> tag, we add the CSS code to the style attribute in the different HTML elements.
Therefore, if you’re looking for styling your different webpage elements in different ways, Inline CSS is the way forward.
Inline CSS Example
1 | The style attribute of HTML element is used for this purpose. |
External CSS in HTML
The next two inclusion techniques are about using the CSS code in a separate file rather than the HTML document itself.
This enables the programmer to use the same CSS codes on multiple web pages.
Talking about External CSS specifically, the CSS code here is included by mentioning the CSS file name in a <link> tag. For example, below is a sample code for including a CSS file styleit.css into the HTML document
1 |
The CSS code file is saved under the .css extension.
1 |
External CSS Example in HTML
1 | All css properties are included from external css file |
Imported CSS in HTML
The basic idea is similar to the Externa CSS. Here, instead of the tag, we use @import. So the CSS file is written with the @import annotation to include it in the HTML code.
1 2 3 | <style type="text/css"> @import url("http://ebhor.com/examples/external.css"); </style> |
Imported CSS Example
1 | The @import url("http://ebhor.com/examples/external.css"); is uded to import the css file. |
The key difference between inline internal and external CSS are
1. Location: inline and internal CSS are specified in the same HTML file as external CSS are stored in separate files and called in HTML.
2. Scope: scope of inline CSS is to the particular element. The scope of internal CSS is only up to a page and the scope of external CSS is global.
3. Maintainability: code maintenance is hard in internal and inline CSS but this is very easy in external CSS.
What is External CSS
A CSS file defined outside the HTML file is called external CSS. The CSS is stored in a separate .css file. While creating a project is better to use External CSS. External CSS is linked in an HTML file using <link>.
Three types of CSS are
1. Inline CSS
2. Internal CSS
3. External CSS
external files are stored with the extension .css