title: Shouldn’t GridView’s RowStyle-HorizontalAlign property overwrite CSS’s text-align property?
body: <p>a) As far as I know, <code>GridView’s RowStyle-HorizontalAlign</code> property should overwrite CSS’s <code>text-align</code> property, and thus text inside GridView's cells should be located on the left side of the cells, but is instead moved to the right side. Why is that?</p>
  
  <p>b) Similarly, <code>RowStyle-Font-Bold</code> should overwrite CSS’s <code>font-weight</code> property and thus fonts shouldn’t be in bold. But again, CSS’s property overwrites <code>RowStyle’s Font-Bold</code> property. Why? </p>
  
  <pre><code>&lt;div id="someClass"&gt;            
        &lt;asp:GridView ID="gvwShowUsers"  runat="server" &gt;
            &lt;RowStyle BackColor="#FFFBD6" ForeColor="#333333" Font-Bold="false" 
                 HorizontalAlign="Left" /&gt;
            &lt;Columns&gt;
               &lt;asp:BoundField DataField="UserName" HeaderText="UserName"  /&gt;
            &lt;/Columns&gt;
        &lt;/asp:GridView&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS file:</p>
  
  <pre><code>#someClass td
  {
    font-weight:bolder;
    text-align:right;
  }
  </code></pre>
  
  <p>thanx</p>
  
  <p><br></p>
  
  <p>EDIT:</p>
  
  <blockquote>
    <p>A workaround would be to apply the style to each field instead (e.g. ItemStyle-HorizontalAlign)</p>
  </blockquote>
  
  <p>I tried with applying <code>ItemStyle</code> to <code>GridView’s</code> field:</p>
  
  <pre><code>   &lt;div id="someClass"&gt;            
        &lt;asp:GridView ID="gvwShowUsers"  runat="server" &gt;
           &lt;RowStyle Font-Bold="false" HorizontalAlign="Left" /&gt;
            &lt;Columns&gt;
               &lt;asp:BoundField DataField="UserName" HeaderText="UserName"&gt;
                  &lt;ItemStyle HorizontalAlign="Left" Font-Bold="false" /&gt;
               &lt;/asp:BoundField&gt;
            &lt;/Columns&gt;
        &lt;/asp:GridView&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>But since even after applying <code>ItemStyle</code> the page still displayed text on the right side of the cells, I've decided to check the source code of a html page sent to the user, and as it turns out both <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> elements have <code>Align</code> property set to <code>left</code>, so...totally confused!</p>
  
  <p>Here is the source code of a html page:</p>
  
  <pre><code>&lt;table id="GridView1" style="font-weight:normal;"&gt;
     &lt;tr align="center" style=" font-weight:bold;"&gt;
         &lt;th scope="col"&gt;UserName&lt;/th&gt;
     &lt;/tr&gt;
         &lt;tr align="right" valign="bottom" style="font-weight:normal;"&gt;
         &lt;td align="right" style="font-weight:normal;"&gt; Nancy&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>