About Us | Sitemap | RSS Feeds
Home/CSS/External CSS

External CSS

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:
  1. <head>
  2. <link href="URL.css" rel="stylesheet" type="text/css" />
  3. </head>

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:
  1. <head>
  2. <style type="text/css">
  3. @import url("URL.css");
  4. </style>
  5. </head>

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.

Advantages of External CSS

External style sheets have many advantages of external CSS over embedded CSS:

  • It keeps your website design and content separate.
  • It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
  • You can make drastic changes to your web pages with just a few changes in a single CSS file.
  • It allows a single style sheet to control the rendering of multiple documents. This results in a time-savings for the author, a savings of space for the web server, and less download time for the user.
  • This method can be used in HTML, XHTML and HTML5.

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.

Continue >> << Back
Disclaimer: This site is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License
Contact Us: info@tutorialswire.comCopyright TutorialsWire.com, All Rights Reserved.