Evaluate a Contact Form CSS

I am a total novice to web development, but I am trying to be a WordPress developer and have been actively at it for some weeks now. All self-taught with the world's best tool as my aid: the internet. Anyway, I was hoping that you guys could look at my (no doubt: shoddy) code and tell me what you think I could do to make it better. I made a contact form using the WP plugin Contact Form 7... this is the HTML I used for the form:

  
    [text* Subject akismet:author placeholder "Subject"]
    [email* Email akismet:author_email placeholder "Email"]
    [textarea* Message placeholder "Your Message"]
  
  
    
    
  
  
    [text* FirstName akismet:author placeholder "First Name"]
    [text* LastName akismet:author placeholder "Last Name"]
    [tel* Tel placeholder "Telephone"]
    [submit "Send"]
  

And now for the CSS...

```
/ FORM /

#three-column{
width: 100%;
margin-bottom:75px 0px 0px 0px;
}

#three-column #left{
width: 47%;
float: left;
margin-right:0%;
}

#three-column #center{
margin:0% 2%;
float: left;
}

#three-column #right{
width: 47%;
float: left;
margin-left:0%;
}

#three-column input[type="text"], input[type="email"], input[type="tel"]{
border:none;
border:2px solid #4274A5;
font-size :20px;
border-radius: 5px;
width: 100%;
padding: 18px 3px 18px 10px;
font-family: 'Lovelo Black';
color: #4274A5;
margin-bottom:22px;
height:20px;
}

#three-column textarea {
font-size :20px;
position: relative;
color: #4274A5;
padding: 18px 3px 3px 10px;
border:2px solid #4274A5;
min-width: 100%;
max-width: 100%;
font-family: 'Lovelo Black';
margin-bottom:22px;
min-height:127px;
max-height:127px;
}

#three-column textarea:hover{
-webkit-box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
-moz-box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
}

#three-column #right input[ty

#three-column input[type="text"], input[type="email"], input[type="tel"]


I'm pretty sure should be

#three-column input[type="text"], #three-column input[type="email"], #three-column input[type="tel"]

because your probably mean all inputs in #three-columns. The selectors after the commas don't get the #three-columns from the first one.

On the other hand,

#three-column #left

for a selector is not necessary; just

#left

will do. Because IDs should be unique, there is no way you can have another element on the same page which also has the id left.

Look out with giving things a color without also giving them a background-color. If the user of your webpage has different default settings than you, things like those will become unreadable.

Font-families should always end with a generic font family keyword, so

font-family: 'Lovelo Black';

is not enough. Use something like

font-family: 'Lovelo Black', sans-serif;

for a fallback, otherwise you won't know how the browsers handle a situation where Lovelo Black can't be displayed.

In

body input[type=text].wpcf7-not-valid, body input[type=email].wpcf7-not-valid, body input[type=tel].wpcf7-not-valid, body textarea.wpcf7-not-valid {
    border: 2px solid #ec3c06!important;

is the !important really necessary? If it is, it's good practice to precede the ! with a space, otherwise some older browsers will get confused. But do try to make the CSS work without it.

Also, starting the selector with body is superfluous, because inputs can't reside anywhere but in the body.

body span.wpcf7-not-valid-tip {
    display: block;

Does this absolutely need to be a span? It looks odd to have a span and then to change it into a block with CSS, while you can just as easily use a div and won't have to change it. (Of course, this depends on your HTML situation; you can't insert a div everywhere that you can put a span.)

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

should be sorted so that the unprefixed version is last.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

StackExchange Code Review Q#35335, answer score: 7