Propiedades CSS: Descubre los más usados y ejemplo!!

Las propiedades CSS son elementos que determinan cómo se visualiza y se comporta el contenido en una página web HTML. Desde el color y el tamaño hasta el diseño y la animación, estas propiedades son esenciales para dar estilo a elementos como imágenes y texto. En este artículo, exploraremos qué son las propiedades CSS, para qué sirven y algunos de los tipos más utilizados, con ejemplos prácticos que ilustran su aplicación en el diseño web.

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

1. ¿Qué son las propiedades CSS?

En CSS, las propiedades son los atributos que se utilizan para controlar el aspecto y el comportamiento de las etiquetas HTML en una página web. Cada propiedad define una característica o estilo CSS específico que se puede aplicar a dicha etiqueta, como su tamaño, color, posición, tipo de fuente, margen, relleno, etc.

1.1. Sintaxis de una propiedad CSS:

Cada propiedad está compuesta por un nombre que identifica la característica que se desea ajustar, y un valor que determina cómo se aplicará esa característica al elemento.

Y en muchos casos, el valor puede incluir una unidad de medida que especifica la magnitud de la característica, aunque esta última es opcional dependiendo de la propiedad.

Si deseas, sigue el sigue el enlace para conocer mas sobre la sintaxis CSS correcta.

Como podemos ver en la imagen, antes de insertar la propiedad con su valor y unidad de medida para aplicar estilos, debemos ingresar el selector al cual le daremos dichos estilos CSS. De todas maneras a continuación dejamos una dedición de cada uno de estos conceptos:

Selector:

Un selector en CSS es un patrón que se utiliza para seleccionar los elementos HTML a los que se les aplicarán estilos. Puede ser una etiqueta HTML, una clase, un ID, un atributo, una pseudo-clase o un pseudo-elemento.

Propiedad:

Una propiedad CSS es un atributo que define características específicas del estilo de un elemento HTML. Cada propiedad tiene un nombre que identifica la característica que se desea ajustar, como color, tamaño de fuente, margen, etc.

Valor:

Un valor CSS es la parte de una regla CSS que especifica cómo se aplicará una propiedad a un elemento. Los valores pueden ser palabras clave, números, colores, imágenes o funciones, dependiendo de la propiedad.

Unidad de medida:

En CSS, una unidad de medida se utiliza para expresar valores numéricos, como el tamaño de fuente, el ancho, el alto, el margen, etc. Las unidades pueden ser relativas (como porcentajes, em, rem) o absolutas (como píxeles, centímetros, pulgadas).

1.2. ¿Qué tipos de valores pueden tomar las propiedades CSS?

1. VALORES NUMÉRICOS:
   • Se utilizan para definir valores numéricos, como el tamaño de fuente, el ancho de los bordes o el margen entre elementos.
