| by Arround The Web | No comments

Best Way to Include CSS? Why Use @import?

While developing websites and web apps, the same styling in every web page is often required to maintain the consistency of the web app. For instance, if the colors of the main page of a web app are a combination of pink and purple, it will look weird if the next page of the web app is of any other color like black and orange.

But while coding, it is difficult to include the same CSS properties for each and every web page separately. So, it is required to use a solution through which a single style sheet can be created and then accessed by multiple files easily.

What is the @import Rule in CSS?

The best way to include the CSS style properties is by using the @import rule. @import is used to import or access a CSS stylesheet from another style sheet. This reduces the effort of the developer as all the properties added in the imported style sheet are implemented directly by just writing @import and then the exact name of the style sheet.

Syntax of @import Rule

The syntax to add the @import rule to access a style sheet from another stylesheet is the following:

@import "stylesheetname.css";

The @import rule can also be added by the following method:

@import url(stylesheetname.css);

Simply, add the name of the CSS stylesheet file in either inverted commas or in round brackets with “url” after writing “@import”.

Example: Adding @import Rule

To understand how the @import rule works, we write a simple code snippet:

<h1>This is a Simple Text!</h1>

In the above code snippet, there is a <h1> heading with a simple one-line sentence added in an HTML document. This simple code will generate the following output:

Lets create a stylesheet to define some CSS properties that can later be imported from the file through which the above web page interface is created. We create another file and name it “stylesheet” with the file type declared as “css”, and simply add some properties for <h1> heading and body:

h1{

color: midnightblue;

background-color: azure;

text-align: center;

}

body{

background-color: lightblue;

}

To access the stylesheet file containing the style properties for <h1> heading and body, we need to simply add the @import rule in any of CSS files where that styling is needed.

Adding just a simple @import rule will implement all the style properties to the web page interface without having to type the properties separately on each web page.

So, it is required to write the @import rule as:

@import "stylesheet.css";

Adding the @import rule by writing “url” and the name of the CSS file in the round brackets will also display the same results:

@import url(stylesheet.css);

The properties defined in the “stylesheet” file are implemented by just adding a simple “@import” rule for it:

This the easiest way to include the CSS properties in a file without any additional efforts.

Benefits of @import Rule in CSS

The @import rule is used commonly for the following reasons:

  • Using the @import Rule reduces the time and effort of the developer as it implements all the properties of a particular style sheet by just writing the name of that sheet after @import.
  • In large and complex web apps, the @import rule proves to be very advantageous as the same style properties can be implemented in multiple files just by adding the name of the style sheet file.
  • Style sheet elements like headers, footers, body, etc can be stored in separate style sheet files, and then by using the @import rule, any of the required styling can be imported without needing to add, remove, or comment style properties from a file.

This sums up the use of the @import rule and explains how this rule is considered the best method to include CSS.

Conclusion

A CSS style sheet can be imported or accessed directly from another style sheet and all the properties in the imported style sheet are directly implemented on the web page of the file where it has been imported. There is no need to write each and every CSS property separately for every web page interface. All it takes is to add the name of the CSS style sheet file with @import. And, this is considered the best method to add CSS.

Share Button

Source: linuxhint.com

Leave a Reply