How to include one CSS file in another?
Is it possible to include one CSS file in another?
Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using @import keyword.
Example 1:
- HTML section: File name is index.html
<!DOCTYPE html>
<
html
>
<
head
>
<!-- linking css file with html file -->
<
link
rel
=
"stylesheet"
href
=
"style1.css"
>
</
head
>
<
body
>
<
center
>
<
marquee
><
h1
>GeeksforGeeks</
h1
> </
marquee
>
<
div
class
=
"css1"
>GeeksforGeeks: It is a computer science
portal. It is an educational website. Prepare for the
Recruitment drive of product based companies like
Microsoft, Amazon, Adobe etc with a free online placement
preparation course.
</
div
>
</
center
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput: Without using CSS file
- CSS section1: File name is style1.css
<!-- Including one css file into other -->
@import "style2.css";
h1 {
color:green;
}
.css1 {
color:black;
background-image: linear-gradient(to right, #DFF1DF, #11A00C);
position:static;
}
chevron_rightfilter_noneOutput: Using style1.css file without importing the second CSS file (style2.css).
- CSS section2: File name is style2.css
body {
background:black;
opacity: 0.5;
}
chevron_rightfilter_noneOutput:After importing the style2.css file into the style1.css file by using @import keyword.
Note: Many CSS file can be imported using one CSS file.
Example 2:
- HTML Section: File name is Example.html
<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"styl.css"
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks<
h1
>
<
div
include
=
"form-input-select()"
>
<
select
required>
<
option
value
=
""
>Example Placeholder</
option
>
<!-- Available Options -->
<
option
value
=
"1"
>GeeksforGeeks</
option
>
<
option
value
=
"2"
>w3skul</
option
>
<
option
value
=
"3"
>tuitorial point</
option
>
<
option
value
=
"4"
>CodeComunity</
option
>
<
option
value
=
"5"
>Coders</
option
>
</
select
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput: Without using CSS file
- CSS Section1: File name is style1.css
@import "style2.css";
body {
border:black;
justify-content: center;
text-align: center;
}
chevron_rightfilter_noneOutput: Using style1.css file without importing style2.css file.
- CSS Section2: File name is style2.css
h1 {
color:green;
text-decoration: underline overline;;
}
chevron_rightfilter_noneOutput:After using both CSS file (style1 and style2).
Note: There are two different ways to import a CSS file into another using @import url(“style2.css”); or @import “style2.css”; or directly import any CSS file or multiple CSS file in the HTML file directly within <style>@import “style1.css”; or .@import url(“style2.css”);</stlye> in head section.
Recommended Posts:
- What is the best way to include CSS file? Why use @import?
- PHP | (Include and Require)
- How to include() all PHP files from a directory ?
- JavaScript | WebAPI | File | File.type Property
- JavaScript | WebAPI | File | File.size Property
- JavaScript | WebAPI | File | File.name Property
- How to get file name from a path in PHP?
- PHP | Uploading File
- CSV file management using C++
- robots.txt File
- PHP | Basics of File Handling
- How to log errors and warnings into a file in php?
- Perl | File Locking
- HTML | File Paths
- File Allocation Methods
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.