CSS: ¿qué es, cómo utilizarlo en el HTML y un guion para principiantes?
¡Hola Dev!
Hoy vamos a hablar de un tema fundamental para cualquier persona que esté en el área de desarrollo web, o incluso para aquellos que están planeando adentrarse en este maravilloso mundo. Vamos a hablar del CSS - Cascading Style Sheets.
Sabes que el CSS es esencial para crear bellos y atractivos sitios web, pero ¿estás perdido en medio de selectores, propiedades y valores? Necesitas desentrañar estos misterios y encontrar una forma de aplicar correctamente el CSS en tus proyectos.
En este artículo, exploraremos los secretos ocultos del CSS. Aprenderás sobre selectores, reglas de estilo y bloques de declaración. Vamos a un pequeño ejemplo:
selector{
propiedad: valor;
}Vemos que tenemos el selector, que define a qué elemento HTML se aplicará el estilo, seguido por un bloque de declaración (dentro de las llaves {}). Dentro de este bloque, tenemos la propiedad que queremos cambiar y el valor de esta propiedad. ¿Sencillo, verdad?
Ahora, vamos a un ejemplo práctico:
En este caso, el p es el selector, que se refiere a todos los párrafos (<p>) de nuestro documento. La propiedad que estamos cambiando es color y el valor de esta propiedad es red (rojo). Por lo tanto, con esta regla de estilo, estamos haciendo que todos los párrafos de nuestro documento se exhiban en color rojo.
El CSS te permitirá controlar la apariencia y el estilo de los elementos de un sitio web. ¡Prepárate para sumergirte en esta aventura y descubrir los secretos del CSS! ¡No te pierdas los próximos capítulos en el universo del CSS!
Nosotros, los desarrolladores web, necesitamos del CSS para crear sitios web atractivos y funcionales. ¿Por qué? Vamos a explorar juntos.
Sin el CSS, nuestro sitio sería como un mapa sin leyendas: técnicamente útil, pero increíblemente difícil de comprender. Un buen design no es solo sobre hacer un sitio web hermoso, sino también mejorar la experiencia del usuario. El CSS nos permite hacer eso, proporcionando una experiencia del usuario suave y agradable.
Además de eso, el CSS es esencial para la creación de sitios web responsivos. Con el aumento del uso de dispositivos móviles para acceder a la web, es cada vez más importante que nuestros sitios web se adapten a diferentes tamaños de pantalla. Con CSS, podemos garantizar que nuestros sitios sean hermosos y funcionales tanto en un smartphone como en un desktop.
Por último, pero no menos importante, el CSS tiene un papel crucial en la acesibilidad en la web .Nos permite crear sitios web que son accesibles a todas las personas, independientemente de sus habilidades o de las tecnologías de asistencia que puedan estar utilizando.
Por lo tanto, la importancia del CSS en el desarrollo web es indiscutible.
El CSS ofrece una variedad de ventajas que pueden transformar la apariencia y el funcionamiento de los sitios web. Con el CSS, es posible:
Con el CSS, tienes el control total sobre el visual del sitio web. Es posible definir colores, fuentes, espaciado y mucho más, permitiendo una personalización completa para atender tus preferencias.
El CSS permite escribir reglas que pueden ser aplicadas en varios elementos del sitio web, evitando la repetición de estilos específicos. Esto resulta en menos código para escribir y mantener, haciendo el proceso más eficiente.
Con las media queries del CSS, es posible adaptar el diseño del sitio web de acuerdo con las características del dispositivo del usuario. Esto garantiza que el sitio web sea visualmente atractivo y funcional en diferentes tamaños de pantallas, como smartphones, tablets y computadoras.
El CSS desempeña un papel importante en la creación de sitios web accesibles. Es posible ajustar el contraste de los colores, el tamaño de las fuentes y otras características visuales para hacer el sitio más accesible para usuarios con deficiencias visuales u otras necesidades especiales.
Separar el design (CSS) del contenido (HTML) hace que el mantenimiento del sitio web sea más fácil. Alteraciones en el diseño pueden ser hechas sin afectar el código HTML, simplificando el proceso de mantenimiento y reduciendo la posibilidad de errores.
Compartir historias es siempre increíble. La trayectoria del CSS también tiene su inicio, altos y bajos, y momentos marcantes. ¡Entonces, prepárate para embarcar en este viaje al pasado!
En una época muy lejana, más precisamente en 1994, un ingeniero llamado Håkon Wium Lie sugirió algo nuevo: un lenguaje de estilización que podría resolver el caos del HTML de la época. Él imaginó una manera más práctica de implementar y controlar estilos visuales para páginas web. Y fue así, en colaboración con el W3C (Word Wide Web Consortium) , que surgió el CSS - Cascading Style Sheets.
Así como el tiempo no para, el CSS tampoco se quedó estancado. Ha tenido evoluciones con el tiempo, llamadas niveles.
En esta larga trayectoria, tuvimos muchos hitos importantes. Entre ellos, destacamos:
El viaje por la historia del CSS es fascinante, ¿verdad? Ahora que conoces un poco más sobre su origen y evolución, estás listo para profundizar más.
Si la web fuera una gran aventura, CSS sería nuestro mapa. Y, para navegar en este mapa, necesitamos comprender su estructura y la sintaxis. Además, no quieres perderte en un laberinto de código, ¿verdad?
Vamos a empezar por lo básico. Una regla CSS está compuesta por:
El selector indica a quién se aplica la regla, y el bloque de declaración contiene una o más declaraciones que se aplican al elemento seleccionado.
Una declaración, a su vez, está compuesta por una propiedad y un valor, separados por dos puntos. Quedaría así:
selector {
propiedad: valor;
}Bastante simple, ¿verdad? Ahora vamos a mirar más de cerca cada parte de esta regla.
Los selectores van en busca de los elementos que coinciden con el patrón que definimos. Existen varios tipos de selectores en CSS, pero aquí están algunos de los más usados:
p, div, h1, etc.;.) seguido del nombre de la clase;#) seguida del nombre del ID.Las propiedades controlan todo, desde el color del texto hasta el tamaño del borde, pasando por la fuente y el espaciado. El CSS posee cientos de propiedades diferentes, lo que proporciona un nivel increíble de control sobre la apariencia de una página web.
Cada propiedad tiene un conjunto específico de valores que puede aceptar. Algunos son bastante simples, como auto o none. Otros pueden ser números, colores o incluso una cadena de texto.
Muchos valores numéricos en CSS están acompañados por una unidad de medida. Por ejemplo, puedes definir el ancho de una div en píxeles (px), porcentaje (%), ems (em), o varias otras unidades. Cada una tiene sus propias características y usos.
Comprender la estructura y la sintaxis del CSS es fundamental. Con este conocimiento, estás completamente preparado para crear estilos impresionantes para la web.
Si alguna vez has tenido que envolver regalos, sabes que es necesario tener un buen entendimiento de cómo funcionan las cajas para conseguir un buen resultado. De la misma manera, entender el modelo de caja (Box Model) es fundamental para trabajar con CSS. Vamos a explorar este universo ahora.
En CSS, cada elemento es considerado como una caja rectangular. Esta caja está descrita por un modelo conocido como Box Model, que está dividido en cuatro áreas:
content);padding);border); ymargin).Juntas, estas áreas definen cómo los elementos se relacionan entre sí y cómo ocupan espacio en la página.
Ahora, vamos desempacar cada parte del Box Model:
El posicionamiento de elementos en CSS puede parecer una versión de Tetris a veces, donde intentamos encajar diferentes bloques en un espacio limitado. Tenemos varias propiedades para controlar el posicionamiento, incluyendo:
position;top;right;bottom;left; yz-index.Con ellas, puedes mover elementos hacia arriba y abajo, izquierda y derecha, e incluso controlar qué queda al frente y qué queda detrás.
Podemos pensar en la responsividad como una característica de un camaleón, adaptándose al entorno. En el caso del CSS, el entorno son los diferentes tamaños de pantalla y dispositivos. Usando media queries, podemos alterar estilos en función del tamaño de la pantalla, creando una experiencia que se adapta al dispositivo del usuario.
@media (max-width: 600px) {
div {
width: 100%;
}
}Entender el Box Model y el layout es como tener un mapa que guía la ubicación y el posicionamiento de los elementos en nuestra página. Y es increíble ver cómo CSS nos da el poder de transformar la Web según nuestra voluntad.
¿Has entrado alguna vez en una tienda y el vendedor reconoce de inmediato que buscas algo único, que habla sobre quién eres? Así es como funciona la estilización de texto y tipografía en CSS: ellas definen la personalidad y la apariencia de tu contenido escrito, creando una experiencia de lectura única.
CSS nos ofrece una paleta llena de opciones para dar forma a nuestro texto. Tenemos propiedades como:
color para cambiar el color;text-decoration para añadir o quitar subrayados; etext-transform para cambiar la capitalización del texto.Es como si estuviéramos en una tienda de sombreros, eligiendo la mejor pieza para expresar nuestra personalidad.
Las fuentes son para nuestro texto lo que la banda sonora es para una película; establecen el tono, enfatizan el ambiente y agregan una capa adicional de significado a nuestro mensaje. En CSS, podemos manipular la fuente de nuestro texto con algunas propiedades específicas:
font-family;font-size;font-weight; yfont-style.Además de las fuentes estándar que todos los navegadores conocen, también tenemos la capacidad de usar cualquier fuente que deseemos en nuestros proyectos web. Podemos explorar internet en busca de la fuente perfecta para nuestra aventura web. Y cuando la encontramos, podemos incorporarla a nuestro sitio con la ayuda de @font-face.
@font-face es una regla especial que nos permite importar fuentes desde archivos externos a nuestro CSS. Necesita cierta información para funcionar correctamente, como:
font-family);src); yfont-weight y font-style.@font-face {
font-family: 'MiFuentePersonalizada';
src: url('MiFuentePersonalizada.woff2') format('woff2'),
url('MiFuentePersonalizada.woff') format('woff');
font-weight: normal;
font-style: normal;
}Después de que la fuente se declara con @font-face, puede ser utilizada en todo nuestro CSS, como cualquier otra fuente.
h1 {
font-family: 'MiFuentePersonalizada', Arial, sans-serif;
}Ahora, con la capacidad de manipular e importar fuentes, tienes uno de los instrumentos más poderosos en la sinfonía que es el CSS. Cada palabra, cada frase, cada párrafo puede ahora bailar al ritmo de tu música.
Los efectos de texto en CSS son como los accesorios que añadimos a nuestro look. Con text-shadow, podemos añadir sombras a nuestro texto, o con text-overflow, podemos controlar cómo se mostrará el texto cuando sobrepase el límite de su caja. Es el toque final que da un brillo extra a nuestro trabajo.
Finalmente, tenemos el espaciado y la alineación, que son como la postura y la forma en que nos presentamos. Con line-height, text-align, letter-spacing y word-spacing, podemos controlar la distribución y la organización de nuestro texto, creando una lectura cómoda y agradable.
En este tema, exploramos cómo las propiedades CSS pueden transformar nuestro texto, ayudándolo a expresar exactamente lo que queremos. Recuerda: ¡en la moda y en CSS, cada detalle cuenta!
Los colores en CSS son como los efectos especiales en una película. Añaden vida, crean atmósfera e incluso pueden contar una historia. Entonces, ¿cómo podemos pintar nuestra pantalla digital?
Hay varias formas de especificar colores en CSS. Podemos usar nombres de colores predefinidos, como 'red' para rojo, 'blue' para azul, y así sucesivamente. También podemos utilizar códigos hexadecimales, RGB, RGBA, HSL y HSLA.
p {
color: red; /* nombre del color */
}
h1 {
color: #ff0000; /* hexadecimal */
}
div {
color: rgb(255, 0, 0); /* RGB */
}
span {
color: rgba(255, 0, 0, 0.5); /* RGBA, con transparencia */
}
header {
color: hsl(0, 100%, 50%); /* HSL */
}
footer {
color: hsla(0, 100%, 50%, 0.5); /* HSLA, con transparencia */
}El uso de colores sólidos en CSS es bastante simple. Para aplicar un color a un elemento, simplemente usa la propiedad color para el color del texto o la propiedad background-color para el color de fondo.
El CSS también permite la creación de degradados, que son transiciones suaves entre dos o más colores. Hay dos tipos de degradados que podemos crear:
Para crear un degradado lineal, usamos la función linear-gradient().
La transparencia se puede especificar en CSS usando el formato RGBA o HSLA para colores, o la propiedad opacity. La propiedad opacity aplica una transparencia al elemento completo, incluyendo todo su contenido.
Así como un pintor tiene un arco iris de colores a su disposición, también tenemos un espectro ilimitado de colores a nuestra disposición en CSS. Con colores y degradados, podemos crear diseños vibrantes, dramáticos o sutiles, y transmitir el tono exacto que queremos para nuestra aplicación.
Con CSS, somos capaces de estilizar virtualmente cualquier elemento en una página web, lo que nos permite crear designs visualmente atractivos y experiencias de usuario cautivadoras. Vamos a explorar cómo podemos estilizar algunos de los elementos más comunes en un sitio web: enlaces, listas, tablas y formularios.
Los enlaces son como portales a otras partes de tu sitio web o a otros sitios completamente diferentes. Con CSS, podemos estilizarlos para que se destaquen o se fusionen con el resto de nuestro design.
Las listas, ya sean ordenadas (<ol>) o desordenadas (<ul>), son elementos comunes en muchos sitios web. Podemos cambiar la apariencia de los marcadores de lista, el color del texto y mucho más.
Las tablas son herramientas poderosas para presentar información de manera organizada. Con CSS, podemos controlar la apariencia de cada parte de una tabla, desde el encabezado hasta las celdas individuales.
table {
width: 100%; /* Ancho de la tabla */
border-collapse: collapse; /* Une los bordes de las celdas */
}
th, td {
border: 1px solid #000000; /* Bordes de las celdas */
padding: 10px; /* Espaciado interno de las celdas */
}Los formularios son una parte esencial de muchos sitios web, permitiendo que los usuarios interactúen directamente con la página. Podemos estilizar cajas de texto, botones y otros elementos del formulario para crear una experiencia de usuario agradable.
input[type="text"], select {
width: 100%; /* Ancho del cuadro de texto y del menú desplegable */
padding: 12px 20px; /* Espaciado interno */
margin: 8px 0; /* Espaciado externo */
border: 1px solid #000000; /* Bordes */
}
input[type="submit"] {
background-color: #0000ff; /* Color de fondo del botón de envío */
color: white; /* Color del texto del botón de envío */
padding: 14px 20px; /* Espaciado interno */
border: none; /* Elimina los bordes */
cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
}Estilizar elementos es como elegir el vestuario adecuado para un personaje en una película. Cada elección de estilo puede afectar cómo el usuario percibe e interactúa con tu sitio. ¡Y recuerda, el límite es tu imaginación!
Las animaciones y transiciones son esenciales para dar vida a una página web. Ya sea para resaltar un botón, mostrar un cambio de estado o simplemente para brindar un poco de alegría al usuario con un efecto de animación genial.
Imagina que tienes una pelota y quieres que se mueva por la pantalla. Podríamos simplemente cambiar la posición de la pelota de un lugar a otro, pero eso sería muy abrupto. Para suavizar el cambio, usamos transiciones.
Una transición CSS es un cambio suave entre dos estados. Es como si estuviéramos diciendo: "Oye CSS, vamos a cambiar esta propiedad, pero hazlo de manera suave". Mira el ejemplo:
Acá estamos aumentando el ancho de la pelota cuando el usuario pasa el mouse sobre ella, pero estamos indicando que se haga de manera suave a lo largo de 2 segundos. Genial, ¿verdad?
Si las transiciones son para cambios simples, las animaciones con keyframes son para cambios más complejos. Digamos que queremos que la bola se mueva, cambie de color y luego vuelva a moverse y cambie de color nuevamente. Para esta tarea, necesitamos el poder de los keyframes.
Los keyframes nos permiten especificar una secuencia de estados, cada uno con sus propias propiedades y valores. Así es como funciona:
En este ejemplo, la bola se mueve hacia la derecha, cambia de color y luego regresa a su posición y color originales. Todo esto ocurre en un ciclo continuo de 4 segundos.
¿Y si queremos ir más allá? Podemos combinar transiciones y animaciones, utilizar efectos 3D, agregar retardos y mucho más. Es como un patio de recreo para desarrolladores front-end. Al final del día, todo se reduce a la creatividad y la experimentación. Así que no tengas miedo de probar cosas nuevas y divertirte.
Recuerda, no son solo las reglas y propiedades de CSS, sino cómo las utilizas para crear experiencias increíbles para los usuarios.
Y para descubrir consejos y trucos relacionados con las animaciones, echa un vistazo a este artículo de Mário Souto:
El posicionamiento de elementos es una de las partes más poderosas, pero también una de las más confusas de CSS. La propiedad position te permite controlar dónde y cómo se posicionan los elementos en la página. Puede tener los siguientes valores:
static: este es el valor por defecto. Los elementos se posicionan según el flujo normal del documento, es decir, uno después del otro, tal como aparecen en el HTML;relative: el elemento se posiciona en relación a su posición normal. Por ejemplo, si estableces top: 10px, el elemento se moverá 10 píxeles hacia abajo desde donde normalmente estaría;absolute: el elemento se posiciona en relación al elemento padre más cercano que no sea static. Si no hay tal elemento, se posicionará en relación al documento;fixed: el elemento se posiciona en relación a la ventana del navegador. Esto significa que siempre permanecerá en el mismo lugar, incluso si desplazas la página;sticky: este es un híbrido entre relative y fixed. El elemento se comporta como relative hasta que la ventana del navegador alcance un cierto punto de desplazamiento, momento en el que se comporta como fixed.Es importante recordar que las propiedades top, right, bottom y left solo funcionan cuando position es relative, absolute, fixed o sticky.
Es sumamente importante entender este contenido, y para ayudarte a hacerlo, traje especialmente para ti este artículo de Luan Alves que aborda este tema con más profundidad:
El posicionamiento de elementos puede ser complicado. Aquí tienes algunos consejos para evitar demasiado ensayo y error:
<div> y <h1>) ocupan todo el ancho disponible y forman una nueva línea, mientras que los elementos en línea (como <span> y <a>) solo ocupan el espacio necesario y no forman una nueva línea;relative con moderación: la posición relative puede ser útil, pero también puede causar confusión si se usa en exceso. Recuerda que relative mueve el elemento desde su posición normal, lo que puede afectar la posición de otros elementos;absolute: la posición absolute elimina el elemento del flujo normal del documento, lo que significa que no afecta la posición de otros elementos. Esto puede ser útil, pero también puede causar problemas si no se entiende bien;width, height, margin-top y margin-bottom, solo funcionan correctamente en elementos de bloque. Los elementos en línea, por otro lado, no respetan estas propiedades;En última instancia, el posicionamiento de elementos CSS es una combinación de comprensión teórica y práctica. Cuanto más experimentes, más intuitivo se volverá.
La propiedad display es una de las más importantes en CSS. Controla cómo se muestra un elemento e interactúa con los elementos a su alrededor. Aquí tienes una descripción general de los tipos más comunes de display.
Cuando defines display: block para un elemento, este ocupa todo el ancho disponible, formando una nueva línea. La altura y el ancho del elemento pueden ser controlados.
Los elementos de bloque incluyen:
<div>;<p>;<header>;<footer>;<section>,div {
display: block;
}Los elementos con display: inline no inician una nueva línea. Ellos ocupan solo el espacio necesario. No puedes definir ancho y alto para elementos en línea.
Ejemplos de elementos en línea incluyen:
<span>;<a>;<img loading="lazy">;span {
display: inline;
}inline-block es una combinación de inline y block. Los elementos con display: inline-block se muestran en línea, permitiendo que otros elementos estén al lado, pero también puedes definir el ancho y la altura, como un elemento de bloque. Esto proporciona más flexibilidad en el diseño, permitiéndote controlar tanto el espacio ocupado como las dimensiones del elemento.
div {
display: inline-block;
}display: none elimina completamente el elemento de la página. No ocupa espacio y es como si el elemento no existiera. Es diferente de visibility: hidden, que oculta el elemento pero aún reserva el espacio que ocupaba en la página.
Al usar display: none, el elemento se elimina del flujo del documento, sin afectar el layout ni las interacciones con otros elementos. Por otro lado, al usar visibility: hidden, el elemento sigue ocupando espacio y mantiene su posición relativa a los demás elementos en la página, aunque no sea visible.
Por lo tanto, es importante considerar la diferencia entre estas dos propiedades al decidir ocultar elementos en tu página.
div {
display: none;
}display: flex se utiliza para crear un layout flexible. Es una forma eficiente de alinear y distribuir espacio entre elementos en un contenedor, incluso cuando sus tamaños son desconocidos o dinámicos.
display: flex;flex-direction, que puede ser row, row-reverse, column o column-reverse;Ejemplo:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}En este ejemplo, el contenedor es el contenedor flex, donde justify-content centra los elementos a lo largo del eje principal y align-items los centra a lo largo del eje transversal. La propiedad flex: 1 define que los elementos tienen capacidad de crecimiento igual y ocuparán el espacio disponible de manera equitativa.
Flexbox es tan genial que incluso hay este artículo de Ju Amoesei para que puedas aprender más sobre ello:
[!TIP]
CSS Grid es un sistema bidimensional de layout que permite controlar la posición de los elementos en filas y columnas. Es ideal para crear layouts complejos y receptivos.
display: grid;Ejemplo de código para CSS Grid:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
grid-column: span 2;
}Estos son solo los valores más comunes para display. Hay otros, como table, list-item y contents, pero se usan con menos frecuencia. Lo importante es entender cómo display afecta el flujo del documento y la posición de los elementos. Tan importante que yo, este desarrollador con boina que casi te gusta, traje especialmente para ti los artículos de Matheus Castiglioni y Mário Souto:
Vamos a embarcarnos en una aventura a través del tiempo, trayendo a todos los navegadores al mismo punto de partida. Imagina la siguiente situación: trabajas duro creando un hermoso design en CSS, pero cuando abres tu sitio web en diferentes navegadores, cada uno parece haber decidido hacer una fiesta de disfraces sin invitarte. Algunos elementos parecen estar vestidos para el baile del siglo pasado, mientras que otros muestran una actitud futurista. Esto no es nada divertido, ¿verdad?
Este es el papel del Reset CSS: ser la máquina del tiempo para tu navegador. El Reset CSS es una técnica que, como su nombre lo sugiere, restablece las propiedades de estilo para garantizar que todos los navegadores comiencen con las mismas configuraciones predeterminadas. Esto es similar a "borrar la pizarra" o "reiniciar el temporizador" antes de una gran carrera.
Tiene sentido, ¿verdad? Pero aquí tienes un consejo de oro: aunque es muy útil, el Reset CSS debe usarse con moderación y comprensión. Un exceso de reset puede terminar provocando el mismo problema que estamos tratando de evitar: estilos inconsistentes y confusos. Recuerda, el equilibrio es la clave para abrir el arca del éxito del CSS.
¿Listo para continuar en esta expedición? Entonces, echa un vistazo a este artículo que profundiza en este tema:
Las variables CSS, o propiedades personalizadas, son herramientas extremadamente útiles en nuestro arsenal CSS. Nos permiten definir valores que pueden ser reutilizados en todo nuestro archivo CSS, aumentando la eficiencia y la mantenibilidad de nuestro código.
:root {
--color-principal: #ff6347;
}
body {
background-color: var(--color-principal);
}En este ejemplo, definimos una variable llamada --color-principal y luego la utilizamos como valor para la propiedad background-color del body. ¿Genial, verdad?
Los pseudo-elementos y pseudo-clases de CSS son como ninjas secretos que nos ayudan a seleccionar y estilizar partes específicas de nuestros documentos HTML de maneras que normalmente no podríamos.
Los pseudo-elementos, como ::before y ::after, permiten estilizar partes específicas de un elemento. Por ejemplo, podemos agregar contenido antes o después de un elemento:
p::before {
content: "Nota: ";
color: blue;
}Las pseudo-clases, como hover y :focus, permiten estilizar un elemento según su estado. Por ejemplo, podemos cambiar el color de un enlace cuando el cursor pasa sobre él:
a:hover {
color: red;
}La arquitectura CSS implica organizar y estructurar tu CSS de manera que facilite el mantenimiento y el crecimiento de tu proyecto. Hay varias metodologías para guiar la arquitectura de tu CSS, incluyendo:
Por ejemplo, BEM (Block Element Modifier) es una metodología que recomienda una forma específica de nombrar clases para ayudar a que tu CSS sea más claro y fácil de entender.
/* Bloque */
.navegacion {}
/* Elemento */
.navegacion__enlace {}
/* Modificador */
.navegacion__enlace--activo {}Ese estándar es tan asombroso que puedes obtener más información al respecto en este artículo de Mário Souto:
Cada una de estas técnicas tiene sus propias ventajas y puede adaptarse mejor a diferentes tipos de proyectos, así que vale la pena explorar cada una de ellas para ver cuál se adapta mejor a tus necesidades.
Mantener una buena arquitectura CSS es como mantener un templo antiguo: requiere una atención cuidadosa a los detalles, una buena comprensión de los cimientos y el cuidado de evitar que todo se convierta en un montón de ruinas. Pero, cuando se hace correctamente, puede ser una obra de arte duradera que resistirá la prueba del tiempo.
Una buena organización del código es esencial para el desarrollo eficaz y la futura mantenibilidad. Aquí tienes algunos consejos para mantener tu código CSS organizado:
Agrupa las reglas que tienen propiedades en común para evitar repeticiones. Además, ordenar tus declaraciones alfabéticamente o por tipo de propiedad puede facilitar la búsqueda de declaraciones específicas.
/* Malo */
h1 {
color: #333; /* Color */
font-size: 2em; /* Tamaño de fuente */
}
h2 {
font-size: 1.5em; /* Tamaño de fuente */
color: #333; /* Color */
}
/* Bueno */
h1, h2 {
color: #333; /* Color */
}
h1 {
font-size:2em;
}
h2 {
font-size: 1.5em;
}Especialmente en archivos CSS más grandes, los comentarios pueden ayudar a aclarar la función de una sección de código.
La indentación ayuda a visualizar la estructura de tu código, haciéndolo más legible.
Es crucial tener en cuenta que seguir algún tipo de organización es sumamente importante. Y, por supuesto, no te dejaré solo. Este artículo de Yuri Padilha te ayudará a profundizar más en este tema:
Elegir nombres de clases e IDs significativos puede marcar una gran diferencia en la legibilidad y mantenibilidad de tu código. Aquí tienes algunos consejos para la nomenclatura:
Los nombres de las clases e IDs deben describir lo que hace el elemento o el contenido que contiene, no su apariencia.
/* Malo */
.texto-azul {
cor: blue;
}
/* Bueno */
.texto-alerta {
cor: blue;
}El uso de guiones para separar palabras en nombres de clases e IDs es más legible y accesible.
/* Malo */
.textoAlerta {
tamanodelafuente: 1.3em;
}
/* Bueno */
.texto-alerta {
tamano-de-la-fuente: 1.3em;
}Los preprocesadores CSS, como Sass, Less y Stylus, permiten escribir CSS más limpio y reutilizable con características avanzadas como variables, mixins, anidación de reglas y funciones.
Las variables permiten reutilizar valores específicos en todo tu código CSS. Esto es útil para colores, tamaños de fuente, espaciado y cualquier otro valor que uses repetidamente.
$color-primaria: #333;
h1 {
color: $color-primaria;
}Los mixins permiten definir estilos que pueden reutilizarse en todo el CSS sin necesidad de volver a codificarlos o copiarlos y pegarlos.
@mixin resetear-lista {
margen: 0;
relleno: 0;
estilo-de-lista: ninguno;
}
ul {
@include resetear-lista;
}Los preprocesadores CSS te permiten anidar reglas, lo que es una forma natural de organizar tus reglas y reducir la repetición.
.nav {
ul {
margen: 0;
relleno: 0;
}
li {
display: inline-block; /* Mostrar en línea */
margen: 0 1em;
}
}
Agregar CSS a páginas HTML es como darle a nuestro tesoro arqueológico un barniz, haciéndolo más atractivo para el público. Hay tres formas principales de hacerlo:
Agregar CSS en línea implica colocar el CSS directamente en los atributos de estilo de los elementos HTML. El atributo de estilo contiene declaraciones CSS que afectan al elemento específico en el que se encuentra el atributo.
<p style="color: red;">Este es un párrafo con CSS en línea.</p>Este método es simple y no requiere la creación de archivos CSS separados, pero puede ser difícil de mantener en proyectos más grandes y puede volverse confuso si tenemos muchos estilos diferentes para un elemento.
El CSS interno se agrega dentro de una etiqueta <style> en el encabezado (dentro de la etiqueta <head>) del documento HTML. Esto nos permite agregar múltiples reglas CSS que se aplican a todo el documento.
<head>
<style>
p {
color: blue;
}
</style>
</head>El CSS interno es más fácil de manejar que el CSS en línea, ya que mantiene todo el CSS en un solo lugar. Sin embargo, aún puede ser difícil de mantener en proyectos más grandes, ya que todos los estilos están en un solo archivo HTML.
Finalmente, agregar CSS externo implica crear un archivo CSS separado que luego se vincula al documento HTML usando una etiqueta. Este es el método más común y preferido para agregar CSS, especialmente en proyectos más grandes.
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>En este caso, todas nuestras reglas CSS estarían dentro del archivo estilos.css. La gran ventaja de este método es que el archivo CSS puede ser reutilizado en varias páginas, manteniendo la consistencia de los estilos y facilitando el mantenimiento.
Elegir el método correcto para agregar CSS depende de la situación. A veces, un ajuste rápido con CSS en línea es todo lo que necesitamos. En otros casos, un plan más organizado con CSS externo es la elección correcta. Lo importante es saber cuándo usar cada método y estar listo para adaptarse según sea necesario.
[!TIP]
Bootstrap es uno de los frameworks CSS más populares y ampliamente utilizados. Ofrece una gran variedad de componentes reutilizables, como botones, barras de navegación, modales, etc. Además, Bootstrap cuenta con un potente sistema de cuadrícula para crear diseños receptivos con facilidad.
<div class="container">
<div class="row">
<div class="col-sm">
Una columna
</div>
<div class="col-sm">
Una columna
</div>
<div class="col-sm">
Una columna
</div>
</div>
</div>
Foundation es otro framework CSS sólido que permite el desarrollo rápido y fácil de sitios web y aplicaciones receptivas. Viene con un conjunto de herramientas HTML, CSS y JavaScript que cubren la mayoría de los casos de uso del desarrollo web.
<div class="grid-x grid-margin-x">
<div class="cell small-6">Mitad de ancho en dispositivos pequeños</div>
<div class="cell small-6">Mitad de ancho en dispositivos pequeños</div>
</div>Tailwind CSS es un framework CSS de bajo nivel que permite a los desarrolladores construir diseños personalizados sin salir del HTML. Ofrece utilidades de bajo nivel que le permiten construir desde cero, proporcionando un alto grado de personalización.
<div class="flex items-center justify-center h-screen">
<h1 class="text-2xl font-bold text-blue-500">¡Hola mundo!</h1>
</div>Bulma es un framework CSS ligero y receptivo basado en Flexbox. Ofrece componentes reutilizables y una sintaxis fácil de entender que permite a los desarrolladores crear interfaces de usuario rápidas y atractivas.
<section class="section">
<div class="container">
<h1 class="title">
¡Hola Mundo
</h1>
<p class="subtitle">
Mi primer sitio web con <strong>Bulma</strong>!
</p>
</div>
</section>Cada uno de estos frameworks tiene sus propias ventajas, y la elección depende del tipo de proyecto en el que estés trabajando, tu familiaridad con el framework y tus preferencias personales.
Como cualquier tecnología compleja, CSS tiene una curva de aprendizaje que puede parecer intimidante para los principiantes.
Descubrimos que un diseño en CSS está compuesto por varios estilos. Es esencial comprender cómo se relacionan estos estilos y cómo se pueden combinar para crear el diseño deseado.
Una cosa que puede ser desafiante de entender es la forma en que CSS manipula la presentación de los elementos HTML. En lugar de utilizar métodos simples y directos, CSS presenta un enfoque más abstracto y artístico, utilizando "selectores", "propiedades" y "valores" para controlar la apariencia de los elementos en tu página. Esto puede parecer un poco difícil de entender al principio, pero es fundamental para el funcionamiento de CSS.
Además, CSS tiene una sintaxis específica que puede llevar tiempo acostumbrarse. Utiliza una combinación de identificadores de selectores y propiedades para estilizar los elementos, lo que puede ser confuso para aquellos que no están familiarizados con este enfoque.
La curva de aprendizaje de CSS puede ser un desafío para los principiantes, pero con el tiempo y la práctica, es posible dominar este lenguaje y crear diseños web increíbles con él. Es importante tener paciencia y seguir aprendiendo y experimentando para convertirte en un desarrollador CSS experimentado.
[!TIP]
[¿Es necesario que vaya a la universidad para aprender programacion?]
Sigue aprendiendo sobre temas como:
En este artículo, hemos tenido una visión general y nos sumergimos en el maravilloso mundo del CSS. Aprender a estilizar elementos es una excelente manera de comenzar a desarrollar aplicaciones para la web.
Es importante que ya tengas conocimientos de HTML para facilitar la comprensión.
¡Y vamos a lanzar un desafío! Si te ha gustado este artículo, comparte en las redes sociales lo que has aprendido con la etiqueta #AprendiendoEnElBlogDeAlura.
Si quieres aprender más sobre CSS, puedes acceder a todos los cursos de CSS de Alura, donde podrás entender los fundamentos y los primeros pasos, desarrollar un portafolio de proyectos y, por supuesto, técnicas y habilidades intermedias y avanzadas con esta tecnología.
Este artículo fue traducido y adaptado por Ingrid Silva
Vinicios es un ingeniero de software involucrado en la arquitectura, design e implementación de microservicios, micro frontends y sistemas distribuidos. Tiene una amplia experiencia en aplicaciones, integración y arquitectura corporativa. Se graduó como Ingeniero de Software en la UNESA y como Arquitecto de Software en la PUC Minas.
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Puedes realizar el pago de tus planes en moneda local en los siguientes países:
| País | | | | | | | |
|---|---|---|---|---|---|---|---|
| Plan Semestral |
487.37
BOB |
68314.51
CLP |
305385.67
COP |
65.90
USD |
265.11
PEN |
1424.44
MXN |
2977.87
UYU |
| Plan Anual |
738.82
BOB |
103560.24
CLP |
462944.29
COP |
99.90
USD |
401.89
PEN |
2159.35
MXN |
4514.26
UYU |
Acceso a todos
los cursos
Estudia las 24 horas,
dónde y cuándo quieras
Nuevos cursos
cada semana