What is the best way to include CSS file? Why use @import?
Last Updated :
06 Jul, 2021
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 the 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;
}
html
<!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>
Output:
Example 2: This example describes the Internal or Embedded CSS.
html
<!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>
Output:
Example 3: This example describes the inline CSS.
html
<!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>
Output:
@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.
@import url("i1css.css");
h1 {
color: #00ff00;
}h1 {
text-decoration: underline;
font-size:60px;
}
p {
padding-left: 20px;
font-size: 60px;
}
html
<!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>
Output:
Example 2:
html
<!DOCTYPE html>
<html>
<head>
<title>@import property</title>
<style type="text/css">
@import url(
"https://media.geeksforgeeks.org/wp-content/uploads/imp.css");
</style>
</head>
<body>
<div id = "Geeks">
<h1>GeeksforGeeks</h1>
<h2>External style sheet (Using @import At-rule)</h2>
</div>
</body>
</html>
Output:
Supported Browser:
- Google Chrome 1.0
- Internet Explorer 5.5
- Firefox 1.0
- Opera 3.5
- Safari 1.0
Similar Reads
How to Blur an Image using CSS? In CSS, the filter property is used to apply visual effects to images, such as blurring, grayscale, brightness adjustments, and more. One common use of the filter property is to apply a blur effect to an image, giving it a soft, out-of-focus appearance.Syntax:filter: blur(radius);radius: Defines the
2 min read
How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS ? We will know how to center-align the image in a div tag using CSS & will also understand its implementation through the example. Given an image, we need to set the image that align to the center (vertically and horizontally) inside a bigger div. But first let's create a basic structure, in which
2 min read
What does the CSS rule “clear: both†do? The clear property is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element about floating the objects. The "clear: both" means floating the elements are not allowed to float on both sides. It is used when no need for any element to
1 min read
How to Break Line Without using <br> Tag in HTML / CSS? Breaking lines in HTML without <br> tags can be achieved using block-level elements such as <div> or <p> combined with CSS properties like display: block; or display: inline-block; and others. These elements naturally wrap text or content, facilitating clean and structured layout d
2 min read
Set the size of background image using CSS ? Setting the size of a background image using CSS allows you to control how the image fits within an element. By using the background-size property, you can specify the width and height, ensuring the image scales appropriately for responsive design. Syntax: background-size: width height;Note: If the
2 min read
What is Greater-than Sign (>) Selector in CSS? In CSS, the greater than sign (>) is known as the child combinator selector. It is used to style elements that have a specific parent. Unlike other selectors, it only targets direct children of an element, meaning it only looks one level down in the HTML structure.How the Child Combinator Selecto
2 min read
How to Select all Child Elements Recursively using CSS? Here are three methods to achieve to Select all Child Elements Recursively using CSS:1. Using the Universal Selector (*)The universal selector applies styles to all child elements within a parent recursively.HTML<html> <head> <style> .parent * { color: blue; font-weight: bold; }
3 min read
How to style a checkbox using CSS ? Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo
3 min read
CSS word-break vs word-wrap (Overflow Wrap) : What's the Difference ? In CSS, controlling how long words break at line endings is crucial for clean layouts and good readability. Two properties often confused are word-break and overflow-wrap also known as word-wrap. This guide compares how they handle text overflow and when to use each.word-break Vs. word-wrapPropertyw
3 min read
How to make div height expand with its content using CSS? When designing a webpage, it's important to make sure a div adjusts its height based on the content inside it. This is key to creating a flexible and responsive layout, especially when the content changes or is unpredictable. Using CSS, you can easily make a div adapt to different content sizes. One
3 min read