{"id":1494,"date":"2017-03-21T17:54:56","date_gmt":"2017-03-21T12:24:56","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1494"},"modified":"2017-03-29T10:45:36","modified_gmt":"2017-03-29T05:15:36","slug":"possible-include-one-css-file-another","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/possible-include-one-css-file-another\/","title":{"rendered":"[Solved -9 Answers] CSS – Is it possible to include one CSS file in another"},"content":{"rendered":"

Is it possible to include one CSS file in another?<\/p>\n

Yes,its possible to include one css file in another.The @import rule must precede all other rules (except the @charset rule);<\/p>\n

Additional @import statements require additional server requests.
\nAggregate CSS into one file to avoid multiple HTTP requests.
\nThat is, copy the contents of base.css and special.css into base-special.css and reference only base-special.css).<\/p>\n

Importing CSS file into another CSS file is possible.<\/p>\n

It must be the first rule in the style sheet using the @import rule.<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%40import%20%22mystyle.css%22%3B%0A%40import%20url(%22mystyle.css%22)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

The only caveat is that older web browsers will not support it. In fact, this is one of the CSS \u2018hack\u2019 to hide CSS styles from older browsers.<\/p>\n

The @import url(\u201cbase.css\u201d); works fine but that every @import statement is a new request to the server.<\/p>\n

This might not be a problem for you, but when optimal performance is required you should avoid the @import.<\/p>\n

The CSS @import rule does just that. E.g.,<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%40import%20url(\u2018%2Fcss%2Fcommon.css\u2019)%3B%0A%40import%20url(\u2018%2Fcss%2Fcolors.css\u2019)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

In some cases it is possible using @import \u201cfile.css\u201d, and most modern browsers should support this, older browsers such as NN4, will go slightly nuts.<\/p>\n

Note:<\/strong><\/h4>\n

The import statement must precede all other declarations in the file, and test it on all your target browsers before using it in production.<\/p>\n

yes it is possible using @import and providing the path of css file e.g.<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%40import%20url(%22mycssfile.css%22)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

or<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%40import%20%22mycssfile.css%22%3B\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

CSS :<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%40import%20url(\u2018%2Fcss%2Fheader.css\u2019)%20screen%3B%0A%40import%20url(\u2018%2Fcss%2Fcontent.css\u2019)%20screen%3B%0A%40import%20url(\u2018%2Fcss%2Fsidebar.css\u2019)%20screen%3B%0A%40import%20url(\u2018%2Fcss%2Fprint.css\u2019)%20print%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

We have created main.css file and included all css files in it.<\/p>\n

We can include only one main.css file<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%40import%20url(\u2018style.css\u2019)%3B%0A%40import%20url(\u2018platforms.css\u2019)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

We can try this :<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%40import%20url(%22fineprint.css%22)%20print%3B%0A%40import%20url(%22bluish.css%22)%20projection%2C%20tv%3B%0A%40import%20\u2019custom.css\u2019%3B%0A%40import%20url(%22chrome%3A%2F%2Fcommunicator%2Fskin%2F%22)%3B%0A%40import%20%22common.css%22%20screen%2C%20projection%3B%0A%40import%20url(\u2018landscape.css\u2019)%20screen%20and%20(orientation%3Alandscape)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"

PROBLEM : Is it possible to include one CSS file in another? SOLUTION 1 Yes,its possible to include one css file in another.The @import rule must precede all other rules (except the @charset rule); Additional @import statements require additional server requests. Aggregate CSS into one file to avoid multiple HTTP requests. That is, copy the […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[2988,2999,3003,2996,2993,2998,2997,3001,3000,2992,2994,2991,2989,2995,3002,2990,2987,2986],"class_list":["post-1494","post","type-post","status-publish","format-standard","hentry","category-css","tag-import-css","tag-import-css-example","tag-import-css-font","tag-import-css-w3schools","tag-4-methods-of-adding-css-to-html-link","tag-css-include","tag-css-import-not-working","tag-css-import-relative-path","tag-css-include-other-class","tag-dont-use-import-high-performance-web-sites","tag-embed","tag-how-to-avoid-css","tag-how-to-include-css","tag-inline-and-import","tag-scss-include","tag-using-import-in-cascading-style-sheets-css","tag-using-import-to-call-your-css-files","tag-using-the-css-import-rule"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1494"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1494\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}