Vamos a darle un poco de estilos a los que vienen siendo nuestros formularios que de momento se ven
de esta forma un poco muy sencillos pueden ser que tenemos aquí cada cada campo toma todo el espacio
disponible tienen un color de fondo entre muchas otras cosas y además que un poco más altos.
Vamos a abrir lo que viene siendo de stays hojas de estilos y pensar que de momento le dimos un display
Blok a cada uno de los inputs eso nos garantiza que no se encima en unos con otro puede ser que si no
tuviéramos se vería así el display Blok lo que hace que Limpopo tome todo el espacio disponible y ya
no es encima uno con otro pero veamos otras formas de darle estilos.
Por ejemplo supongamos que queremos darle estilos a los imput puedes ver que cada input que tenemos
cada uno tiene la etiqueta de input podríamos ponerla aquí por ejemplo imput y ponerle a un color digamos
si resguardos cambios y abres tu proyecto puedes ver que le pone un color de fondo al imput que tiene
un tip TEDx al que tiene un tip y Mail el que tiene un tip teléfono.
Incluso si es cool este también lo debería tener pero vamos a quitarle sus clases este par de clases
los voy a quitar si guardas cambios puedes ver que también el imput Summit se ve afectado.
Este es un selector muy genérico y va a afectar todos los inputs ya sea teléfono ya sea o erré Lesser
bistecs incluso el submit volumétricas bueno podemos crear una clase no podemos ir aquí y crear una
clase digamos Class y digamos por ejemplo ponerle nombre entonces seleccionar por ejemplo punto nombre
y guardar cambios y puede ser que nada más afecta.
Esto es mucho mejor aún porque puedes ver que solamente afecta a un elemento y con eso tienes un poco
más de control.
Puedes ver que no afecta a los demás entonces tienes más control haciéndolo con clases.
Sin embargo cuando tienes este tipo de imputs existe otra forma de hacerlo puedes por ejemplo colocar
aquí un input input y utilizar lo que se conoce como selector de atributo para sonar muy complicado
pero no es tanto utilizas corchetes y esto ya se ve más complicado.
Así pero en esta parte un selector de atributo va a seleccionar estos atributos que están aquí usualmente
vas a seleccionar por el Taipe pero también puedes seleccionar por el Heydi.
Yo no recomiendo mucho seleccionar por ahí yo recomiendo más por tip tip igual a Tex y poner un Bagram
color y ponerle digamos Red entonces eso va a hacer que este input que es el tipo tex tenga un color
de fondo rojo y no va a afectar a los demás.
Ahora vamos a darle a los estilos como deben de ser vamos a eliminar esta parte y digamos que ponemos
un Padín un Braham y vamos a poner un display Block para que tome todo el espacio disponible.
Display Block también un width 100 por ciento de esa forma forzamos que midan 100 por ciento y un Bagram
color para que tenga su color de fondo que va a ser 1 1 1 es un color gris un poco más claro si abrimos
el proyecto puedes ver que se aplica el padre en el botón es un poco más alto se aplica el color de
fondo toma todo el ancho disponible y se ve bien ahora para ir separando cada uno de los inputs.
Usualmente pongo aquí por ejemplo un margen Boron digamos 2 Ephraim y eso me va a separar cada uno de
ellos.
Después ver que aplicamos estos estilos para lo que viene siendo este input en específico.
Ahora este borde que está aquí se ve un poco extraño porque se ve como muy grueso y de distintos colores.
Se lo puedes quitar y ponerle por ejemplo Border Border North y eso lo va a eliminar.
Entonces ya ahí se ve mucho mejor y algunas veces algunos campos tienen como esquinas redondeadas vimos
anteriormente que por radios digamos asombren te permite tener esquinas redondeadas entonces puedes
aplicarle cualquier CSS hacia un formulario y hacerlos que se vean bien.
Digamos que te gustaría cambiar el color de texto puedes poner aquí color y elegir un color que te guste.
Si algo muestra por ejemplo y escribir y pensar que cambia el color.
Bueno obviamente este color no pero puedes cambiar también el color del texto.
Puede ser que se ve bastante bien el formulario.
Ahora por ejemplo esto selecciona únicamente el texto.
Digamos que ahora quiero dar estilo al Daily Mail entonces podría poner aquí input logotipo selector
de atributo y ponemos email.
Digamos que copio y pego todo este código copio y pego y puede ser que afecta ahora a este también entonces
tengo mi selector atributo y ahora correo electrónico se ve bien el problema de esto es que bueno estamos
repitiendo el código y digamos que el cliente o si trabajamos en alguna agencia donde trabajemos nos
dice bueno hasta un poco más pequeño y tal vez digan bueno el Padín .5 Reem tendrás que cambiarlo aquí
y después acá y si tienes muchos campos tendrás que cambiarlo muchas veces como mencioné anteriormente
puedes cortar este selector y poner una coma.
Coma enter y colocar lo que viene siendo este selector muy importante que le coloca es una coma porque
eso funciona igual que el lenguaje español.
Por ejemplo cuando estás hablando de algo relacionado escribes algo relacionado digamos comprar comida
coma agua entonces son cosas relacionadas y se separan con una coma de la misma forma funciona CSS.
Si lo eliminas así pues básicamente esto es un selector de esta forma.
Entonces selecciona un input que sea Tex y que dentro tenga un email y eso pues no existe.
Si lo guardas pues porque no se ve nada.
Es importante que pongas una coma aquí para agregar más y más selectores y puedes ver que podemos agregar
más ahora esto nos lleva a un problema más porque por ejemplo si quieres aplicarlo al teléfono pues
tienes que copiar esta parte de aquí y ponerle una coma y por ejemplo poner a quitar y aplicar al teléfono.
Pero como ya vimos anteriormente existe where l Existe Serch existe Passbook.
Eso nos llevaría a agregar una gran cantidad de inputs aquí selectores tal vez.
Bueno pues entonces hay que ponerle un input.
Pero recuerda eso va a afectar el enviar.
Tal vez digas bueno entonces mejor una clase pero una clase bueno es buena opción creo que es mi segunda
mejor opción la mejor de todas para afectar todos los inputs excepto este de enviar es utilizar va eliminar
esto input y lo ponemos aqui dos puntos Nott un selector que va a negar y puede ser que tiene como esos
paréntesis entonces paréntesis Taipe submit qué hace esto.
Bueno selecciona todos los inputs que no sean submit y de esa forma puedes excluir a quien me hizo falta
corchetes sumiera entonces se ve extraño voy a hacer más un paréntesis y luego corchetes y luego submit
de esa forma podemos excluir ese selector en específico entonces si guardas cambios puedes ver que lo
aplica a todos excepto al de enviar.
Ahora tal vez días a todos menos al de Tex eso va a excluir el de TeX y se la aplica también a sus nietos.
Esto es una forma en la que puedes seleccionar un elemento en específico o seleccionar un elemento en
específico.
Vamos a seleccionar de nueva cuenta el submit porque El Summits lo vamos a agregar los estilos con las
clases de botones que tenemos anteriormente.
Ahora puedes ver que esto no aplica estos inputs pero este que está aquí no.
Bueno esto porque este es un Texas area no podemos que poner de Koma Tex Area y guardar cambios y puede
ser que se aplica al Texas Area y después tenemos este Select Select son un poco más complicados porque
si te pones aquí Comas elec vamos a ver que no funciona como tal.
Así funciona el color de fondo pero el Padín puedes ver que no para qué funciona lo que viene siendo
el Padín tienes que poner aquí select y ponerle a Perianes y poner Denon ahora Perianes como tal pues
ver que no hace mucho sobre esta forma en algunos casos como por ejemplo Crom requiere lo que se conoce
como un prefijo.
Muchas personas dicen los prefijos ya no sirven ya están muertos pero para que este funcione se requiere
lo que viene siendo web quitapenas no puede ser que se le agrega un poco de PADI perdemos la flecha
de aquí porque la apariencia está hecha como no pero puedes dar click aquí puedes ver que funciona correctamente
entonces se va viendo bien y esto solamente afecta al Select no se lo vamos a poner los demás únicamente
al Select todos los elex que tenemos.
Finalmente el Texas area mencioné que le puedes dar una altura entonces Jaitt y le puedes poner por
ejemplo 20 Rubem para que sean 200 píxeles y hacerlo un poco más alto.
Los usuarios pueden escribir después ver como le hemos dado estilos a esta parte.
Ahora lo que viene siendo este de aquí puedes ver que están centrados se ve un poco extraño así que
vamos a agregar esta parte del input lo de Submit para enviarlos en el siguiente vídeo ya para finalizar
este formulario de contacto.