Curso CSS

CSS
CSS
Actualizado: 30/06/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

Descripción del curso CSS

CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación de documentos HTML. Permite controlar el aspecto visual de las páginas web, separando el contenido de su presentación y facilitando el mantenimiento y la escalabilidad del diseño.

¿Qué es CSS?

CSS define cómo se muestran los elementos HTML en la pantalla, en papel o en otros medios. Proporciona herramientas para aplicar estilos como colores, fuentes, espaciados y disposición de elementos, permitiendo crear interfaces de usuario atractivas y responsivas.

Sintaxis básica de CSS

Una regla CSS se compone de un selector y un bloque de declaración.

selector {
    propiedad: valor;
}
  • Selector: Indica a qué elementos HTML se aplicarán los estilos.
  • Propiedad: El aspecto que se desea modificar (por ejemplo, color, font-size).
  • Valor: El valor asignado a la propiedad (por ejemplo, red, 16px).

Cómo incluir CSS en HTML

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Estilos en línea

Se aplican directamente en los elementos HTML utilizando el atributo style.

<p style="color: blue;">Este es un texto en azul.</p>

Estilos internos

Se incluyen dentro de la etiqueta <style> en el <head> del documento HTML.

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

Estilos externos

Se enlazan mediante un archivo .css separado utilizando la etiqueta <link>.

<head>
    <link rel="stylesheet" href="estilos.css">
</head>

En el archivo estilos.css:

p {
    color: blue;
}

Selectores en CSS

Los selectores permiten apuntar a elementos específicos para aplicar estilos.

Selectores de tipo

Seleccionan elementos por su nombre de etiqueta.

h1 {
    font-size: 24px;
}

Selectores de clase

Utilizan el atributo class para seleccionar elementos.

HTML:

<p class="destacado">Texto destacado.</p>

CSS:

.destacado {
    font-weight: bold;
}

Selectores de ID

Utilizan el atributo id, que debe ser único en el documento.

HTML:

<div id="encabezado">Encabezado</div>

CSS:

#encabezado {
    background-color: #f0f0f0;
}

Selectores combinados

Permiten seleccionar elementos basados en relaciones jerárquicas.

  • Descendiente:

    ul li {
    color: green;
}

  • Hijo directo:

    div > p {
    margin: 10px;
}

  • Selector de clase combinada:

    .menu .item {
    padding: 5px;
}

Especificidad y cascada

Cuando múltiples reglas se aplican al mismo elemento, CSS utiliza la especificidad y el orden de las reglas para determinar cuál aplicar.

  • Especificidad: Los selectores más específicos tienen prioridad.
  • Cascada: Si la especificidad es igual, se aplica la última regla definida.

Orden de importancia:

  1. Estilos en línea (más específicos).
  2. Selectores ID.
  3. Selectores de clase, atributos y pseudoclases.
  4. Selectores de tipo y pseudoelementos.
  5. Estilos heredados.

Modelo de caja (Box Model)

Cada elemento en CSS se representa como una caja rectangular que consta de:

  • Contenido: El área donde se muestra el contenido.
  • Padding (Relleno): Espacio entre el contenido y el borde.
  • Border (Borde): El contorno alrededor del padding y el contenido.
  • Margin (Margen): Espacio entre el borde y otros elementos.

Visualización del modelo:

+---------------------------+
|        Margin             |
|  +---------------------+  |
|  |      Border         |  |
|  |  +---------------+  |  |
|  |  |   Padding     |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | Content |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

Propiedades relacionadas

  • width, height: Tamaño del contenido.
  • padding: Espacio interior.
  • border: Borde del elemento.
  • margin: Espacio exterior.

Ejemplo:

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

Tipografía y fuentes

Controlar el aspecto del texto es fundamental en el diseño web.

Propiedades comunes

  • font-family: Define la fuente a utilizar.

    p {
    font-family: Arial, sans-serif;
}

  • font-size: Tamaño del texto.

    h1 {
    font-size: 32px;
}

  • font-weight: Grosor del texto (normal, bold, lighter, valores numéricos).

  • line-height: Altura de la línea.

  • text-align: Alineación del texto (left, center, right, justify).

  • color: Color del texto.

Colores y fondos

