ASP.NET – CSS, Themes and Skins

Standard
 

Cascading style sheet uses to bring the uniformity in the style, look and feel of the web pages. Once create the style sheet just drag and drop this into the web page you want to apply it. IDE will create link for the style sheet between the <Header></Header> tag just like <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

<HTML>

<HEAD>

<title>ArchiveMaintenance</title>

<meta content="JavaScript" name="vs_defaultClientScript">

————-

————-

<LINK href="Styles.css" type="text/css" rel="stylesheet">

</HEAD>

—————

—————

</HTML>

Using ‘CssClass’ property of the server control to apply style to it. For example: Apply the style sheet class to the label control just below

<asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 104px; POSITION: absolute; TOP: 128px" runat="server" CssClass="DescriptionLabel">Number of Months to Maintain :</asp:Label>

 

Theme is a enhanced technologies to maintain the styles across the site. To create ‘Theme’ select add skin file using ‘Add New Item’ ->

Select skin file. Skin file will be created within the theme folder.

 

  1. Using web.config configuration file to declare ‘theme’

<configuration>

<system.web>

<pages theme ="defautTheme"/>

……

……

</system.web>

</configuration>

  1. Enable or disable and assign theme using page directive.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="SkinFile" EnableTheming="false" %>

  1. Enable or disable theme and assign the skinId using control property.

<asp:DropDownList ID="DropDownList1" runat="server" SkinID="DropDownSkin" EnableTheming="False"></asp:DropDownList>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s