Setting up multiple form styles on one website

how to I set this up in css?

[Lorel]

I have 3 different sizes and styles of forms on one website, each with different features, however I'm not sure I have set this up correctly being as I have more than one class for some of the items.

I have one called "contact" another for "referrals" and another for "wholesale".

I'm using html5 and css3 and also have this set up for RWD in media queries so it's a lot of coding.

Is there any way to shorten the code?

Here is the one for referrals:


.referrals {width:375px; margin:0 auto; border:1px solid #999; padding:5px;}

.referrals label {
clear:both;
float: left;
height:30px;
text-align: right;
margin-right:5px;
width: 170px; }

.referrals input,
.referrals textarea {float:right; margin-right:30px; padding:5px;
color:999;}

.referrals .comments { clear:both; margin:0px auto; padding:5px; width:95%; }

.referrals input:hover,
.referrals textarea:hover,
.referrals input:focus,
.referrals textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;}
.referrals .submit {display:block; margin:10px auto; }

[not2easy]

If you are looking for a shorter way to group selectors that share a class and variables you would only need to write the class once for any of those. An example is this one:

.referrals input, textarea {float:right; margin-right:30px; padding:5px; color:999;}

the links are a little more complicated but the idea is the same. They can be grouped as:

.referrals input:hover, input:focus, textarea:hover, textarea:focus
{border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;}

Just a note - using pixels with RWD can be a problem because device pixels are not a measurement as they have been traditionally used. If possible convert your measurements to ems or percentages. It can be confusing, but ems are not a measurement either, more like a ratio.

[lucy24]

If you are looking for a shorter way to group selectors that share a class and variables you would only need to write the class once for any of those.

Documentation, please? It runs counter to everything I have ever been taught.

[not2easy]

Sometimes I rely on my own observations and experiences rather than looking things up, my bad, but I have seen this in valid CSS in the past and that really is valid CSS3 according to W3's jigsaw: [jigsaw.w3.org...] (the Validator caught something simple and unrelated I had overlooked:

border-color

should be edited to simply "

border

".)

(CSS level 3)

Value Error : border-color 1px is not a border-color value : 1px solid #C9C9C9

Warnings (2)
URI : TextArea
4 Property -moz-box-shadow is an unknown vendor extension
5 Property -webkit-box-shadow is an unknown vendor extension

Valid CSS information
.referrals input:hover, input:focus, textarea:hover, textarea:focus {
box-shadow : 0 0 8px rgba(0, 0, 0, 0.2);
}

Trying to find the exact documentation takes more time than I had, the closest to it is at [w3.org...]

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.

[lucy24]

It's not about validation. The two forms

p.classname .otherclass, p.classname .secondclass, p.classname .thirdclass

vs.

p.classname otherclass, .secondclass, .thirdclass

are both perfectly valid CSS. But they lead to different results.

If your named "descendant" classes can only, ever, occur inside some "ancestor" class, then there's no need to name the ancestor at all. But I thought the OP was about items that can occur inside any of three different ancestors. In that case you need the double selector at every point.

[not2easy]

You're right, I was looking at this only from the point of a shortcut for the code, but with the same in three forms you can't take that kind of shortcut. Each must be specified.

[Lorel]

Ok, if I "translated" the CSS-speak correctly, I need to specify each form type/ancestor separately.

It would be much easier to maintain but takes up more code.

[lucy24]

Well, maybe CSS4 will allow parentheses ;)

[Lorel]

Thanks for your input folks.