How to include CSS or JS or image file in JSP Liferay?

How to include CSS file in JSP Liferay

 Add this line in liferay-portlet.xml <header-portlet-css>/css/yourcssname.css</header-portlet-css>
                      (or)
 include this line in JSP
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/yourcssname.css"/>

include css in liferay theme(portal_normal.vm) ------>   _diffs/templates/portal_normal.vm
<link href="$css_folder/main.css" rel="stylesheet">


How to include JS file in JSP Liferay

Add this line in liferay-portlet.xml
<footer-portlet-javascript>/js/yourjsnamel.js</footer-portlet-javascript>
                        (or)
include this line in JSP
<script src="<%=request.getContextPath()%>/js/yourjsname.js" ></script>

                       (or)
include js in liferay theme(portal_normal.vm) ------>   _diffs/templates/portal_normal.vm
<script src="$javascript_folder/jquery.min.js"></script>

How to call an image in css:

background: url(../img/closeButton_over.gif) left top no-repeat;

How to call an image from jsp in Liferay

 <img src="<%=request.getContextPath()%>/images/banner_1.jpg"/>

How to change the logo in Liferay Theme(How to cal an image VM file )

Inside templates you have portal_normal VM file.Open that file and change like

<img src="$images_folder/logo/logo.jpg" alt="logo" />

                (OR)

<img src="$themeDisplay.getPathThemeImages()//logo/logo.jpg" width="960" />


Note: Better way is adding  .js files and .css files in liferay-portlet.xml if you are using multiple times in portlet.
If you are using in multiple portlets better to add in theme level in portal_normal.vm