Especificación de colores

  • Nombres de colores predefinidos: red, blue, green.
  • Valores hexadecimales: #ff0000, #00ff00.
  • Valores RGB: rgb(255, 0, 0).
  • Valores RGBA (con transparencia): rgba(255, 0, 0, 0.5).

Fondos

  • background-color: Color de fondo.

    body {
    background-color: #f5f5f5;
}

  • background-image: Imagen de fondo.

    div {
    background-image: url('imagen.jpg');
}

  • background-repeat, background-position, background-size: Controlan la repetición, posición y tamaño de la imagen de fondo.

Diseño y posicionamiento

Display

La propiedad display define cómo se muestra un elemento.

  • block: Ocupa todo el ancho disponible.

  • inline: Ocupa solo el espacio necesario.

  • inline-block: Combina características de block e inline.

  • none: Oculta el elemento.

Posicionamiento

Controla la posición de los elementos en la página.

  • static: Posición por defecto.

  • relative: Posición relativa a su posición normal.

  • absolute: Posición absoluta respecto al elemento contenedor posicionado.

  • fixed: Posición fija respecto a la ventana del navegador.

  • sticky: Combinación de relative y fixed.

Ejemplo:

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

Flexbox

Un modelo de diseño unidimensional para alinear y distribuir espacio entre elementos en un contenedor.

Contenedor:

.container {
    display: flex;
    flex-direction: row; /* o 'column' */
    justify-content: center; /* Alineación horizontal */
    align-items: center; /* Alineación vertical */
}

Elementos hijos:

.item {
    flex: 1;
}

Grid Layout

Modelo de diseño bidimensional para crear estructuras de cuadrículas.

Contenedor:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    grid-gap: 10px;
}

Elementos hijos:

.grid-item {
    background-color: #ccc;
}

Pseudoclases y pseudoelementos

Pseudoclases

Permiten seleccionar elementos en un estado específico.

  • :hover: Cuando el cursor se coloca sobre el elemento.

  • :active: Cuando el elemento está siendo activado.

  • :focus: Cuando el elemento tiene el foco.

Ejemplo:

a:hover {
    color: red;
}

Pseudoelementos

Permiten seleccionar partes de elementos.

  • ::before, ::after: Insertan contenido antes o después del elemento.

  • ::first-letter: Selecciona la primera letra.

  • ::first-line: Selecciona la primera línea.

Ejemplo:

p::first-letter {
    font-size: 2em;
    color: blue;
}

Medios y consultas (@media queries)

Las consultas de medios permiten aplicar estilos específicos según las características del dispositivo, como el ancho de la pantalla.

Ejemplo de diseño responsivo:

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

Animaciones y transiciones

Transiciones

Permiten animar cambios en las propiedades CSS.

.button {
    background-color: blue;
    transition: background-color 0.5s;
}

.button:hover {
    background-color: green;
}

Animaciones

Definen animaciones complejas utilizando @keyframes.

@keyframes girar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.elemento {
    animation: girar 2s infinite;
}

Preprocesadores CSS

Herramientas como Sass o Less permiten escribir CSS de manera más eficiente, añadiendo características como variables, anidación y mixins.

Ejemplo en Sass:

$color-principal: #3498db;

body {
    background-color: $color-principal;

    h1 {
        color: darken($color-principal, 10%);
    }
}

Buenas prácticas en CSS

  • Organización: Estructurar el código de manera lógica.

  • Comentarios: Añadir comentarios para explicar secciones complejas.

  • Reutilización: Utilizar clases y estilos reutilizables.

  • Evitar redundancias: Minimizar la repetición de código.

  • Prefijos de navegadores: Utilizar prefijos cuando sea necesario para compatibilidad.

Herramientas y recursos adicionales

  • Inspección de elementos: Utilizar las herramientas de desarrollo del navegador para probar y depurar estilos.

  • Frameworks CSS: Bootstrap, Foundation o Tailwind CSS facilitan el diseño responsivo.

  • Autoprefixer: Añade automáticamente prefijos necesarios para compatibilidad.

  • Validación: Herramientas como W3C CSS Validator ayudan a identificar errores.

  • Documentación: MDN Web Docs es una referencia completa.

Completa este curso de CSS y certifícate

Únete a nuestra plataforma de cursos de programación y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Comenzar gratis

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración