Types of CSS
In order to generate a professional Webpage, you need to have knowledge of the different Types of CSS to write clean code. So no matter whether you are a beginner user or a pro the selection of the correct types of CSS (inline, internal or external) will be a great help and will allow you to preserve your website design more easily over the period of time.
1. Inline CSS
Inline CSS is used by Developers to style one HTML element in a different way to other elements. In this form of coding, you place the style property directly within the HTML tags.
- Syntax:
<tagname style="property: value;"> - Example:
<h1 style="color: blue; text-align: center;">This is a Blue Heading</h1> - Pros: For instance, it works well for a quick fix or testing a single element.
- Cons: However, However, this approach inject “code clutter” making styles difficult to override and therefore extremely difficult for developers to maintain.
- When to use: As a general rule, avoid this in a production environment. If you do decide to use dynamic styles, then do so with JavaScript.
2. Internal (Embedded) CSS
An Internal CSS is added to a single html document inside a <style> element within the <head>.
- Syntax:
<head><style>body { background-color: linen; }</style></head> - Pros: This method benefits one-page websites where you don’t want to manage many files.
- Cons: Conversely, these styles only apply to that specific page. Therefore, if you have 10 pages, you must copy-paste the code 10 times.
- When to use: Use this for small one-page landing pages or email templates.
3. External CSS
The industry specifically views this method as the standard. In this approach, you put your CSS into a separate file (with a .css extension) and connect it to your HTML document using a <link> tag.
- Syntax:
<head><link rel="stylesheet" href="style.css"></head> - Pros: * Efficiency: One CSS file can change the appearance of thousands of pages simultaneously.
- Performance: Browsers cache the CSS file. Consequently, users experience much faster load times on all subsequent visits.
- Organization: It keeps the HTML structure and CSS styling completely independent.
- Cons: It requires an extra HTTP request to download the file, but modern internet speeds make this negligible.
- When to use: Use this 99% of the time. For example, Bootstrap works this way: you link to the external CSS file to style every page on your site.
The “Cascading” Order
CSS stands for Cascading Style Sheets because the browser follows a specific hierarchy. If you apply styles from all three methods to the same element, the browser follows this order of importance:
- Inline style (Highest priority)
- External and Internal styles (Whichever appears last in the HTML code)
- Browser default (Lowest priority)
Comparison Table
| Feature | Inline CSS | Internal CSS | External CSS |
| Priority | Highest (1st) | Medium (2nd) | Lowest (3rd) |
| Maintenance | Very Hard | Hard | Easy |
| Reusability | None | One Page Only | Entire Website |
| Best For | Quick Testing | Single Pages | Professional Projects |
Check out our resources!
- Bootstrap Templates: Explore our Bootstrap Projects section.
- Free E-Books: Download your Free E-Books here.
