Qué es y cómo usar CSS: estilos en desarrollo web

Dentro de la carrera de todo desarrollador web como primer escalón siempre estará HTML y CSS. Aunque es importante conocer cómo trabaja cada uno de ellos es importante decir que ambos son absolutamente necesarios para cualquier desarrollo y de hecho, se deben usar en conjunto.

Si estás buscando iniciar en tu carrera como desarrollador o programador web, debes conocer qué es y cómo usar CSS. Por esto, en este nuevo post hablaré sobre estos dos principales temas y adicional cómo podemos gestionar todos los estilos de nuestro desarrollo de diferentes formas. Así que vamos a comenzar.

Antes de iniciar

Aquí te comparto el link para que inicies viendo el post de HTML. Este post con video trata sobre los fundamentos de HTML únicamente y cómo podemos estructurar en sencillos pasos una página web para así, combinarlo con css. Haz click aquí para ver.

Qué es CSS

CSS (Cascading style sheets) en español significa hojas de estilo en cascada, es un lenguaje de diseño gráfico encargado por medio de reglas, de darle estilo o crear la presentación a un documento HTML. Como sabemos, un documento HTML por si solo puede crear una estructura base de una página web, pero este como tal no puede gestionar el estilo del mismo.

Aunque vemos que al ingresar por ejemplo un encabezado, o un párrafo, estos ya vienen con un estilo predefinido (tamaños de letra, tipografía, color etc), no pueden modificar su estilo si no es con la ayuda de CSS.

Para qué sirve CSS

CSS como tal es un documento dentro de nuestro programa o código en el cual vamos ingresar ciertas reglas de estilo las cuales servirán para crear o modificar los estilos de cualquier elemento html dentro de la web.

Adicional, con la ayuda de CSS podemos volver nuestro sitio adaptable, es decir que al ver o usar desde varios tamaños de pantallas como teléfonos móviles, la web mantenga su estructura y composición.

Cómo usar CSS

Vamos a iniciar con estos pasos:

• Abre VS Code. Si no lo tienes instalado haz click aquí para descargar.
• Una vez abierto, crea un folder o carpeta en tu escritorio. Arrastra inmediatamente este folder a la ventana abierta de vs code. Esto permitirá que vs code inicie el programa en esta ubicación.
• En la parte izquierda verás el explorador. Crear el archivo html, con el nombre index.html.
• Dentro escribe html5 y oprime enter. VS Code te creará automáticmente el primer fragmento de código con la estructura de head, body y footer de html.

Dentro de la cabecera o head, escribe el siguiente comando

<link rel="stylesheet" href="styles.css">

Ahora, crea un archivo llamado «styles.css» en el explorador. De esta manera el fragmento de código anterior asignará este archivo como hoja de estilos para el documento html y aquí ya podrás comenzar a crear tus estilos!

Dentro de la creación de reglas para estilos del documento html encotraremos 2 términos importantes: Clases (class) y IDS. Vamos a verlos a continuación.

Agregar Clases

Las clases o «class» en CSS son usadas como atributos en un elemento html y permiten crear una configuración de estilos personalizada. Estas clases a diferencia de los IDS pueden ser usadas en todos los elementos HTML que desees. Ahora, cómo creamos una clase: Dentro de tu documento CSS escribe un nombre de clase que desees, pero iniciando con un punto. Luego abre llaves y centro escribe los estilos que desees modificar como color, tamaño, margen entre otros. Así:

.claseContenedor{
    text-align: center;
    background-color: aquamarine;
    padding: 20px 15px 20px 15px;
    margin: 40px 10px 40px 10px;
}

En la clase anterior podemos ver 4 diferentes estilos añadidos a la clase:

• text-align: permite alinear el texto y en este caso en el centro. Es decir que todo lo que esté dentro del elemento html se centrará horizontalmente.
• Background-color: permitirá cambiar el color de fondo.
• Padding: añadirá o modificará el espacio interior del elemento html hacia todos los lados con el orden «arriba, derecha, abajo, izqueirda».
• Margin: permite modificar el espacio que hay entre un elemento HTML a otro.

Añadir clase a elemento html

Para poder usar class en un elemento html, debemos añadirlo como un atributo del elemento html. Dentro del atributo escribimos el nombre de la clase que creamos dentro de la hoja de estilos y listo!

<div class="claseContenedor">
</div>

Como lo vemos en el ejemplo de la imagen anterior, asignamos la clase «claseContenedor» a este div y vemos cómo cambia la alineación, el color de fondo, relleno y margen.

Agregar IDS

Al igual que las clases, los IDS permiten modificar el estilo de un elemento html, pero a diferencia de class, IDS solo puede ser usado en un elemento html. Puedes verlo como un ID o SKU de un producto en tu tienda en línea, en teoría solo se puede asignar uno por producto y esto nos permite tener más control sobre nuestros elementos html.

Los ids se declaran con un signo «#» seguido del nombre del id. De la siguiente forma:

#idPrimerH3{ color: brown;}

El anterior id únicamente modificará el color del texto del elemento html al que sea asignado. Claro que puede modificarse lo que se desee, como en el caso de las clases.

Añadir ids a elemento html

Al igual que las clases, los ids también son usados como atributos dentro deun elemento html. Dentro del atributo, escribimos el nombre del id creado en la hoja de estilos. así:

<h3 id="idPrimerH3" >Encabezado H3</h3>

En el ejemplo podemos ver claramente cómo se modifica el color del h3 asigando con el id. Recuerden, solamente puede ser usado en un único elemento html. Si desean usar otro id, deben crear otro en la hoja de estilos con un nombre diferente.

Video de ayuda

Para finalizar, hice este video para ayduarte en el proceso de conocer qué es y cómo funciona css. Si te gusta no olvides dar like y suscribirte! eso me ayudará abstante a seguir creando contenido.

Producto sugerido

Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.

Conclusión

como lo mencioné al inicio, conocer CSS es clave para el inicio de cualquier desarrollador porque nos ayuda a entender la base del estilo en un desarrollo web. De esta manera, encontraremos más y mejores herramientas para mejorar la visibilidad de nuestra web.