Una introducción a las clases en html y css

No hace falta decir que el desarrollo web es enorme. Una gran parte de eso se debe a que casi todos están en la Web. Sin embargo, hay una escasez de desarrolladores en el campo, y es por eso que el plan de estudios de desarrollo web está tan fácilmente disponible y también es gratuito. Con eso en mente, le mostraremos un poco de lo que se trata HTML y CSS. Más específicamente, le mostraremos cómo funcionan las "clases".

No lo estamos comenzando desde el principio, ya que hay toneladas de currículum gratuito por ahí. En cambio, le mostraremos específicamente cómo funcionan las clases, ya que es un componente necesario para diseñar su sitio web. También pensamos que podría valer la pena cubrirlo antes de publicar nuestro vistazo a la API Bootstrap de Twitter, ya que las clases también son un componente obligatorio en eso.

Como descargo de responsabilidad, si eres completamente nuevo en HTML y CSS, probablemente este no sea un buen comienzo para ti. Sin embargo, si está familiarizado con él, no debería ser demasiado difícil de aprender. Pero, si está buscando un tutorial completo para principiantes, hay muchas opciones excelentes en línea. Por nombrar algunos, hay FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity y muchos más. Si decide comenzar a cavar en uno de esos, le recomiendo que se quede con uno (como Free Code Camp) y termine antes de comenzar otro, ya que gran parte del contenido "básico" puede ser bastante repetitivo.

Con eso fuera del camino, profundicemos de qué se tratan las clases.

Cómo funcionan las clases

Las clases son extremadamente útiles. Eliminan la repetitividad del estilo HTML. Sin clases, estaría diseñando cada elemento en su marcado individualmente. ¿Y si tuvieras dos de los mismos elementos, pero quisieras diseñar cada uno de ellos de manera diferente? Sería un completo desastre. Por eso tenemos clases. Las clases agregan cierta estructura organizativa a su HTML, lo que le permite mantener su código relativamente limpio. No solo eso, sino que las clases se pueden usar más de una vez. En otras palabras, nunca tendrá que crear las mismas reglas de estilo dos veces.

Así es como se ven las clases dentro de nuestro etiqueta:

Como puede ver, debajo de nuestra etiqueta corporal, tenemos dos

elementos con diferentes clases. El primero

la etiqueta tiene la clase "head1", mientras que la segunda etiqueta tiene la clase "head2". Entonces, en nuestro CSS, en lugar de aplicar el estilo solo a

elemento, podemos aplicar estilo a esas clases individuales. ¿Por qué querríamos hacer eso?

La razón principal es que no quieres todo tu

elementos para tener el mismo estilo. Crearía muchos dolores de cabeza al hacer un sitio web, y además de eso, los sitios web no se verían muy bien. Las clases nos permiten aplicar estilos solo a esa instancia de la etiqueta, no a todas

etiquetas en todo el documento. Entonces, ¿cómo se escribe una clase en HTML? Me gusta esto:

Algo de contenido

Puede agregar la propiedad "clase" a casi cualquier elemento HTML.

¡Excelente! Entonces, tenemos clases, pero en su estado actual, en realidad no están haciendo nada. Eso es porque todavía no hemos agregado ninguna regla de estilo a la clase. Para hacer eso, necesitaremos crear un documento .css separado. Solo voy a llamarlo main.css. En ese documento, diseñaríamos una clase como esta:

Para seleccionar una clase que queremos diseñar, hacemos esto:

.head1 {color: rojo; alinear texto: centro; }

Dentro de las llaves se encuentran todas las "reglas" (o estilos) que aplicamos a esa clase. Hay muchas reglas diferentes que puedes poner dentro de esa clase. En mi caso, cambié el color del texto a rojo usando la regla de "color" y centré el texto usando la regla de "alinear texto". Puede encontrar una lista completa de las reglas de CSS, así como su documentación en la Red de desarrolladores de Mozilla.

Ahora, nuestro estilo todavía no se aplica a las clases en nuestro documento HTML, y eso es porque todavía no hemos vinculado los dos archivos. Regrese a su archivo HTML y en el etiqueta, querrás vincular tu archivo CSS haciendo esto:

Su documento HTML debería verse así:

Y su proyecto de prueba debería verse así en la Web:

Para ver un video más detallado que describe estos pasos, consulte a continuación.

Vídeo

Conclusión

¡Y eso es todo lo que hay para las clases! Son realmente simples de entender. Obviamente, en los sitios web grandes y populares que visita, las reglas dentro de las clases son mucho más complicadas de lo que cubrimos, pero en su forma más básica, así es como funcionan.

Si tiene alguna pregunta o tuvo problemas para seguir, ¡infórmenos en los comentarios a continuación o en los foros de PCMech! O, si está interesado en una guía completa para principiantes de HTML / CSS en PCMech, ¡asegúrese de informarnos eso también!