External CSS is really a useful thing in CSS tutorial. It is vital to know when is it appropriate to use external CSS. CSS external style sheet allows you to control CSS external font, CSS external background image and a lot more. By linking to external CSS files, it's possible to control the look and feel of multiply WebPages by making changes to one style sheet.
An external style sheet is simply a text file containing a list of CSS rules sets. Creating CSS external is also not a tough task. The file is saved with a .css extension and saved to any directory that can be accessed by the web pages using it. Unlike embedded style sheets, the CSS rule sets do not have to be wrapped in the <style>...</style> tags. The link element can be used to specify that a web page should use an external style sheet. The link element only requires a start tag <link> and is inserted in between the <head>...</head> tags of your web page. A CSS external example is given below to give a better idea:View Plain - Print Usage:
- <link href="URL.css" rel="stylesheet" type="text/css" />
Importing an external stylesheet works much the same as linking. Firstly make your text .css file and simply call it with @import syntax.View Plain - Print Usage:
- <style type="text/css">
- @import url("URL.css");
You can add multiple .css files into one file, just by adding a @import url("URL.css"); in the one common .css file. But keep remember that this method doesn't support all browsers, specially older versions.
External style sheets have many advantages of external CSS over embedded CSS:
In our chapters ahead we will discuss many topics such as CSS embedded external inline pros and cons, CSS embedded external inline comparisons and much more. So be with us till our next chapter.