.txt or .searchbox in CSS?

[madHatter1]

Hello

I am using a form for visitors to complete. What they complete (email address, etc) goes into a traditional guestbook.

I am unsure whether to use:

<style>
.txt {
border: 1px solid #87CEFA;
font-family: verdana,arial,helvetica;
font-size: 8pt;
color: #ffffff;
background: #000000;
font-weight: medium;
}
</style>

or:

<style>
.searchbox {
border:solid 1px #87CEFA;
font-family: verdana,arial,helvetica;
font-size: 8pt;
background-color: black;
color: #ffffff;
font-weight: medium;
}

</style>

What is best and what is the difference, please?

Thanks

Hatter

 

[MrBelfry]

There doesn't look like any difference to me! The only difference is that in .txt you given a hex value for the colour (#000000) but in .searchbox you've named it but both are still black.

MrBelfry

 

[Vragabond]

I'm as baffled as MrBelfry but I think I know where this is going. What you are defining in your <style> are classes, that can later be applied to any tag by adding class=&quot;<classname>&quot; attribute to it. Therefore it does not matter how you would like to call the classes (the example you gave is just a different name for the same class). So that means you will be using your styles like this:

<input type=&quot;...&quot; class=&quot;txt&quot; ... /> or
<input type=&quot;...&quot; class=&quot;searchbox&quot; ... />

And since both styles have the same attributes using any of them will give the same result.

You can define styles in other ways as well. For example:
<style>
input {...}
</style>
would mean every input box will look the way you specify it.

Another example is this:
<style>
#blue {...}
</style>
This will affect the id property in a tag. For example you could create a class, but want to change just one thing in that class. Instead of writing a new class, you create a separate style for id, which will change the desired values. Use it like this: <input type=&quot;...&quot; class=&quot;<classname>&quot; id=&quot;<idname>&quot; ... />

Of course, every type of combination is allowed:
a.class = the class will only work in a <a> tag
a.class#id = id will only work in a <a> tag with this class
a.class#id span = style will affect all <span> tags that are inside <a> tag that has this class and this id

Well, I guess I just wrote some boring stuff about CSS styles in general, but I hope something you found helpful.

 

[Vragabond]

Oh, since you seem to want to alter the appearance of input boxes etc. you should be warned that Netscape 4 did not support those, thus showing some funny squares around your boxes. I know this is not a popular browser anymore, but you can easily avoid this problem by making an external stylesheet that is available only to newer browsers. You do it like this:

<style type=&quot;text/css&quot;>
<!--
@import url(your_css_for_forms.css);
//-->
</style>

 

[madHatter1]

Hello

Many thanks for your three informative replies!

For the sake of consistency throughout the site I have changed some of the pages' properties and used the .txt value.

Vragabonb's comments are especially useful, especially those in the longer message, and I have saved the Tek-Tips page for future reference.

I am not too sure, though, what you mean by:

<style type=&quot;text/css&quot;>
<!--
@import url(your_css_for_forms.css);
//-->
</style>

I've never seen: @import url;

Do you mean that I should have an independent page containing those values for IE4 and higher, but focus in the actual web page html itself on the older browsers?

Many thanks again!

hatter

 

[Vragabond]

It's like this... Older browsers do not support styles for form elements: input boxes, check boxes, submit buttons, etc. Any style you make won't have any effect on this elements. If you choose your button to be red, it will be red in newer browser while it will be without any special formatting in old browsers. That would be ok, but the old browsers will still draw a small red square underneath the button (where they applied your style in error). To get rid of this annoying squares under every form element, you put all the classes of the form elements in a seperate .css file then use the syntax described above:

<link href=&quot;your_style_sheet_without_form_elements.css&quot; rel=&quot;styleSheet&quot; type=&quot;text/css&quot;>
<style type=&quot;text/css&quot;>
<!--
@import url(your_form_element_styles.css);
//-->
</style>

Since @import url is a brand new command that only the newer browsers support they will load the form styles while older browsers will ignore it. Voila, squares on NN4 are gone.