However whereas coding, it’s troublesome to incorporate the identical CSS properties for every internet web page individually. So, it’s required to make use of an answer via which a single model sheet may be created after which accessed by a number of recordsdata simply.
What’s the @import Rule in CSS?
One of the best ways to incorporate the CSS model properties is through the use of the @import rule. @import is used to import or entry a CSS stylesheet from one other model sheet. This reduces the trouble of the developer as all of the properties added within the imported model sheet are applied instantly by simply writing @import after which the precise title of the model sheet.
Syntax of @import Rule
The syntax so as to add the @import rule to entry a method sheet from one other stylesheet is the next:
@import “stylesheetname.css”;
The @import rule will also be added by the next technique:
@import url(stylesheetname.css);
Merely, add the title of the CSS stylesheet file in both inverted commas or in spherical brackets with “url” after writing “@import”.
Instance: Including @import Rule
To grasp how the @import rule works, we write a easy code snippet:
Within the above code snippet, there’s a <h1> heading with a easy one-line sentence added in an HTML doc. This easy code will generate the next output:
Lets create a stylesheet to outline some CSS properties that may later be imported from the file via which the above internet web page interface is created. We create one other file and title it “stylesheet” with the file kind declared as “css”, and easily add some properties for <h1> heading and physique:
coloration: midnightblue;
background-color: azure;
text-align: middle;
}
physique{
background-color: lightblue;
}
To entry the stylesheet file containing the model properties for <h1> heading and physique, we have to merely add the @import rule in any of CSS recordsdata the place that styling is required.
Including only a easy @import rule will implement all of the model properties to the online web page interface with out having to kind the properties individually on every internet web page.
So, it’s required to write down the @import rule as:
@import “stylesheet.css”;
Including the @import rule by writing “url” and the title of the CSS file within the spherical brackets can even show the identical outcomes:
@import url(stylesheet.css);
The properties outlined within the “stylesheet” file are applied by simply including a easy “@import” rule for it:
This the best strategy to embody the CSS properties in a file with none further efforts.
Advantages of @import Rule in CSS
The @import rule is used generally for the next causes:
- Utilizing the @import Rule reduces the effort and time of the developer because it implements all of the properties of a specific model sheet by simply writing the title of that sheet after @import.
- In giant and complicated internet apps, the @import rule proves to be very advantageous as the identical model properties may be applied in a number of recordsdata simply by including the title of the model sheet file.
- Model sheet parts like headers, footers, physique, and so on may be saved in separate model sheet recordsdata, after which through the use of the @import rule, any of the required styling may be imported while not having so as to add, take away, or remark model properties from a file.
This sums up using the @import rule and explains how this rule is taken into account the most effective technique to incorporate CSS.
Conclusion
A CSS model sheet may be imported or accessed instantly from one other model sheet and all of the properties within the imported model sheet are instantly applied on the internet web page of the file the place it has been imported. There isn’t any want to write down every CSS property individually for each internet web page interface. All it takes is so as to add the title of the CSS model sheet file with @import. And, that is thought-about the most effective technique so as to add CSS.
