CSS to webcontrols

[neilmcguigan]

you can apply a style to an element type, class or id like this:

input
{
font-family:Tahoma;
}

this would apply the Tahoma font to all "<input..." elements

..MyClass
{
font-size:70%;
}

this would apply a font-size of 70% to all html elements with
class="MyClass" attribute

#MyId
{
margin:0px;
}

this would apply a margin of 0px to all elements with id="MyId"
attribute

you can also nest styles, like this:

#MyTable th
{
font-weight:bold;
}

this would apply a bold font to all "<th>" elements for the item with
id="MyTable"

HTH

Neil

 

[Roger Moore]

Hi all,

I have a beginner's question:

If webcontrols are rendered to suit different browsers using different HTML
syntax for each, how can I create a unified CSS stylesheet to them (using
the cssStyle attribute).

What I say is that I need to know which HTML tag i'm applying the style to,
in order to know which CSS styles are relevant to it.

Thanks in advance,
Roger.

 

[Michel de Becdelièvre]

Hi all,

I have a beginner's question:

If webcontrols are rendered to suit different browsers using different
HTML syntax for each, how can I create a unified CSS stylesheet to them
(using the cssStyle attribute).

What I say is that I need to know which HTML tag i'm applying the style
to, in order to know which CSS styles are relevant to it.

Simple : you avoid System.Web.UI.WebControls.* (you only use real value
added cases such as repeater, datagrid, etc.), you use :
System.Web.UI.HtmlControls.* . This also gives you a good chance of
achieving Firefox compatibility (once you have updated your browsercaps).

 

[Mr Newbie]

Example.

<style type="text/css">
<!--
INPUT {
background-color: #99ccff;
color: black;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 12pt
}

TEXTAREA {
background-color: navy;
border: black 2px solid;
color: white;
font-family: arial, verdana, ms sans serif;
font-size: 12pt;
font-weight: normal
}

..altButtonFormat {
background-color: #c0c0c0;
font-family: verdana;
border: #000000 1px solid;
font-size: 12px;
color: #778899
}

..altTextField {
background-color: #ececec;
font-family: verdana;
font-size: 12pt;
color: #09c09c
}

..radioStyle {
background-color: #FF0000;
border: #000000 solid 1px;
font-family: verdana;
font-size: 12px;
color: #000000
}
-->

 

[Roger Moore]

Thanks for answering, but I'm afraid you didn't understand my question:
ASP.NET renders webcontrols as different HTML tags for different HTML
versions, browsers etc. so when I apply a cssStyle to an ASP.NET webcontrol
I don't know if I'm actually applying it to INPUT, TEXTAREA or whatever HTML
tag ASP.NET chooses to use for my <asp:textbox/> (I take this tag only as an
example - other tags may use a broad variety of other interchanging HTML
tags) control.

I hope I made myself clear this time.. thanks again..

 

[Roger Moore]

Thanks Michael,

I understand you recommend using repeater - that's was my default, but I
really do want to use some of the more complex .NET webcontrols.
You've mentioned datagrid: how do I know which set of HTML tags are involved
when .NET renders this tag (on all browsers that is)?.. it's easy to assume
it only uses table tags (TD, TR, TBODY etc) - but how can I make sure that,
for exampe, it won't stick a SPAN to one of the TDs?

Thanks,
Roger.

 

[Scott Allen]

If webcontrols are rendered to suit different browsers using different HTML
syntax for each, how can I create a unified CSS stylesheet to them (using
the cssStyle attribute).

This is a tough question to answer. On one hand it's nice to work with
server controls because they present a higher level of abstraction.
Someday we will think of HTML as a primitive assembly language for the
web.

In 2.0 we have skin files, which are a server-side type of stylesheet,
but as I'm sure someone will point out, not a standard. Nevertheless,
they make it easy to manage and style the complex server side controls
like DataViews and Calendars.

I've written a bit about Themes and Skins here:

http://www.odetocode.com/Articles/423.aspx
http://odetocode.com/Blogs/scott/archive/2005/09/01/2144.aspx

 

[Roger Moore]

Thanks,

But since I'm using 1.1, it's back to "good old HTML" for me when creating
user controls..
Fortunately enough, I am not really required for one of the datagrid (etc.)
fancy functionalities in my app.