How to @Import CSS in HTML With Five Ways Import CSS URL
This Tutorials guide you, How to @import CSS in HTML, there are a number of ways so you can apply a CSS style to a webpage, including both inline styles or external style sheets.
when you make your website, if you are using an external style sheet therefore which is the best and recommended way to dominate an HTML document, then you need to add more files in the external style sheet one approach is to use @import.
To @import CSS in HTML Documents:-
To use the @import rule in your HTML Documents or HTML File(.html), you would add the following to the of the document:
Import the “navigation-menu.css” style sheet into the current style sheet.
|
1 2 3 |
@import url("navigation-menu.css"); /* Using a url */ or @import "navigation-menu.css"; /* Using a string */ |
The @import CSS rules allow you to import external style sheets into an HTML page or into other CSS documents or either in your documents.
it is easier to manage those file and many types of various style that contains lots of styles into a number of smaller, focused files.
therefore import those file which you need to do to get them all working for your web pages, which easier to import and managed all files in a good manner to display.
therefore, this code would now import this style sheet for the purpose use on this HTML Documents or page and you can manage very well manner all of your styles in that one file.
the downside to importing style sheet these ways is that this method does not allow for parallel downloads
Example: Another Way To @import CSS in HTML Documents
Import the “print_document_style.css” style sheet Only if the media is print:
|
1 |
@import "print_document_style.css" print; |
Import the “mobilestyle.css” style sheet ONLY if the media is the screen and the viewport is maximum of 480 pixels
|
1 |
@import "mobilestyle.css" screen and (max-width: 480px); |
Here, you can @import the file in HTML Documents for media screen devices (such as large screen, tables screen, Mobile screen).
if want to manage the HTML pages on every screen device, which you wrote the CSS Code for managing web pages.
for every device media query for min and max limit so that you can import those CSS code files for media screen viewport.
Alternative Approach
sometimes you need to link the pages as an alternative to using @import in your web HTML pages, you can easily link to that CSS file
|
1 |
<link href="/css/defaultstyle.css" rel="stylesheet"> |
it allows you to manage all of your CSS from one central location/ file, this functions very similarly to the @import.
the alternative method most developers prefer and it’s easy to use, as given CSS syntax above link your file location in “href” and rel means relation about style sheet.
when you add CSS file in “href” then rel will be stylesheet another when you add javascript file then rel will be javascript.
There are the all following ways to @Import CSS File
|
1 2 3 4 5 6 |
@import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import 'custom.css'; @import url("chrome://communicator/skin/"); @import "common.css" screen, projection; @import url('landscape.css') screen and (orientation:landscape); |
About Author
