Summary
Highlights
This tutorial explains how to use @import in CSS to bring styling from external files into a main CSS file. This helps with organizing CSS code across multiple files.
The video demonstrates importing 'header.css' and 'paragraph.css' into 'style.css'. Initially, 'header.css' makes headers green. After importing, the styling is applied to the webpage.
It's possible to override imported styles by defining new rules in the main CSS file. For example, changing headers from green to red overrides the imported style, demonstrating that local rules take precedence.
Using imports helps with modularization and organization of CSS files. However, it's important to be aware that each @import statement on a web server generates an additional HTTP request, potentially slowing down website load times if numerous imports are used. For a few imports, the impact is minimal, but many imports can significantly increase load time.