ASP.NET FAQ - CSS Styles and Themes

The following styles can be applied for drop case the first letter.

.DropCaps:First-Letter
{
font-size:200%;
float:left;
color:blue;
}

This is a example how to set the CSS styles to make the drop case for the first letter.

Css can be declared as below which avoids the repetition in background image.

.background
{
	background-image: url(Pictures//backgroundimage.jpg);	
	background-attachment: fixed; 
	background-repeat: no-repeat;
}

Apply Skin Styles to webcontrols(Textbox,button)

private Style CreateStyle(Color backClr, Color foreClr, int borderWidth, string fntName, int fntSize, bool fntBold, bool fntItalic /*Youcanaddmoreparameters to the method */)
{
	Style s = new Style();
	s.BackColor = backClr;
	s.ForeColor = foreClr;
	s.BorderWidth = borderWidth;
	s.Font.Name = fntName;
	s.Font.Size = fntSize;
	s.Font.Bold = fntBold;
	s.Font.Italic = fntItalic;
	return s;
} 

// This method applies a Style object to a WebControl
private void SetControlStyle(System.Web.UI.WebControls.WebControl ctrl,Style s)
{
	ctrl.ApplyStyle(s);
}

private void Button1_Click(object sender, System.EventArgs e)
{
	Style st = CreateStyle(Color.Green, Color.Yellow, 3,'Verdana', 10, true, true); 
	SetControlStyle(TextBox1, st);
	st = CreateStyle(Color.Red, Color.Black, 2,'Verdana', 12, true, true);
	SetControlStyle(Button1, st); 
}

Pseudo-classes are fictional element types that do not exist in HTML. For eg : by creating fictional types of the A element individual style can be applied to each class The three fictional element types are: A as unvisited link, A as active link and A as visited link. Pseudo-classes can be created by a colon followed by pseudo-class’s name as:

A:link {background: cyan; color: blue}
A:active {background: transparent; color:black}
A:visited {background: cyan; color: red}
Click Here

Pseudo-elements are fictional elements that do not exist in HTML. They address the element’s sub-part. There are 2 types of pseudo-elements as “first-line pseudo-element’ and ’first-letter pseudo-element’. Pseudo-element is created by a colon followed by pseudo-element’s name,e.g:

P:first-line
H1:first-letter

and can be combined with normal classes;

e.g:

P.initial:first-line

The first line of this paragraph will be displayed in uppercase letters

The styles can be changed for the onmouseover and onmouseout events for the TD tags as shown below.

Td.mouseout
{
    background-color: #FAEBD7; 
    BORDER-RIGHT: maroon thick double;
    BORDER-TOP: maroon thick double; 
    BORDER-LEFT: maroon thick double;
    BORDER-BOTTOM: maroon thick double;
    MARGIN: 1px; 
    color: #FFFFFF;
}
 
Td.mouseover
{ 
    background-color: #FFFFFF; 
    color: #000000; 
}
 
 
<table width="100%">
    <tr>
        <td  class="mouseover" onmouseover="className=’mouseout’;" onmouseout="className=’mouseover’;">
             Styles applied for onmouseover & onmouseout
        </td>
    </tr>
</table>

The .Net framework recognizes the capabilities of the latest version of the above browsers poorly. This is because, by default, the BrowserCaps section of the machine.config file (usually found under a folder like ‘C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\CONFIG’) declares the capabilities of the Mozilla based browser poorly. So, you will have to replace the default entry in your install with this one: Mozilla BrowserCaps.

In case the above link didn’t work, this is the content from the above link, captured as of (4/10/2005):

<browserCaps>


		<!-- 
		Name:		BrowserCaps update for modern browsers, http://slingfive.com/pages/code/browserCaps/
		Author:	Rob Eberhardt, http://slingfive.com/
		History:
			2004-11-19	improved detection of Safari, Konqueror & Mozilla variants, added Opera detection
			2003-12-21	updated TagWriter info
			2003-12-03	first published
		-->

			<!-- GECKO Based Browsers (Netscape 6+, Mozilla/Firefox, ...) //-->
			<case match='^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+)(?’VendorProductToken’ (?’type’[^/\d]*)([\d]*)/(?’version’(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*)))?'>
				browser=Gecko
				<filter>
					<case match='(Gecko/[-\d]+)(?’VendorProductToken’ (?’type’[^/\d]*)([\d]*)/(?’version’(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*)))'>
						type=${type}
					</case>
					<case> 
						type=Mozilla
					</case>
				</filter>
				frames=true
				tables=true
				cookies=true
				javascript=true
				javaapplets=true
				ecmascriptversion=1.5
				w3cdomversion=1.0
				css1=true
				css2=true
				xml=true
				tagwriter=System.Web.UI.HtmlTextWriter
				<case match='rv:(?’version’(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*))'>
					version=${version}
					majorversion=0${major}
					minorversion=0${minor}
					<case match='^b' with='${letters}'>
						beta=true
					</case>
				</case>
			</case>

			<!-- AppleWebKit Based Browsers (Safari...) //-->
			<case match='AppleWebKit/(?’version’(?’major’\d?)(?’minor’\d{2})(?’letters’\w*)?)'>
				browser=AppleWebKit
				version=${version}
				majorversion=0${major}
				minorversion=0.${minor}
				frames=true
				tables=true
				cookies=true
				javascript=true
				javaapplets=true
				ecmascriptversion=1.5
				w3cdomversion=1.0
				css1=true
				css2=true
				xml=true
				tagwriter=System.Web.UI.HtmlTextWriter
				<case match='AppleWebKit/(?’version’(?’major’\d)(?’minor’\d+)(?’letters’\w*))(.* )?(?’type’[^/\d]*)/.*( |$)'>
					type=${type}
				</case>
			</case>

			<!-- Konqueror //-->
			<case match='.+[K|k]onqueror/(?’version’(?’major’\d+)(?’minor’(\.[\d])*)(?’letters’[^;]*));\s+(?’platform’[^;\)]*)(;|\))'>
				browser=Konqueror
				version=${version}
				majorversion=0${major}
				minorversion=0${minor}
				platform=${platform}
				type=Konqueror
				frames=true
				tables=true
				cookies=true
				javascript=true
				javaapplets=true
				ecmascriptversion=1.5
				w3cdomversion=1.0
				css1=true
				css2=true
				xml=true
				tagwriter=System.Web.UI.HtmlTextWriter
			</case>

			<!-- Opera //-->
			<case match='Opera[ /](?’version’(?’major’\d+)(?’minor’\.(?’minorint’\d+))(?’letters’\w*))'>
				<filter match='[7-9]' with='${major}'>
					tagwriter=System.Web.UI.HtmlTextWriter
				</filter>
				<filter>
					<case match='7' with='${major}'>
						<filter>
							<case match='[5-9]' with='${minorint}'>
								ecmascriptversion=1.5
							</case>
							<case>
								ecmascriptversion=1.4
							</case>
						</filter>
					</case>
					<case match='[8-9]' with='${major}'>
						ecmascriptversion=1.5
					</case>
				</filter>
			</case>


		</browserCaps>