CODEWITHSUNDEEP
htmlcss
CthruME
CthruME

Reputation: 143

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

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?

Upvotes: 3

Views: 2307

Answers (2)

majid soleimani
majid soleimani

Reputation: 1

Example Code Reference

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

or

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

Upvotes: 0

adaam
adaam

Reputation: 3706

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..

Upvotes: 5

Related Questions