blog

Home / DeveloperSection / Blogs / CSS Class

CSS Class

Sumit Kesarwani 3746 29-May-2013

In this blog, I’m trying to explain the css class property and how to implement in your web pages.

 CSS Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Webpages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML.

CSS helps Web developers create a uniform look across several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document. Once the style is defined in cascading style sheet, it can be used by any page that references the CSS file. Plus, CSS makes it easy to change styles across several pages at once. For example, a Web developer may want to increase the default text size from 10pt to 12pt for fifty pages of a Web site. If the pages all reference the same style sheet, the text size only needs to be changed on the style sheet and all the pages will show the larger text.

While CSS is great for creating text styles, it is helpful for formatting other aspects of Web page layout as well. For example, CSS can be used to define the cell padding of table cells, the style, thickness, and color of a table's border, and the padding around images or other objects. CSS gives Web developers more exact control over how Web pages will look than HTML does. This is why most Web pages today incorporate cascading style sheets.

Example

 CSS Class

<form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <asp:Label ID="lblName" runat="server" Text="Enter Name :"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
                </td>
            </tr>
            <tr>
                <td>
                   <asp:Label ID="lbl2" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </div>
    </form>

 Type the following code in .aspx.cs file

using System;
namespace CSSClassWebApplication
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            lbl2.Text = "Your Name Is : " + txt1.Text;
            txt1.Text = "";
        }
    }
}

StyleSheet1.css

body, input
{
    font: 12pt verdana;
    font-weight: 700;
    color: orange;
}

 

In this example, I’ve used CSS Class property to format the font and color of the controls. I’ve created TestStyle css in the <script> tag and set the values of font, font-weight and color and used it in all controls.


Updated 18-Sep-2014

Leave Comment

Comments

Liked By