How can I do this in ASP.NET with CSS?

[m.a]

Hello,

I have several ASP buttons in my pages and I want to control their appetence
using CSS.



The buttons are grouped into 5 types, for example save, cancel, edit ...



I created a CSS file and I defined the style for all of these buttons in it
say:



input.SaveButton

{

background-color:Aqua;

margin:2px;

width:100px;

height:30px;

}

input.CancelButton

{

background-color:Fuchsia;

margin:2px;

width:100px;

height:30px;

}

input.EditButton

{

background-color:Gray;

margin:2px;

width:100px;

height:30px;

}



All of them have defined the value for width and height. I want a way that I
can define the width and height in one place and then all of these buttons
get their width and heights from there. If I define width and height in the
input entry as follow:

input

{

width:100ps;

hieght:50px;

}

Then the size of all inputs changes which I do not want. Is there any way
that I define a base class for all of these classes? a concept similar to
base class and derived class in C# (or C++)



Regards

 

[Göran Andersson]

Hello,

I have several ASP buttons in my pages and I want to control their appetence
using CSS.



The buttons are grouped into 5 types, for example save, cancel, edit ...



I created a CSS file and I defined the style for all of these buttons in it
say:



input.SaveButton

{

background-color:Aqua;

margin:2px;

width:100px;

height:30px;

}

input.CancelButton

{

background-color:Fuchsia;

margin:2px;

width:100px;

height:30px;

}

input.EditButton

{

background-color:Gray;

margin:2px;

width:100px;

height:30px;

}



All of them have defined the value for width and height. I want a way that I
can define the width and height in one place and then all of these buttons
get their width and heights from there. If I define width and height in the
input entry as follow:

input

{

width:100ps;

hieght:50px;

}

Then the size of all inputs changes which I do not want. Is there any way
that I define a base class for all of these classes? a concept similar to
base class and derived class in C# (or C++)



Regards

You can specify the same style for several identifiers:

input.SaveButton, input.CancelButton, input.EditButton {
margin: 2px;
width: 100px;
height: 30px;
}

Or you can specify a separate class for it:

..CommandButton {
margin: 2px;
width: 100px;
height: 30px;
}

For the second alternative, you specify both classes on the button:

<asp:Button id="buttonSave" runat="server" CssClass="CommandButton
SaveButton" />

 

[CSSer]

example:
<input type="button" value="save" id="save" class="abutton" />
<input type="button" value="cancel" id="cancel" class="abutton" />
....
....
....
your css file is:

..abutton { margin:2px; width:100px; height:30px;}
#save {background:#ccc;}
#cancel {background:#ddd;}
....
....


reguards

babee