Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS: Linking to An External Stylesheet With the link Tag and The @import Directive

Wednesday, December 1, 2021

CSS: Linking to An External Stylesheet With the link Tag and The @import Directive

One of the first thing you would do in web development is to link an external Cascading Stylesheet to an HTML document.  As a matter of fact bootstrap would not work if you didn't link the bootstrap.css file in your HTML document.  Linking an external document is easy enough you often see the link like this

    <link href="Content/bootstrap.css" media="all" rel="stylesheet" type="text/css"></link>
    <script src="Scripts/bootstrap.js"></script>

Now let's break it down link attributes, there are four possible attributes for the link tag.

They are the following:
  • rel (required) - Relations, relationship to this page.  For CSS stylesheets its "stylesheet"
  • type (optional) - is the type of the link, "text/css" is the type for CSS stylesheets
  • href (required) - is the location of the resource, it could a relative path or an actual URL like a CDN
  • media (optional) - with this attribute you can specify which media the stylesheet is meant for.  For example the media attribute can have the "projector" value.

Another way you can link to an external stylesheet is with the @import directive, which you don't see very often.  It is used a little differently.  You have to put it on the first line or before the CSS rules inside the <style> tag like so 

        @import url(CSS/styles.css);

The cool thing about the @import directive is that you can have one stylesheet imported in another.  To demonstrate this let's create two stylesheets and have one stylesheet import the other.

First create the nav.css file with the following markup

    font-size: 5px;

Now create the styles.css file with the following markup


body {

    font-size: 50px;

The next step is to create an index.html file to import the styles.css file. Even though you only imported the styles.css file with the @import directive, you also have access to the nav.css style rules because the styles.css file already imported the nav.css file.

The html markup looks like the following:

<!DOCTYPE html>
    <link href="Content/bootstrap.css" type="text/css" rel="stylesheet" media="all" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.js"></script>
    <meta charset="utf-8" />
        @import url(CSS/styles.css);
    <p class="styles-really-big-fonts">This is from styles stylesheet</p>
    <p class="nav-really-small-font">This is from nav stylesheet</p>

The output of the HTML file should look like this

Previous: Bootstrap 4: Grid System Cheat Sheet
Next: Target Specific Media Environments With CSS Media And Feature Queries


  1. This comment has been removed by the author.


    1. error404-store

      - -- Spamming tools --

      1-- cpanel https ssl secure
      2-- shell ssl secure
      3-- web-mail
      4-- smtp
      5-- rdp with send bluster
      6-- scam pages
      7-- ceo or cfo leads

      -- Spy virus slinet Exploits --

      1-- privet rat
      2-- crypter exploits
      3-- privet rdp hosting
      4-- os andriod spy virus
      5-- iso iPhone spy virus
      6-- Nokia spy virus

      - -- scanners brute-force ---

      1-- linux roots
      2-- cpanel scanner
      3-- cpanel bruter
      4-- shell scanner
      5-- smtp scanner
      6-- smtp bruter
      7-- zimbra scanners

      - -------------------

      cpanel,shell,smtp,scampages,sender,ceo or cfo leads,rdp,spyvirus,crypter,exploits,scanners

      Telegram:- @Donsmith000

      icq :- @Donsmith000

  2. Nice article!! A very well written and well-structured article. It was really an informative article.
    WordPress Design Agency

  3. Infycle Technologies offers couples for care and technology in addition toPython Training in Chennai, 100% of the internship class will be prepared. After completing the training, the participants will be sent to the upper MNCs interviews. Call 750633333 to get more information and get a free display.

  4. CSS link to stylesheet is the important. I am working with the cheap assignment writing service to the students those want to working from the other sources.

  5. One of the first thing you would do in web development is to link an external Cascading Stylesheet to an HTML document


Search This Blog