Solved

Combine CSS

Posted on 2011-09-29
5
173 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
Comment Utility
@import url("base.css");
0
 
LVL 7

Author Comment

by:rgranlund
Comment Utility
@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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

728 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now