Accessing External CSS
When using external CSS, there are two ways you can import a style sheet into your web page, both of them have different advantages over each other but they both do the job pretty well. The first method of importing CSS into a web page is by using the import tag, which is based inside of the HTML 4.01 language. The other method to import CSS is actually used inside CSS code it's self. To import CSS, the @import command must be within the CSS file or code block. I will now explain each method in more depth and provide examples.
<link/> Method
The link method has been around for quite some time and is supported by many browsers. This method has no limitation of how many style sheets it can import into a web page, which makes it very efficient. There are multiple properties which can be applied to this tag like the type of style sheet, type of css and finally the URL of the file. The link tag can only be used in HTML web pages.
Example
<link rel="stylesheet" type="text/css" href="style.css" />
In this example, the link tag is importing a style sheet from style.css and also is providing the type of css, which will need to be used by the browser (text/css).
@import Method
The @import method is relatively new in CSS and provides a new way of importing style sheets into web pages. This method is useful if you need import another css file which is required to create the layout of the page and it can save space because you no longer need to use all those link tags. This method is usually used for new browsers because older browser such as Internet Explorer 4-5 might not support this feature, which can cause distortion for your web page in its style.
Example
<style
type="text/css">
@import url('style.css');
</style>
In this example, a new set of style tags (head) are used to import style.css using the URL property. The type of style to be used is provided by the head method (text/css).
Differences
There are many differences between both methods, when it comes to incorporating CSS within web pages. Both methods differ in age and support status, for instance, the @import method was recently developed for the CSS language and therefore, older browsers won't be able to support this feature however, the link tag (In HTML) has been around for quite some time and is supported by many browsers. They also differ on how they achieve the task, for instance, the @import method lets you import many other css files within any css file which provides more flexibility, whilst to do the same with the link tag, many link tags would have to be placed in the head section of the HTML file.
Conclusion
Both methods work relatively well but need to be chosen wisely, because compatibility needs to taken seriously. For instance, the @import method should only be used on newer browsers because old browsers might not support the language feature however, if the browser doesn't support the feature, the Link method becomes handy because most browsers support this method. I would recommend you to use both methods because if one method doesn't work, one is already their to back it up.