Solved

Combine CSS

Posted on 2011-09-29
5
195 Views
Last Modified: 2012-05-12
I have a website that uses 5 different CSS files.  There are many reasons for this.

Is there a way to combine them all into one link?  I dont/cant put all the styles into one CSS but in the head I would like to link one file and then that one file have all 5 of the style sheets in it.

How do I do this correctly?
0
Comment
Question by:rgranlund
5 Comments
 
LVL 15

Accepted Solution

by:
Eyal earned 500 total points
ID: 36817714
@import url("base.css");
0
 
LVL 7

Author Comment

by:rgranlund
ID: 36817733
@Eyal... then how do I write the base css?

@importurl(css-1.css);
@importurl(css-2.css);
@importurl(css-3.css);
@importurl(css-4.css);

is that correct?
0
 
LVL 15

Expert Comment

by:Eyal
ID: 36817748
yes, but pay attention the browser will download 5 files and not 1 but in your html it will include only the base css
0
 
LVL 10

Expert Comment

by:jtwcs
ID: 36817802
Eyal is correct but you also need to have the @import calls first in the main css file.  Meaning, they must come before any other declarations.

http://www.w3.org/TR/CSS2/cascade.html#at-import
0
 

Expert Comment

by:anandblitz
ID: 36890176
Try this:


<target name="css" description="Concatenate CSS source files">
    <loadtasks assembly="${NAntContrib}\NAnt.Contrib.Tasks.dll" />
    <echo message="Building ${BuildDir}\${CssFileLocation}\style.css" />
    <concat destfile="${BuildDir}\${CssFileLocation}\style.css" append="true">
      <fileset>
        <include name="${BuildDir}\${CssFileLocation}\*.css" />
        <exclude name ="${BuildDir}\${CssFileLocation}\default.css"/>
      </fileset>
    </concat>
    <echo message="${BuildDir}\${CssFileLocation}\style.css built." />
    <echo message="delete other files except style.css" />
    <delete>
      <fileset>
        <include name="${BuildDir}\${CssFileLocation}\*.css"/>
        <exclude name="${BuildDir}\${CssFileLocation}\style.css"/>
        <exclude name ="${BuildDir}\${CssFileLocation}\default.css"/>
      </fileset>
    </delete>
    <echo message="delete other files except style.css is done" />
  </target>
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
HTML5 frame 5 25
AdminLTE with wordpress 15 61
flex div overflows its container 4 21
Expand HTML tables without having to click on it 16 44
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question