EBAC Logotipo
Menú

3.5 Conoce CSS: Sintaxis, selectores y propiedades

"Comprender la estructura básica de una regla CSS: selector, propiedad y valor. Aplicar estilos básicos a elementos HTML mediante selectores."

1. Descubre qué es CSS y para qué sirve

CSS significa Hojas de estilo en cascada. De sus iniciales en inglés Cascading Style Sheets


  1. Se usa junto a HTML para definir el aspecto visual de los elementos.
  2. Sin CSS, una página es básicamente texto plano ligeramente enriquecido html (Negritas, itálicas, subrayado)
  3. CSS le da vida a los elementos: desde títulos multicolor hasta botones interactivos.


2. Entiende la estructura de una regla CSS

Las reglas se escriben como bloques de código.

Y siguen la estructura: selector, propiedad, y valor, separados por llaves y puntos y coma.



p {


  color: red;


}
  1. Selector: p → indica a qué elemento se aplicará el estilo.
  2. Propiedad: color → qué parte del estilo cambiarás.
  3. Valor: red → cómo quieres que se vea.


Esta regla hace que todos los párrafos del documento tengan texto rojo.


3. Identifica el rol del selector en CSS

Los selectores pueden ser simples o compuestos y apuntan a uno o varios elementos del HTML y existen diferentes tipos

  1. Etiquetas: p, div, h1
  2. Clases: .tarea
  3. ID: #urgente 




.tarea-terminada {


  background-color: green;


  color: white;


}

En este ejemplo, todos los elementos con class="tarea-terminada" tendrán fondo verde con letras blancas.


Un buen uso de selectores es clave para mantener estilos organizados.

4. Aplica propiedades y valores a elementos

  1. Una propiedad representa lo que se quiere modificar: color, tamaño, alineación, espaciado, borde, etc.
  2. El valor define la nueva apariencia de esa propiedad. (Pueden ser palabras reservadas, números con unidades o diferentes formatos como hexadecimales, rgb o hsl)


h1 {


  font-size: 24px;


  color: #333;


}

Aquí cambiamos el tamaño de fuente y el color de un encabezado.


Conocer propiedades comunes te permitirá lograr grandes cambios rápidamente.


5. Usa selectores de etiquetas, clases e ID

Cada uno tiene un propósito y una prioridad específica en CSS.

  1. Selector de etiqueta: se aplica a todos los elementos base del documento (como todos los párrafos p).
  2. Selector de clase: usa . y se puede aplicar a varios elementos (.tarea).
  3. Selector de ID: usa # y como su nombre lo indica, tiene que ser un identificador único en el documento (#principal).


.tarea {


  padding: 10px;


  border-bottom: 1px solid gray;


}

Aquí se define un estilo para todos los elementos con clase .tarea.


Elegir entre clase o ID depende de si quieres reutilizar el estilo o no.

6. Combina selectores para mayor precisión

Puedes combinar selectores para aplicar estilos visuales con más precisión a elementos, esto permite controlar mejor el diseño sin duplicar código.

Ejemplos:

  1. div p → todos los párrafos dentro de un div
  2. .tarea.urgente → elementos con ambas clases
  3. ul > li → solo los hijos directos


#urgentes .tarea {


  color: red;


}

Esta regla aplica solo a tareas que estén dentro del elemento con ID #urgentes

7. Agrupa reglas con múltiples selectores

  1. Agrupar selectores te ahorra líneas de código.
  2. Se definen separando selectores con comas
  3. Con esta definición varios selectores comparten las mismas propiedades.


h1, main {


  background-color: #f0f0f0;


  margin-bottom: 20px;


}

Esta regla aplica el mismo fondo y margen tanto al título principal como al contenedor principal main.


Es útil para unificar estilos visuales en secciones distintas, ahorrando tiempo y manteniendo el código más limpio y ordenado.

8. Organiza tu CSS dentro o fuera del HTML

Hay varias formas de usar CSS según el tamaño y la complejidad del proyecto. Algunas son prácticas para pruebas, otras ideales para producción.

  1. Inline: en el atributo style, solo útil para casos muy puntuales.
<p style="color:red;">Texto</p>
  1. Interno: dentro de una etiqueta <style> en el <head> del HTML.
  2. Externo: en un archivo .css, ideal para proyectos ordenados.
<link rel="stylesheet" href="estilos.css">
En proyectos reales, se recomienda separar HTML y CSS para mantener claridad.