c# - Getting dynamically added labels to look like tags -

what i'd have similar on main page:

so, did add code:

c# code-behind:

    protected void loadinterests()     {          //fill interests based on table values         string strsql2 = "select um.matchvalue, dd.ddlvalue tmpusermatch um ";         strsql2 = strsql2 + "inner join (select storedvalue, ddlvalue tmpdropdowns ddlname = 'ddlinterests') dd ";         strsql2 = strsql2 + "on um.matchvalue = dd.storedvalue ";         strsql2 = strsql2 + "where matchfield = 'matchinterests'  , userid = '" + lbluserid.text + "'";         using (var con = new sqlconnection(strcon1))         using (var adapter2 = new sqldataadapter(strsql2, con))         {             datatable dt2 = new datatable();             adapter2.fill(dt2);             foreach (datarow row in dt2.rows)             {                 label dynamiclabel = new label();                 dynamiclabel.id = "lbl" + row["ddlvalue"].tostring();                 dynamiclabel.text = row["ddlvalue"].tostring();                 dynamiclabel.cssclass = "lbl.interests";                 div1.controls.add(dynamiclabel);             }         }     } 

asp.net:

    <div>         <asp:panel id="panel1" runat="server" height="100px" scrollbars="vertical" style="float: left; margin-left: 1px; background-color:#f5f5f5" width="807px" bordercolor="lightsteelblue" borderstyle="solid" borderwidth="1px">             <div id="div1" runat="server" class="clear" style="width:820px; border-width:1px; margin-left:20px"></div>         </asp:panel>     </div> 

css:

lbl.interests {     background-color: #465c71;     /*    background-color: white;    */     border: 1px #4e667d solid;       color: white;     display: block;     line-height: 1.35em;     padding: 4px 20px;     text-decoration: none;     white-space: nowrap; } 

the end result still this:

when want this:

any ideas on i'm going wrong?

change line

dynamiclabel.cssclass = "lbl.interests";   

to

dynamiclabel.cssclass = "lbl interests";       

and change css selector

.lbl.interests

remember . used selecting class name in css, not present in html, if specify name in css lbl referring tag in html invalid tag according html , match code.

my suggestion first write plain html , css , confirm layout working expected, generate html c#/asp.net

refer below link on css selectors
w3schools - css selectors