o que voces melhorariam nesse css

#clinic-contact {width: 400px;text-align: justify;margin: 20px 0 0 ;float: left;padding: 20px;min-height: 350px;color: #9d9e9e;}
.title {width: 440px; height: 40px;}
h1 { width: 250px; border-bottom: 1px solid #9d9e9e; color: #9d9e9e; line-height:25px; font-size: 16px; }
.highlight { color: #000;}

#staff {padding: 20px;width: 400px;text-align: justify;margin: 20px 0 0 35px;float: left;min-height: 350px; }

.clear {height: 10px;}
.select-staff { float: right; margin-right: 90px; width: 50px; height: 30px; }

.box {height: 125px; border: 1px solid #d4d4d4;}
.picture-staff {float:left; width: 125px; height: 125px; padding: 20px; }
.text-staff { float:left; width: 190px; min-height: 125px; padding: 20px;}

hr {color:#fff; height: 1px; border: 0px; background:#d4d4d4; width: 100%; }
.red {color: red;}
#form_container { min-height: 700px; display: table;}
#form {width:300px; margin: 20px 0 0 ; padding: 20px; min-height: 500px; float: left;}

#form input[type=text], input[type=password], input[type=email] { height:30px; margin:10px 0 0 ; padding: 1px 0px 0px 35px !important; width:250px; background: url('bg-box-user.jpg') no-repeat 10px;}
#form input[type=password] { background: url('bg-box-pass.jpg') no-repeat 10px;}
#form input[type=email] { background: url('bg-box-email.png') no-repeat 10px; border: 1px solid #C9C9C9;}
#form select { height:30px; margin:10px 0 0 ; padding: 1px 0px 0px 35px !important; width:250px; background: url('bg-box-user.jpg') no-repeat 10px;}
#form label {margin:10px 0 0 ;}

#balloons {width: 400px; min-height: 600px;margin: 40px 0 0 ; float: left;}
#manage {padding:20px; float: left; min-height: 200px; width: 300px;}
#manage .box {padding:20px; float: left; border: 1px solid #d4d4d4; min-height: 150px; width: 280px;}

#manage_left {padding:20px; float: left; min-height: 200px; width: 300px;}
#manage_left h1 {float:left; width:200px; margin: 0px; border-bottom: 1px solid #9d9e9e; color: #9d9e9e; line-height:25px; font-size: 16px;}
#manage_left .box {margin:45px 0 0 ; padding:20px; float: left; border: 1px solid #d4d4d4; min-height: 150px; width: 280px;}

1. Abriria as propriedades

antes

seletor {propriedade: valor; propriedade: valor;}

depois

seletor {

 propriedade: valor;
 propriedade: valor;
}

2. Colocaria classes 'genéricas' no topo ou no final, mas agrupadas

.highlight { ... }
.clear {...}

/ resto da folha de estilos /

3. Opinião pessoal, ordenaria as propriedades alfabeticamente

hr {

 background:#d4d4d4;
 border: 0px;
 color:#fff;
 height: 1px;
 width: 100%;
}

4. Ordenaria as declarações na ordem em que elas aparecem na página

body { ... }
header { ... }
#conteudo { ... }
footer { ... }

5. Procuraria classes que descrevessem o conteúdo do elemento, e não sua apresentação visual

Exemplo

.red {color: red;}

Se, porventura, numa troca de leiaute, este elemento tenha que mudar de cor, terá, também, que mudar de classe!

http://www.acordapraweb.com/semantica-no-html-abolicao-da-escravatura/

6. Provavelmente, o que você queria fazer aqui:

#form input[type=text], input[type=password], input[type=email] {...}

era isso aqui:

#form input[type=text], #form input[type=password], #form input[type=email] {...}

Caso eu esteja certo e não hajam checkboxes/radio-buttons, experimente isso:

#form input[type] {..}

ou ainda

#form input {..}

7. Se #balloons se refere a mais de um elemento, então se trata de uma classe. #id deve referenciar um, e apenas um elemento.

8. Abusaria da cascata

Veja a redundância:

.box {border: 1px solid #d4d4d4; height: 125px; }
#manage .box {border: 1px solid #d4d4d4; padding:20px; float: left; min-height: 150px; width: 280px;}
#manage_left .box {border: 1px solid #d4d4d4; padding:20px; float: left; min-height: 150px; width: 280px; margin:45px 0 0;}

Se #manage_left fica dentro de #manage, fica muito fácil

.box {
 border: 1px solid #d4d4d4;
 height: 125px;
}

#manage .box {

 float: left;
 min-height: 150px;
 padding: 20px;
 width: 280px;
}

#manage_left .box {

 margin: 45px 0 0;
}

Caso #manage_left não fique dentro de #manage, a mudança é mínima

.box {
 border: 1px solid #d4d4d4;
 height: 125px;
}

#manage .box, #manage_left .box {

 float: left;
 min-height: 150px;
 padding: 20px;
 width: 280px;
}

#manage_left .box {

 margin: 45px 0 0;
}

valeu evandro no casso o textbox pass e email terao bg diferente por isso o css esta dessa forma faz sentindo?

aqui esta o html olha q pode ser melhorado tb?

obrigado.

https://gist.github.com/4066619

>

#clinic-contact {width: 400px;text-align: justify;margin: 20px 0 0 ;float: left;padding: 20px;min-height: 350px;color: #9d9e9e;}
.title {width: 440px; height: 40px;}
h1 { width: 250px; border-bottom: 1px solid #9d9e9e; color: #9d9e9e; line-height:25px; font-size: 16px; }
.highlight { color: #000;}

#staff {padding: 20px;width: 400px;text-align: justify;margin: 20px 0 0 35px;float: left;min-height: 350px; }

.clear {height: 10px;}
.select-staff { float: right; margin-right: 90px; width: 50px; height: 30px; }

.box {height: 125px; border: 1px solid #d4d4d4;}
.picture-staff {float:left; width: 125px; height: 125px; padding: 20px; }
.text-staff { float:left; width: 190px; min-height: 125px; padding: 20px;}

hr {color:#fff; height: 1px; border: 0px; background:#d4d4d4; width: 100%; }
.red {color: red;}
#form_container { min-height: 700px; display: table;}
#form {width:300px; margin: 20px 0 0 ; padding: 20px; min-height: 500px; float: left;}

#form input[type=text], input[type=password], input[type=email] { height:30px; margin:10px 0 0 ; padding: 1px 0px 0px 35px !important; width:250px; background: url('bg-box-user.jpg') no-repeat 10px;}
#form input[type=password] { background: url('bg-box-pass.jpg') no-repeat 10px;}
#form input[type=email] { background: url('bg-box-email.png') no-repeat 10px; border: 1px solid #C9C9C9;}
#form select { height:30px; margin:10px 0 0 ; padding: 1px 0px 0px 35px !important; width:250px; background: url('bg-box-user.jpg') no-repeat 10px;}
#form label {margin:10px 0 0 ;}

#balloons {width: 400px; min-height: 600px;margin: 40px 0 0 ; float: left;}
#manage {padding:20px; float: left; min-height: 200px; width: 300px;}
#manage .box {padding:20px; float: left; border: 1px solid #d4d4d4; min-height: 150px; width: 280px;}

#manage_left {padding:20px; float: left; min-height: 200px; width: 300px;}
#manage_left h1 {float:left; width:200px; margin: 0px; border-bottom: 1px solid #9d9e9e; color: #9d9e9e; line-height:25px; font-size: 16px;}
#manage_left .box {margin:45px 0 0 ; padding:20px; float: left; border: 1px solid #d4d4d4; min-height: 150px; width: 280px;}

1. Abriria as propriedades

antes

seletor {propriedade: valor; propriedade: valor;}

depois

seletor {

 propriedade: valor;
 propriedade: valor;
}

2. Colocaria classes 'genéricas' no topo ou no final, mas agrupadas

.highlight { ... }
.clear {...}

/ resto da folha de estilos /

3. Opinião pessoal, ordenaria as propriedades alfabeticamente

hr {

 background:#d4d4d4;
 border: 0px;
 color:#fff;
 height: 1px;
 width: 100%;
}

4. Ordenaria as declarações na ordem em que elas aparecem na página

body { ... }
header { ... }
#conteudo { ... }
footer { ... }

5. Procuraria classes que descrevessem o conteúdo do elemento, e não sua apresentação visual

Exemplo

.red {color: red;}

Se, porventura, numa troca de leiaute, este elemento tenha que mudar de cor, terá, também, que mudar de classe!

http://www.acordapraweb.com/semantica-no-html-abolicao-da-escravatura/

6. Provavelmente, o que você queria fazer aqui:

#form input[type=text], input[type=password], input[type=email] {...}

era isso aqui:

#form input[type=text], #form input[type=password], #form input[type=email] {...}

Caso eu esteja certo e não hajam checkboxes/radio-buttons, experimente isso:

#form input[type] {..}

ou ainda

#form input {..}

7. Se #balloons se refere a mais de um elemento, então se trata de uma classe. #id deve referenciar um, e apenas um elemento.

8. Abusaria da cascata

Veja a redundância:

.box {border: 1px solid #d4d4d4; height: 125px; }
#manage .box {border: 1px solid #d4d4d4; padding:20px; float: left; min-height: 150px; width: 280px;}
#manage_left .box {border: 1px solid #d4d4d4; padding:20px; float: left; min-height: 150px; width: 280px; margin:45px 0 0;}

Se #manage_left fica dentro de #manage, fica muito fácil

.box {
 border: 1px solid #d4d4d4;
 height: 125px;
}

#manage .box {

 float: left;
 min-height: 150px;
 padding: 20px;
 width: 280px;
}

#manage_left .box {

 margin: 45px 0 0;
}

Caso #manage_left não fique dentro de #manage, a mudança é mínima

.box {
 border: 1px solid #d4d4d4;
 height: 125px;
}

#manage .box, #manage_left .box {

 float: left;
 min-height: 150px;
 padding: 20px;
 width: 280px;
}

#manage_left .box {

 margin: 45px 0 0;
}

>
valeu evandro no casso o textbox pass e email terao bg diferente por isso o css esta dessa forma faz sentindo?

aqui esta o html olha q pode ser melhorado tb?

obrigado.

https://gist.github.com/4066619

<div id="content">
 <div id="box_white">
 <h4>Add lorem</h4>
 <div id="clinic-contact">
 <div class="title">
 <h1> Important Note </h1>
 </div>
 loprem lipsim <br><br><span class="highlight">lorem lipsum</span>
 </div>
 <div id="staff">
 <div class="title">
 <div class="select-staff">
 <select>
 <option> Staff Name </option>
 </select>
 </div>
 <h1> Staff Picture </h1>
 </div>
 <table class="box">
 <tr>
 <td class="picture-staff"><img src="image.jpg"></td>
 <td class="text-staff"> lorem</td>
 </tr>
 </table>
 <input type="checkbox"> Do not show Picture

 </div>
 <div class="clear"></div><hr>

<div id="form_container">
 <div id="form">
 <div class="cel heading">Choose a Title:<br />
 <select>
 <option>CHOOSE A TITLE</option>
 </select>
 </div><br />
 <div class="cel heading">First Name:<br>
 <input type="text">*
 </div><br />
 <div class="cel heading">Last Name:<br />
 <input type="text">*
 </div><br />
 <div class="cel heading">lorem:<br />
 <select>
 <option>loremc</option>
 </select>
 </div><br />
 <div class="cel heading">Select a Phone:<br />
 <select>
 <option>Select a Phone</option>
 </select>
 </div><br />
 <div class="cel heading">Password:<br>
 <input type="password">
 </div><br />
 <div class="cel heading">Email:<br>
 <input type="email">
 </div><br><br />
 <span class="red"> * Mandatory </span>
 </div>

 <div id="balloons">
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 </div>

</div>
 <div id="manage">
 <h1>lorem</h1>
 <div class="box">
 lorem <br />
 <input type="checkbox"> Yes<br />
 <input type="checkbox"> No <br />
 </div>

 </div>

 <div id="manage_left">
 <div class="box">
 <h1>For</h1><br /><br />
 <input type="checkbox">lorem<br />
 <input type="checkbox">Only
 <select>
 <option>Smiles Dental</option>
 </select>
 </div>
 <input type="submit" value="Cancel" class="button btn_cancel">
 <input type="submit" value="Save" class="button btn_small">
 </div>

</div>

1. Indentação incorreta

2. Precisei abrir sua markup com as CSS pra fazer algum sentido para mim.

Provavelmente por você saber do que se trata, conhece cada elemento da página. Sua markup estará semanticamente correta quando for possível para alguém que não sabe do que se trata conseguir descrever cada elemento sem a ajuda das CSS.

3. Procure preencher os campos textuais com a descrição, ou um exemplo, pra facilitar. Tal qual você fez com "staff picture" por exemplo. Ali foi possível saber o objetivo do elemento. Todos os outros lorem são muitíssimo vagos

4. O que raios aquela tabela faz ali?!

5. Troquei a sua imagem por essa http://lorempixel.com/output/people-q-g-300-300-6.jpg e o texto, que acredito ser a descrição da imagem, "subiu em cima dela". Verifique nas CSS.

6. Também com relação às CSS, não existe 0px. 0 é 0 em qualquer medida, seja píxels, centímetros, metros, pontos, polegadas.

7. Isto

<div id="balloons">
 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>
 </div>

Pode virar isto

<div id="balloons">
 <p>lorem</p>
 <p>lorem</p>
 <p>lorem</p>
 <p>lorem</p>
 <p>lorem</p>
 <p>lorem</p>
 </div>

Aí você trata os estilos nas CSS com

#balloons p { ... }

8. Designe labels para seus elementos de formulário.

9. O uso das H está incorreto. Você define título de grupo com h4 e título de elemento com h1????

10. Não utilize BR por estética. Prefira dar espaçamento com CSS. Lembre-se que, numa mudança de leiaute, se este espaçamento feito com BR não existir mais, ou passar a ser lateral, você terá que modificar seu HTML sem necessidade novamente.

11. porque você tem um #form e não tem um <form> ??????

>
valeu evandro no casso o textbox pass e email terao bg diferente por isso o css esta dessa forma faz sentindo?

Você tem checkboxes no formulário, então ficamos com a primeira abordagem:

#form input[type=text], #form input[type=password], #form input[type=email] {...}

Ali você utilizou a cascata corretamente. Utilize apenas um seletor para definir propriedades em comum e vá sobrescrevendo as particularidades de cada uma.

valeu evandro muito boas dicas irei aproveitar.

apenas uma coisa aqui na empresa ele adotam usar a classe ou id css em uma linha so, dizem que pode ter uma performace maior em um css com mais de 50 mil linha :P

normall

seletor {propriedade: valor; propriedade: valor;}

somente usam se for muito grande as propriedades

seletor {

 propriedade: valor;

 propriedade: valor;

}

>

<div id="content">
 <div id="box_white">
 <h4>Add lorem</h4>
 <div id="clinic-contact">
 <div class="title">
 <h1> Important Note </h1>
 </div>
 loprem lipsim <br><br><span class="highlight">lorem lipsum</span>
 </div>
 <div id="staff">
 <div class="title">
 <div class="select-staff">
 <select>
 <option> Staff Name </option>
 </select>
 </div>
 <h1> Staff Picture </h1>
 </div>
 <table class="box">
 <tr>
 <td class="picture-staff"><img src="image.jpg"></td>
 <td class="text-staff"> lorem</td>
 </tr>
 </table>
 <input type="checkbox"> Do not show Picture

 </div>
 <div class="clear"></div><hr>

<div id="form_container">
 <div id="form">
 <div class="cel heading">Choose a Title:<br />
 <select>
 <option>CHOOSE A TITLE</option>
 </select>
 </div><br />
 <div class="cel heading">First Name:<br>
 <input type="text">*
 </div><br />
 <div class="cel heading">Last Name:<br />
 <input type="text">*
 </div><br />
 <div class="cel heading">lorem:<br />
 <select>
 <option>loremc</option>
 </select>
 </div><br />
 <div class="cel heading">Select a Phone:<br />
 <select>
 <option>Select a Phone</option>
 </select>
 </div><br />
 <div class="cel heading">Password:<br>
 <input type="password">
 </div><br />
 <div class="cel heading">Email:<br>
 <input type="email">
 </div><br><br />
 <span class="red"> * Mandatory </span>
 </div>

 <div id="balloons">
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 <p class="triangle-isosceles left">lorem</p>
 </div>

</div>
 <div id="manage">
 <h1>lorem</h1>
 <div class="box">
 lorem <br />
 <input type="checkbox"> Yes<br />
 <input type="checkbox"> No <br />
 </div>

 </div>

 <div id="manage_left">
 <div class="box">
 <h1>For</h1><br /><br />
 <input type="checkbox">lorem<br />
 <input type="checkbox">Only
 <select>
 <option>Smiles Dental</option>
 </select>
 </div>
 <input type="submit" value="Cancel" class="button btn_cancel">
 <input type="submit" value="Save" class="button btn_small">
 </div>

</div>

1. Indentação incorreta

2. Precisei abrir sua markup com as CSS pra fazer algum sentido para mim.

Provavelmente por você saber do que se trata, conhece cada elemento da página. Sua markup estará semanticamente correta quando for possível para alguém que não sabe do que se trata conseguir descrever cada elemento sem a ajuda das CSS.

3. Procure preencher os campos textuais com a descrição, ou um exemplo, pra facilitar. Tal qual você fez com "staff picture" por exemplo. Ali foi possível saber o objetivo do elemento. Todos os outros lorem são muitíssimo vagos

4. O que raios aquela tabela faz ali?!

5. Troquei a sua imagem por essa http://lorempixel.com/output/people-q-g-300-300-6.jpg e o texto, que acredito ser a descrição da imagem, "subiu em cima dela". Verifique nas CSS.

6. Também com relação às CSS, não existe 0px. 0 é 0 em qualquer medida, seja píxels, centímetros, metros, pontos, polegadas.

7. Isto

<div id="balloons">
 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>

 <p class="triangle-isosceles left">lorem</p>
 </div>

Pode virar isto

<div id="balloons">
 <p>lorem</p>
 <p>lorem</p>
 <p>lorem</p>
 <p>lorem</p>
 <p>lorem</p>
 <p>lorem</p>
 </div>

Aí você trata os estilos nas CSS com

#balloons p { ... }

8. Designe labels para seus elementos de formulário.

9. O uso das H está incorreto. Você define título de grupo com h4 e título de elemento com h1????

10. Não utilize BR por estética. Prefira dar espaçamento com CSS. Lembre-se que, numa mudança de leiaute, se este espaçamento feito com BR não existir mais, ou passar a ser lateral, você terá que modificar seu HTML sem necessidade novamente.

11. porque você tem um #form e não tem um <form> ??????

Você tem checkboxes no formulário, então ficamos com a primeira abordagem:

#form input[type=text], #form input[type=password], #form input[type=email] {...}

Ali você utilizou a cascata corretamente. Utilize apenas um seletor para definir propriedades em comum e vá sobrescrevendo as particularidades de cada uma.