2. VALORES DE COLOR:
   • Se utilizan para definir el color de elementos, como el texto, el fondo o los bordes. Se pueden especificar utilizando nombres de colores (por ejemplo, «rojo», «azul»), valores hexadecimales (por ejemplo, «#FF0000») o funciones CSS como rgb() y rgba().
3. VALORES DE PALABRA CLAVE:
   • Se utilizan para definir valores predefinidos para ciertas propiedades, como el tipo de fuente, el estilo de borde o el peso del texto.
4. VALORES DE FUNCIÓN:
   • Se utilizan para realizar cálculos o manipulaciones de valores. Algunas funciones CSS comunes son calc(), url() y rgba().

1.3. ¿Qué unidades de medidas puedo utilizar al establecer las propiedades CSS?

1. UNIDADES ABSOLUTAS:
   • Las unidades absolutas definen un tamaño o valor fijo, independientemente del contexto del elemento. Algunas unidades absolutas comunes son píxeles (px), centímetros (cm) y pulgadas (in).
2. UNIDADES RELATIVAS:
   • Las unidades relativas definen un tamaño o valor en relación con otros elementos o el tamaño de la ventana gráfica. Algunas unidades relativas comunes son porcentajes (%) y em (em).
3. UNIDADES FLEXIBLES:
   • Las unidades flexibles, como vw y vh, se basan en el tamaño de la ventana gráfica y permiten crear diseños que se adaptan a diferentes tamaños de pantalla.

Ejemplo de uso de propiedades CSS con sus componentes

2. ¿Cuáles son las propiedades CSS más usados?

Las propiedades CSS más utilizadas varían dependiendo de las necesidades y el diseño específico de cada proyecto, pero algunas de las propiedades más comunes y ampliamente utilizadas incluyen:

2.1. Propiedades CSS del modelo de caja:

El modelo de caja CSS incluye propiedades que controlan el tamaño y el espacio alrededor de un elemento. Los más comunes son:

PROPIEDADES	DEFINICIÓN	VALORES MAS USADOS
width	Ancho del contenido del elemento	auto, %, px, em, rem, vw, vh, fit-content, min-content
height	Altura del contenido del elemento	auto, %, px, em, rem, vw, vh, fit-content, min-content
padding	Espacio entre el contenido y el borde del elemento	0, %, px, em, rem
margin	Espacio entre el borde del elemento y otros elementos	auto, 0, %, px, em, rem
border	Estilo, grosor y color del borde del elemento	none, solid, dashed, dotted, double, groove, ridge, inset, outset, %, px
border-radius	Redondez de los bordes del elemento	0, %, px

2.2. Propiedades CSS de texto:

Aquí tienes el cuadro con las propiedades de texto y los valores más comunes para cada una:

PROPIEDADES	DEFINICIÓN	VALORES MÁS USADOS
color	Color del texto	black, #000, red,blue, rgb(0, 0, 0), rgba(0, 0, 0, 1), hsl(0, 0%, 0%)
font-family	Fuente del texto	sans-serif, serif, monospace, cursive, Arial, Times New Roman
font-size	Tamaño de la fuente	12px, 1rem, 100%, medium, large
font-weight	Grosor de la fuente	normal, bold, 600, 700
text-align	Alineación del texto	left, right, center, justify
line-height	Altura de línea	normal, 1.5, 120%, 1.2em
text-decoration	Decoración del texto	none, underline, line-through, overline
letter-spacing	Espaciado entre letras	normal, 1px, 0.2em, -1px

2.3. Propiedades CSS de imagenes:

Aquí tienes el cuadro con las propiedades de imagenes y los valores más comunes para cada una:

PROPIEDADES	DEFINICIÓN	VALORES MAS USADOS
width	Ancho de la imagen	auto, %, px, em, rem, vw, vh, fit-content, min-content
height	Altura de la imagen	auto, %, px, em, rem, vw, vh, fit-content, min-content
max-width	Ancho máximo de la imagen	none, %, px, em, rem, vw, vh
max-height	Altura máxima de la imagen	none, %, px, em, rem, vw, vh
object-fit	Controla cómo se ajusta el contenido de la imagen al contenedor	fill, contain, cover, none, scale-down
object-position	Especifica la posición inicial del contenido de la imagen	left, center, right, top, bottom, center center, valores en px o %
background-image	Especifica la imagen de fondo de un elemento	URL de la imagen

2.4. Propiedades CSS de fondo:

Aquí tienes el cuadro con las propiedades de fondo y los valores más comunes para cada una:

PROPIEDADES	DEFINICIÓN	VALORES MÁS USADOS
background-color	Color de fondo del elemento	white, #FFFFFF, rgb(255, 255, 255), rgba(255, 255, 255, 1)
background-image	Imagen de fondo del elemento	url("imagen.jpg"), none
background-repeat	Repetición de la imagen de fondo	repeat, no-repeat, repeat-x, repeat-y
background-position	Posición de la imagen de fondo	center, left, top, 50% 50%
background-size	Tamaño de la imagen de fondo	cover, contain, auto, 100% auto
background-attachment	Desplazamiento de la imagen de fondo	scroll, fixed, local

2.5. Propiedades CSS de diseño y disposición:

Aquí tienes el cuadro con las propiedades de diseño y disposición, junto con los valores más comunes para cada una:

PROPIEDADES	DEFINICIÓN	VALORES MÁS USADOS
display	Tipo de visualización del elemento	block, inline, inline-block, flex, grid, none
position	Tipo de posicionamiento del elemento	static, relative, absolute, fixed, sticky
float	Desplazamiento del elemento	left, right, none
clear	Limpiar elementos flotantes	left, right, both, none
overflow	Control de desbordamiento de contenido	visible, hidden, scroll, auto
z-index	Posición en el eje z	Números enteros

2.6. Propiedades CSS de animación y transformación:

Aquí tienes el cuadro con las propiedades de animación y transformación, junto con los valores más comunes para cada una:

PROPIEDADES	DEFINICIÓN	VALORES MÁS USADOS
animation	Define una animación CSS	animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state
transform	Aplica transformaciones 2D y 3D a un elemento	translate(), rotate(), scale(), skew(), matrix(), translateX(), translateY(), rotateX(), rotateY(), scaleX(), scaleY(), perspective(), rotate3d(), scale3d(), translate3d()

2.7. Propiedades CSS de borde y borde redondeado:

Aquí tienes el cuadro con las propiedades de borde y borde redondeado, junto con los valores más comunes para cada propiedad:

PROPIEDADES	DEFINICIÓN	VALORES MÁS USADOS
border-width	Define el ancho del borde de un elemento.	thin, medium, thick, valores en px, em, rem, %
border-style	Especifica el estilo del borde.	none, solid, dashed, dotted, double, groove, ridge, inset, outset
border-color	Define el color del borde.	Valores de color en diferentes formatos: hex, rgb, rgba, hsl, hsla, nombres de colores
border-radius	Define el radio de los bordes para crear esquinas redondeadas.	Valores en px, em, rem, %

2.8. Propiedades CSS de pseudoclases:

Aquí tienes el cuadro con las propiedades de pseudoclases CSS, junto con los valores más comunes para cada una:

PROPIEDADES	DEFINICIÓN	VALORES MÁS USADOS
:hover	Aplica estilos cuando el cursor se sitúa sobre el elemento	Dependiente de los estilos aplicados
:active	Aplica estilos cuando el elemento está activo (haciendo clic)	Dependiente de los estilos aplicados
:focus	Aplica estilos cuando el elemento tiene el foco de entrada	Dependiente de los estilos aplicados
:visited	Aplica estilos a los enlaces visitados	Dependiente de los estilos aplicados
:nth-child()	Aplica estilos al elemento que es el n-ésimo hijo de su padre	even, odd, 3n+1, etc.
:nth-of-type()	Aplica estilos al elemento que es el n-ésimo del tipo de sus hermanos	even, odd, 3n+1, etc.
:first-child	Aplica estilos al primer hijo de su padre	Dependiente de los estilos aplicados
:last-child	Aplica estilos al último hijo de su padre	Dependiente de los estilos aplicados
:nth-last-child()	Aplica estilos al elemento que es el n-ésimo hijo, comenzando desde el último hijo	even, odd, 3n+1, etc.

2.9. Propiedades CSS de pseudoelementos :

Aquí tienes el cuadro con las propiedades de pseudoelementos CSS y los valores más comunes para cada uno:

PROPIEDADES	DEFINICIÓN	VALORES MÁS USADOS
::before	Inserta contenido antes del contenido del elemento	Dependiente de los estilos aplicados
::after	Inserta contenido después del contenido del elemento	Dependiente de los estilos aplicados
::first-line	Aplica estilos a la primera línea de texto en un elemento	Dependiente de los estilos aplicados
::first-letter	Aplica estilos al primer carácter de un elemento	Dependiente de los estilos aplicados
::selection	Aplica estilos a la parte seleccionada de un elemento	Dependiente de los estilos aplicados

2.10. Unidades de medidas CSS:

Como habrás notado en varias de las tablas de los puntos anteriores, en la columna de valores muchas veces aparecen reglas que están relacionadas mas bien a unidades de medidas.

Por eso, a continuación dejamos una tabla con algunas de estas unidades de medidas CSS mas comunes:

Unidad	Descripción
px	Unidad de medida fija, representa un punto en la pantalla.
%	Representa un porcentaje del tamaño del contenedor padre.
em	Basada en el tamaño de fuente del elemento, útil para diseños escalables.
rem	Similar a em pero basada en el tamaño de fuente del elemento raíz.
vw	Porcentaje del ancho del viewport (ventana del navegador).
vh	Porcentaje de la altura del viewport.

3. Consejos para un buen manejo de las propiedades CSS.

La experimentación y práctica son fundamentales para dominar CSS. Aquí hay algunas formas de hacerlo:

1. Crea proyectos pequeños:

Comienza con proyectos simples, como crear una página de inicio básica, un menú de navegación o una galería de imágenes. A medida que te sientas más cómodo, puedes aumentar la complejidad de tus proyectos.

2. Modifica plantillas existentes:

Utiliza plantillas o diseños preexistentes y realiza modificaciones en ellos. Esto te ayudará a entender cómo se estructuran las hojas de estilo CSS y cómo puedes personalizarlas según tus necesidades.

3. Experimenta con propiedades y valores:

Prueba diferentes propiedades CSS y sus valores para ver cómo afectan a tus elementos HTML. Por ejemplo, cambia los colores, tamaños, márgenes, padding, alineaciones, etc. Observa cómo estos cambios impactan en la apariencia y disposición de tus elementos.

4. Utiliza herramientas de inspección del navegador:

Las herramientas de inspección del navegador, como las que ofrecen Chrome DevTools o Firefox Developer Tools, son excelentes para depurar y ajustar tus estilos CSS. Puedes editar tus estilos en tiempo real y ver los cambios instantáneamente en la página.

5. Recrea diseños existentes:

Intenta recrear diseños que encuentres en la web. Esto te ayudará a comprender mejor cómo se logran ciertos efectos y diseños utilizando CSS.

6. Practica regularmente:

La práctica regular es clave para mejorar tus habilidades en CSS. Dedica tiempo a practicar y experimentar con diferentes conceptos y técnicas.

Al practicar y experimentar con CSS de manera regular, desarrollarás una comprensión más sólida de cómo funciona y podrás crear diseños web más efectivos y atractivos.

4. Ejemplos y aplicaciones de las propiedades CSS:

4.1. Ejemplos de propiedades CSS del modelo de caja:

• Elementos HTML comunes a los cuales se pueden aplicar estas propiedades son: div, section, article, header, footer, aside, nav, ul, ol, li, p, h1, h2, h3, h4, h5, h6, span, img, table, tr, td, form, input, button, entre otros.
• Aplicación: Estas propiedades se utilizan para controlar el tamaño, la posición y el espacio alrededor de prácticamente cualquier elemento HTML, definiendo su estructura y apariencia en la página.

EJEMPLO:

4.2. Ejemplos propiedades CSS de texto:

• Elementos HTML comunes a los cuales se pueden aplicar estas propiedades son:: p, h1, h2, h3, h4, h5, h6, span, a, li, ul, ol, entre otros elementos que contengan texto.
• Aplicación: Permiten modificar la apariencia del texto, como el tipo de letra, el tamaño, el color, la alineación, el espaciado, la decoración, el peso y otras características visuales.

EJEMPLO:

4.3. Ejemplos propiedades CSS de imágenes:

• Elemento HTML principal: img.
• Aplicación: Controlan el tamaño, la posición, la alineación, el borde, el margen, la opacidad, el ajuste dentro del contenedor y otros aspectos visuales de las imágenes en la página.

EJEMPLO:

4.4. Ejemplos propiedades CSS de fondo:

• Elementos HTML comunes a los cuales se pueden aplicar estas propiedades son:: div, section, article, header, footer, aside, nav, table, tr, td, entre otros elementos que tengan un fondo.
• Aplicación: Permiten definir el color, la imagen, el degradado o el patrón que se usará como fondo para un elemento, además de su repetición, posición y fijación.

EJEMPLO:

4.5. Ejemplos propiedades CSS de diseño y disposición:

• Elementos HTML comunes a los cuales se pueden aplicar estas propiedades son:: div, section, article, header, footer, aside, nav, ul, ol, li, table, tr, td, entre otros elementos que se utilizan para estructurar el contenido.
• Aplicación: Controlan la forma en que los elementos se posicionan y distribuyen en la página, incluyendo la creación de diseños en cuadrícula, columnas, flexbox, floats, posicionamiento absoluto y relativo, entre otras técnicas.

EJEMPLO:

4.6. Ejemplos propiedades CSS de animación y transformación:

• Elementos HTML comunes a los cuales se pueden aplicar estas propiedades son:: En principio, cualquier elemento HTML puede ser animado o transformado.
• Aplicación: Permiten crear animaciones y efectos visuales dinámicos sobre los elementos, como movimientos, cambios de opacidad, transformaciones geométricas, transiciones entre estados y otros efectos interactivos.

EJEMPLO:

4.7. Ejemplos propiedades CSS de borde y borde redondeado:

• Elementos HTML comunes a los cuales se pueden aplicar estas propiedades son:: div, section, article, header, footer, aside, nav, ul, ol, li, table, tr, td, img, form, input, button, entre otros.
• Aplicación: Definen el estilo del borde de los elementos, incluyendo su grosor, color, estilo (sólido, punteado, etc.), redondeado de esquinas y otros aspectos visuales.

EJEMPLO:

4.8. Ejemplos propiedades CSS de pseudoclases:

• Elementos HTML comunes a los cuales se pueden aplicar estas propiedades son:: Depende de la pseudoclase utilizada. Se aplican a elementos específicos en función de su estado o interacción, como :hover, :focus, :active, :visited, :link, :first-child, :last-child, entre otras.
• Aplicación: Permiten modificar el estilo de un elemento en base a diferentes condiciones, como cuando el cursor pasa sobre él, recibe el foco, está activo, ha sido visitado, es el primer o último hijo, etc.

EJEMPLO:

4.9. Ejemplos propiedades CSS de pseudoelementos:

• Elementos HTML comunes a los cuales se pueden aplicar estas propiedades son:: No se aplican directamente a elementos HTML específicos, sino que crean nuevos elementos ficticios asociados a elementos existentes. Las más comunes son ::before y ::after.
• Aplicación: Permiten generar contenido adicional antes o después de un elemento, como viñetas decorativas, iconos, barras de progreso, entre otros elementos visuales que no existen en el HTML original.

EJEMPLO:

Recuerda que estas son solo generalidades. La aplicación específica de estas propiedades CSS dependerá del contexto, el diseño y la funcionalidad deseada para cada elemento y página web.

PREGUNTAS FRECUENTES Y RESUMEN