Reputation: 143
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
Reputation: 1
@import "navigation.css"; /* Using a string */
or
@import url("navigation.css"); /* Using a url */
Upvotes: 0
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