How would I import multiple css files into a html page using only one css

Question

Basiclly, I have this html page. (just put the head part in)

<head>
 <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- TITLE -->
<title>Page Title</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Grid CSS & Content -->

<!-- Personal CSS -->
<link href="css/flatcolor.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Dosis:200,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
</head>

What I would like to do, is combine my personal CSS files into one large css file. Example of What I would like to see.

<head>
     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- TITLE -->
    <title>Page Title</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Grid CSS & Content -->

    <!-- Personal CSS -->
    <link href="css/importall.css" rel="stylesheet">
    </head>

I would want the importall.css file have the info to load all of the other css files within the project (it would be noted within the css file which ones I want imported). Any Help?

w3.org/TR/CSS21/cascade.html#at-import

Quentin
– Quentin

2014-04-20 23:11:27 +00:00
Commented Apr 20, 2014 at 23:11 — Quentin
– Quentin, Commented Apr 20, 2014 at 23:11
use a comma mark after each css url

Dev Man
– Dev Man

2014-04-20 23:14:31 +00:00
Commented Apr 20, 2014 at 23:14 — Dev Man
– Dev Man, Commented Apr 20, 2014 at 23:14

adaam · Accepted Answer · 2014-04-20 23:12:03Z

5

Use a global.css document to import them all

i.e. Create a new CSS file entitled 'global.css' or something like that and add all of the import statements to the other CSS files:

@import url('typography.css');
@import url('layout.css');
@import url('color.css');

And then you would reference that in your HTML document..

answered Apr 20, 2014 at 23:12

adaam

3,7268 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vidar S. Ramdal · Accepted Answer · 2023-05-09 13:18:28Z

0

Example Code Reference

@import "navigation.css"; /* Using a string */

or

@import url("navigation.css"); /* Using a url */

edited May 9, 2023 at 13:18

Vidar S. Ramdal

1,2721 gold badge15 silver badges40 bronze badges

answered May 8, 2023 at 13:56

majid soleimani

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How would I import multiple css files into a html page using only one css

2 Answers 2

Comments

Example Code Reference

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related