Embedding css file in custom Webpart in Sharepoint

This article will show us how to use the Datalist in a webpart and embedding CSS file and classes in the webpart.

First we are creating the webpart. For that follow the below steps

1. Create a webpart solution
2. Create a child controls and add the related code in webpart cs file like below
   
       DataList dlNews;
       Label lblNewsTitle;

       protected override void CreateChildControls()
       {
           // Create and add the controls that compose the
           // user interface of the Web Part.
           Controls.Clear();

           dlNews = new DataList();

           //CSS link calling as object
           Microsoft.SharePoint.WebControls.CssLink cssLink = new Microsoft.SharePoint.WebControls.CssLink();
           cssLink.DefaultUrl = "/_layouts/1033/styles/News.css";
           this.Page.Header.Controls.Add(cssLink);
           // Create  the Datatable
           DataTable dtItem = new DataTable();
           // send the Data items from this datatable
           //News Datalist view
           fillResultsDatalist(dtItem);
    
       }
       private void fillResultsDatalist(DataTable dtItem)
       {
           // Create an instance of the DataGrid and set its
           // DataSource property to the supplied DataSet.
           dlNews = new DataList();
           dlNews.DataSource = dtItem;
           dlNews.CellPadding = 0;
           dlNews.CellSpacing = 0;
           dlNews.BorderWidth = 0;
           dlNews.RepeatDirection = RepeatDirection.Vertical;
           // Calling the Itemplete for data list bound columns           
           dlNews.ItemTemplate = new DatalistLabelColumn();
           // Bind the data to the DataGrid.
           dlNews.DataBind();
           //Add the DataGrid to the controls.
           Controls.Add(dlNews);
       }
    

3. Add/Create the the ITemplate class

        /// <summary>
       /// Intialize the Container controls
       /// </summary>
       /// <param name="container"></param>
       public void InstantiateIn(Control container)
       {
           Label lblNewsTitle = new Label();
           lblNewsTitle.DataBinding += new EventHandler(this.BindLabelColumn);
           container.Controls.Add(lblNewsTitle);

           Label lblNewsText = new Label();

           lblNewsText.DataBinding += new EventHandler(this.BindLabelColumn1);
           container.Controls.Add(lblNewsText);

           LinkButton lnkButton = new LinkButton();
           lnkButton.DataBinding += new EventHandler(this.BindLabelColumn2);
           container.Controls.Add(lnkButton);
       }
       /// <summary>
       /// BindLabelColumn for Title of the News
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       public void BindLabelColumn(object sender, EventArgs e)
       {
           Label lblTitle = (Label)sender;
           DataListItem container = (DataListItem)lblTitle.NamingContainer;
           String strVals = Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, "Titre"));
           lblTitle.Text = "<div class='HomeNewsTitle'>> " + strVals + "</div>";
       }
       /// <summary>
       /// BindLabelColumn1 for news Description label
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       public void BindLabelColumn1(object sender, EventArgs e)
       {
           Label lblText = (Label)sender;
           DataListItem container = (DataListItem)lblText.NamingContainer;
           String strVals = Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, "Text"));
           strVals = Regex.Replace(strVals, @"<(.|\n)*?>", string.Empty);
           strVals = RetComments(strVals);
           lblText.Text = "<div class='HomeNewsSubTitle'>" + strVals + "</div>";

       }
       /// <summary>
       /// BindLabelColumn2 for Link button
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       public void BindLabelColumn2(object sender, EventArgs e)
       {
           LinkButton lnkButton = (LinkButton)sender;
           DataListItem container = (DataListItem)lnkButton.NamingContainer;
           String strVals = Convert.ToString(DataBinder.Eval(((DataListItem)container).DataItem, "Link"));
           lnkButton.Text = @"<div class='HomeNewsLink'> "
               + "<u style='cursor:hand;'>> Plus d'info<u>"
               + "</div><div class='HomeNewsLink1'></div>";
           lnkButton.PostBackUrl = strVals;
       }
       /// <summary>
       /// Substring the text upto 60 characters
       /// </summary>
       /// <param name="strCompanyName"></param>
       /// <returns></returns>
       public string RetComments(string strCompanyName)
       {
           string sComments = string.Empty;
           if (strCompanyName.Length > 50)
           {
               sComments = strCompanyName.Substring(0, 50).Trim() + "...";
           }
           else if (strCompanyName.Length == 0)
           {
               sComments = "--";
           }
           else
           {
               sComments = strCompanyName;
           }
           return sComments;
       }
    

4. Create the CSS page News.css. 
   
   .HomeNewsTitle,.HomeNewsSubTitle,.HomeNewsLink,.HomeSeperator,.HomeNewsTitle2,.HomeNewsLink1,.HomeNewsLink2{
   font-family: Trebuchet MS;
   position: relative;
   float: left;
   left: 0px;
   width: 172px;
   }
   .HomeNewsTitle,.HomeNewsTitle2{
   color: #0099cc;
   font-size: 13px;
   }
   .HomeNewsTitle2{
   top:4px;
   }
   .HomeNewsSubTitle{
   color: #333333;
   font-size: 12px;
   line-height:15px;
   }
   .HomeNewsLink,.HomeNewsLink1,.HomeNewsLink2{
   color: #0099cc;
   font-size: 11px;
   text-decoration:underline;
   text-align:right;
   padding-bottom:1px;
   }
   .HomeNewsLink1{
   padding-bottom:10px;
   }
   .HomeNewsLink2{
   bottom:5px;
   }
    
5. Add/Place the CSS file in to below folder
       C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
   
6. you have to call the Default URL of the CSS file path like "/_layouts/1033/styles/News.css";

Now you can able to use embedded CSS classes and datalist in webpart.

I hope this will be useful for sharepoint developers.

Enjoy!