What is the best way to include CSS file? Why use @import?

CSS property can be include in the HTML page in a number of different ways. HTML documents are formatted according to the information in the style sheet which is to be included.

There are many ways to include CSS file which are listed below:

  • External style sheet (Using HTML <link> Tag): External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages. The link tag is used to link the external style sheet with the html webpage.
    <link rel="stylesheet" href="style.css">
  • External style sheet (Using the @import At-Rule): At-rule method must be included either within <style> tag or else inside style sheet.
    <style>
    @import url(style.css);
    </style>
  • Internal style sheet (Using the <style> Element): This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
    <style>
    element {
        // CSS property
    }
    </style>
  • Inline Style Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using style attribute. It is used to apply a unique style for a single element.
    <h1 style="style property">Geeksforgeeks</h1>

Best Approach: The External Style Sheet (using HTML <link> Tag) is the best method which is used to link the element. Maintaining and re-using the CSS file across different pages is easy and efficient. The <link> tag is placed in the HTML <head> element. To specify a media type=”text/css” for a Cascading Style Sheet <type> attribute which is used to ignore style sheet types that are not supported in a browser.



Example 1: The file given below contains CSS property. This file save with .css extension. For Ex: geeks.css

body {
    background-color:powderblue;
}
.main {
    text-align:center;   
}
.GFG {
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#geeks {
    font-style:bold;
    font-size:20px;
}
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <link rel="stylesheet" href="geeks.css"/> 
    </head
    <body
        <div class = "main"
        <div class ="GFG">GeeksForGeeks</div
        <div id ="geeks">A computer science portal for geeks</p
        </div
    </body
</html>     

chevron_right


Output:
external css

Example 2: This example describes the Internal or Embedded CSS.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>Internal CSS</title
        <style
            .main { 
                text-align:center; 
            
            .GFG { 
                color:#009900; 
                font-size:50px; 
                font-weight:bold; 
            
            .geeks { 
                font-style:bold; 
                font-size:20px; 
            
        </style
    </head
    <body
        <div class = "main"
        <div class ="GFG">GeeksForGeeks</div
        <div class ="geeks">A computer science portal for geeks</p
        </div
    </body
</html>                     

chevron_right


Output:
internal style

Example 3: This example describes the inline CSS.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>Inline CSS</title
    </head
      
    <body
        <p style = "color:#009900; 
                    font-size:50px; 
                    font-style:italic; 
                    text-align:center;"> 
        GeeksForGeeks</p
    </body
</html>                     

chevron_right


Output:
inline css

@import rule: The @import rule is used to import one style sheet into another style sheet. This rule also support media queries so that the user can import the media-dependent style sheet. The @import rule must be declared at the top of the document after any @charset declaration.

Characteristics of @import:

  • The @import at-rule is used to import a style sheet into a HTML page or another style sheet.
  • The @import at-rule is also used to add media queries, therefore import is a media-dependent.
  • It always to be declared at the top of the document.

Syntax:

@import url|string list-of-mediaqueries;

Property values:

  • url|string: A url or a string represents the location of the resource to be imported. The url may be relative or absolute.
  • list-of-mediaqueries: The list of media queries condition the application of the CSS rules defined in the linked URL.

Example 1: Consider the two CSS files as shown below.

  • icss.css
    @import url("i1css.css");
    h1 {
        color: #00ff00;
    }
  • i1css.css
    h1 {
       text-decoration: underline;
       font-size:60px;
    }
    
    p {
       padding-left: 20px;
       font-size: 60px;
    }
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
<head
    <title>WebPage</title
    <link href="icss.css" rel="stylesheet"
</head
  
<body
    <h1>GeeksforGeeks</h1
    <p>A computer science portal for geeks</p
</body
</html>                     

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>@import property</title>
      
    <style type="text/css">
        @import url(
    </style>
</head>
  
<body
    <div id = "Geeks">
          
        <h1>GeeksforGeeks</h1>
          
        <h2>External style sheet (Using @import At-rule)</h2>
    </div>
</body>
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.