How To change attribute in html elements in asp.net - asp.net

Question

this is my asp codes in my page
<asp:GridView BorderStyle="None" BorderColor="White" BorderWidth="0px" CellPadding="0" AlternatingRowStyle-BackColor="" ID="grdProducts" Width="100%" runat="server" AutoGenerateColumns="False" ShowHeader="False" AllowPaging="True" DataSourceID="sqldsProducts">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<!--begin col-lg-6 col-md-6 -->
<li class="list_item col-lg-12 col-md-12 portfolio">
<div class="recent-item">
<figure class="portfolio_1">
<div class="bwWrapper touching medium">
<asp:Image ID="Image1" ImageUrl='<%# Eval("PImg") %>' runat="server" />
</i>
</div>
<figcaption class="item-description">
<h5 id="PTitle"><%# Eval("PTitle") %></h5>
<p id="PDesc"><%# Eval("PDesc") %></p>
<div class="go_link">
Read More
</div>
</figcaption>
</figure>
</div>
</li>
<!--end col-lg-6 col-md-6 -->
<div style="height:20px;"></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<pagerstyle cssclass="pagination" HorizontalAlign="Center" />
</asp:GridView>
for example i want to add some css attributes for this code
h5 id="PTitle"<%# Eval("PTitle") %>/h5 but i dont know how to find this id and add attributes

Answer 1

You can do this using jQuery. Make sure you have jQuery embedded in your page.
Then you can access PTitle element using jQuery selector and assign CSS to it as follows
$( document ).ready(function() {
$("#PTitle").css('background-color','#ff0000');
});
EDIT:
If you have ASPX page
<h5 id="PTitle" runat="server">Test</h5>
Then Code Behind:
PTitle.Style.Add("display", "none");

Answer 2

Depends on when you want to add the Styles. Here are few options.
If you want to add it in design time just add a style attribute as you would for other html elements.
<h5 id="PTitle" style="font-size:12px"><%# Eval("PTitle") %></h5>
If you want to do it from code behind (server side) you need to add the runat="server" attribute to the element first. In this case you won't add the style attribute in design time.
<h5 id="PTitle" runat="server"><%# Eval("PTitle") %></h5>
Then you can access this control in code behind using it's id as follows.
for (int i = 0; i < grdProducts.Rows.Count; i++)
{
HtmlGenericControl PTitle = (HtmlGenericControl)grdProducts.Rows[i].FindControl("PTitle");
if (PTitle != null)
{
PTitle.Style.Add("font-size", "12px");
}
}
Or, you could use the Attributes property as follows.
for (int i = 0; i < grdProducts.Rows.Count; i++)
{
HtmlGenericControl PTitle = (HtmlGenericControl)grdProducts.Rows[i].FindControl("PTitle");
if (PTitle != null)
{
PTitle.Attributes.Add("style", "font-size:12px");
}
}
If you need to do this in client side make use you JavaScript/ JQuery.

Answer 3

Okay here's all I needed to solve my problem:
LiteralControl litc=new LiteralControl();
litc.Text = "<style type='text/css'> #PTitle{text-align:right} #PDesc{text-align:right} </style>";
this.Page.Header.Controls.Add(litc);