Contact Number

+919501010103

Email Address

contact@oxosolutions.com

Social Icons
OXO Solutions® Logo for Website
Empowering small to large businesses since 2008

Fulfilling all your IT needs at single stop
CIN: U74999PB2016PTC045616​GSTIN: ​​03AACCO3599B1ZO

  • About
    • Mission
    • Vision
    • Our Branding
  • Solutions
  • Services
  • Products
  • Research
    • Web
    • Website Speed Optimization
    • Progressive Web Applications
    • Big Data
    • Artificial Intelligence
    • Internet of Things
    • Web Application Security
  • Portfolio
    • E-Commerce
    • Graphics
    • Logo Design
    • Web Design
    • Web Development
    • SEO
    • Software Development
    • CMS Customization
  • CSR
  • Resources
    • Frequently Asked Questions
  • Happenings
  • Events
  • Support
  • Career
    • Current Openings
    • Apply Online
    • Internship
    • Life at OXO
  • Blog
  • Partners
  • Contact

How to Avoid CSS@import? What is it and Why is Required?

How to avoid CSS@import? What is it and Why is Required-oxo-solution-digital-marketing-sompany

Cascading style sheets (CSS) is a style sheet language which is used to describe the look and formatting of the web page. 

What is CSS@import?

It is a process of importing CSS file into another CSS file. It is an external stylesheet. Here is the example of CSS@import.

<style>

@import url(B.css) ;

</style>

Why avoid CSS@import?

It causes additional HTTP requests for server and browser which increases the page load time. 

The delay in page load occurs because the files are downloaded in a sequential manner (this means one after the other) instead of downloading parallelly. The sequential loading adds additional round trip times to the overall page and thus slows down the web page as per the number of CSS files imported. 

Positions of CSS@import?

CSS @ import can be added in both CSS files and HTML pages. 

  • Usage in CSS files
    • It can be located at the top of the page. Here is the example of the script:
@import url(“style2.css”)

  • Usage in HTML files
    • It is used in the style tags. Here is an example:
<style type=”text/css”>

@import url(“style2.css”);

font-family: sans serif;

font-size: 17px;

font-weight: 300;

# more CSS scripts #

</style>

You may also like to read:- How You Can Make Money with eCommerce Website


How to avoid CSS@import?

This problem can be fixed using one of three methods:

#Method 1: By combining CSS files

 One method is that you can merge the files. This means you can simply copy and paste the files you were importing, directly into the original file. This will remove the need to import the file. 

Another way is that you can add a separate link in the header of HTML instead of adding CSS@import. 

#Method 2: By using inline CSS in HTML

If the CSS is inlined in the HTML, this reduces the unnecessary sequential loading of the page. 

<img src="picture.jpg" /><script type=“text/css”>…CSS script goes here…</script>

#Method 3: By using link tag in the HTML

If the link tag is used in the header of HTML instead of using CSS@import, this also helps in reducing the problem. 

<link href=”style2.css” rel=” stylesheet” type=”text/css”>

Conclusion

This article explains why CSS@import is bad for the page speed, including the additional steps that are added for the browser to load the web page. Moreover, it causes the browser to download, parse and then go out and get the next CSS file before it starts displaying the page.  

The best practice is to use not even a single @import.

Post navigation

Previous
Next

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may also Like

  • Saikhom Mirabai Chanu wins first medal for India at Tokyo 2020 Olympics
  • Avoid an Excessive DOM Size: How to Fix this Warning?
  • 14 Steps Guide to Create an Effective SEO Strategy In 2020
  • The Top 25 Do’s and Don’ts of SEO You Need to Know
  • What Are Backlinks in SEO and What Are The Advantages of Backlinks
  • Google Changed Gmail Logo: Here’s What Changed Made So Far?
  • What is Social Media Marketing, and Why Social Media is Important for Business?
  • Combine Images Using CSS Sprites
  • Why Website Speed is Important? How to Optimize Website for Fast Speed?
  • How to Do Keyword Research for SEO

Share on social media

  • Facebook
  • Google Plus
  • LinkedIn
  • twitter
Follow Us

Quick Links

  • Home
  • About
  • Research
  • CSR
  • Resources
  • Happenings
  • Support
  • Career
  • Blog
  • Partners
  • Payment Methods
  • Contact

Services

  • Website Designing
  • Web Development
  • Software Development
  • Ecommerce Development
  • Digital Marketing
  • CMS Customization
  • Search Engine Optimization
  • Logo Design
  • Graphics Design
  • Infrastructure as a Service
  • Workforce as a Service

Solutions

  • Healthcare Solutions
  • Corporate Branding
  • Education Solutions
  • Project Consultancy
  • Digital Marketing
  • Research & Analytics

Products

  • Human Resource Management
  • Customers Support
  • FB Auto
  • Live chat
  • Enterprise Resource Planning

Portfolio

  • E-commerce
  • Logo Design
  • Web Design
  • Web Development
  • SEO
  • Software Development
  • CMS Customization

©2025 OXO Solutions®. All rights reserved.

Copyright Right
  • Privacy Policy
  • Terms and Conditions
  • Refund Policy