referring the css files for webpages inside Netbeans IDE

If you are dealing with CSS (Cascading Style Sheet) files for the web pages inside Netbeans IDE, you need to know one thing.

It does not pick up the .css files as referred in the files which has the link to it. Generally, all other IDEs and Application Servers should work that way. But when i had been doing a J2EE based web application, i found that aspect missing. When i tested, the pages were displayed as if the css files were not present at all.

Though i tried by placing the css file in a different location  by thinking that whethere the relative path given by me would have got some mistakes, there was no luck still. Then i got a doubt and referred the Help section of the IDE itself. You got to do a different work around for your css files to have effect.

Actually, the Netbeans IDE places (keeps its own references to) the css files in a separate location which is totally far away from your application’s root folder. You have to get that location and put it in the files whichever need the css links (in case of .html, .jsp files).

Steps to do that:

1. Select the particular .css file and Right click on it.

2. Click on either the ‘Copy XML Style’ or ‘Copy HTML Style’ based on the file types where you gonna link this .css file.It will copy the location of this .css file from the Netbean’s perspective into the Clipboard.

3. Now paste the copied text (actual reference to the .css file) in the appropriate place of the files needing this .css file.

In case of .html file, it would be in the ‘href’ attribute of ‘<link>’ element placed inside the ‘<head>’ element. In case of .xml files, place the reference after the XML prologue or header.

Really don’t know whether its purely based on the Netbeans IDE or the internally built-in Tomcat has some contribution towards this! Is this a bug in Netbeans? Yet to find out that🙂

But somehow found this to get the css effects on pages with an overhead towards portability! If at all, i need to take the .war file and place it normal Tomcat itself, i may need to change the reference to the .css files referred everywhere right. Just to avoid that , i have made one common .jsp file where i have put this .css reference in <link> element and included this .jsp file in all the other .jsp files through include directive!

25 comments so far

  1. Nahfees on

    thank you very much…i was stuck in same mess. finally after 8 hours or so i found your page.

    Thanks alot

  2. raghs on

    @Nahfees,

    Welcome here🙂

    Glad that this post helped you and the purpose of the blog got saved🙂. My pleasure!!

  3. ShounBoy on

    Hey thanks a lot !!
    This is exactly what I was looking for !!

    Actually this link is a local reference on my PC I guess. Will it work if I deploy my war file in some other PC.

    What do you think will happen ??

  4. raghs on

    @ShounBoy,
    My pleasure🙂 Of course i also suffered a lot with this initially thats why blogged it so that it could help the fellow buddies. Feeling happy that its purposed get saved!

    No. It may or may not work. It depends on how the hostname, workspace names are in both machines. if they both match and you keep the hostname as localhost instead of the actual host name, it will work🙂. I have experienced the same already🙂

    Feel free to ask for any further doubts. Thank you for dropping by!:)

  5. sj on

    Hi,

    I am facing the same problem..From where do I get the ‘Copy XML Style’? I cant find such an option when I right click my .css

    Thanx in Advance.

  6. raghs on

    @sj,

    welcome here🙂. It should be with the same menu option only as that of ‘Copy HTML’ option.

    let me know which version of netbeans you use.

    thanks for dropping by🙂

  7. busola on

    i ve d same problem but when i right-click on the css file, i don’t see that option. im using netbeans 6.0.1

  8. Ben on

    Same problem that sj and busola, with netbeans 6.1

  9. leo on

    right click on the text window with the css file opened… and click copy html/xml code… paste.. voila.

  10. raghs on

    @Ben, @leo, @busola,

    Sorry for the delayed reply. Shall get back to you a little later.

  11. Paul on

    You could always just place the css files under the resources directory and then they’d be picked up automatically by your jsps

  12. Antoine on

    I’m using netbeans 6.5 and i don’t see this option

  13. vishwadhar on

    Download the netbeans.css from net and put it in the application Web Pages folder in the Net beans IDE.
    it working
    thanks for your useful steps given above

  14. hitesh on

    hey when i m clicking on copy HTML style then where can i get the clipboard from it i can copy the reference of my.css file

  15. Evangelina on

    Great Solution, I hope they serve.

    /*to include a copy to archive*/

  16. prachi on

    still its not working in my application….. i m not able to apply my css in application….

  17. Shana on

    Thanks for this tip. I copied and pasted. However it’s still not picking up my css file. It’s strange because there used to be no problem, now it’s not finding it. Any ideas?

  18. ria on

    how to create a css file in netbeans ????

  19. Alexandra on

    I know this if off topic but I’m looking into starting my own blog and was wondering what all is required to get setup? I’m assuming having a blog like
    yours would cost a pretty penny? I’m not very web savvy so I’m not 100% sure. Any tips or advice would be greatly appreciated. Appreciate it

  20. Yadab Raj Ojha on

    Guys, I found found simple solution after suffered with the same problem!. Just add ../ before your resource folder path as below:

  21. Yadab Raj Ojha on


  22. Hajo on

    Hello, when i right click on the css file in netbeans i do not see the option to “copy HTML style”. Is there anyway i can get the location. What am i doing wrong?

  23. bhoomi on

    heyy.. plz give me some step how to add css file in jsp page in netbeans..its urgent..

  24. Bharti on

    Thank you! It helped!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: