Curso de programación con CSS

Aprende CSS y transforma tus páginas web con estilos impresionantes y diseños adaptativos. Descubre cómo CSS puede mejorar la experiencia del usuario.

Aprende CSS GRATIS y certifícate

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

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:

Estilos en línea (más específicos).
Selectores ID.
Selectores de clase, atributos y pseudoclases.
Selectores de tipo y pseudoelementos.
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.

Aprende CSS GRATIS online

Tutoriales de CSS

Aprende CSS con tutoriales de programación en CSS.

Introducción A Css

Introducción Y Entorno

Entorno Para Desarrollar Css

Introducción Y Entorno

Sintaxis

Sintaxis De Selectores Y Propiedades

Selectores Básicos

Sintaxis De Selectores Y Propiedades

Herencia Y Cascada

Sintaxis De Selectores Y Propiedades

Pseudo-clases Y Pseudo-elementos

Sintaxis De Selectores Y Propiedades

Colores En Css

Sintaxis De Selectores Y Propiedades

Unidades De Medida

Sintaxis De Selectores Y Propiedades

Especificidad

Sintaxis De Selectores Y Propiedades

Estilos De Fuente

Estilización De Texto Y Fondo

Propiedades De Texto

Estilización De Texto Y Fondo

Sombras En Texto Y Cajas

Estilización De Texto Y Fondo

Propiedades De Fondo

Estilización De Texto Y Fondo

Fuentes Web

Estilización De Texto Y Fondo

Efectos De Texto: Gradientes, Recortes

Estilización De Texto Y Fondo

Tipografía Avanzada

Estilización De Texto Y Fondo

Modelo De Caja

Modelo Caja

Propiedades De Posicionamiento

Modelo Caja

Propiedad 'Display'

Modelo Caja

Elementos 'Float' Y 'Clear'

Modelo Caja

Rellenos Y Márgenes

Modelo Caja

Bordes Y Contornos

Modelo Caja

Absolute, Fixed, Sticky Y Z-index

Posicionamiento

Flexbox Para Crear Layouts Y Estructuras

Flexbox

Css Grid Para Crear Layouts Y Estructuras

Flexbox

Propiedades Del Contenedor Flex

Flexbox

Propiedades De Los Items Flex

Flexbox

Columnas Y Filas En Grid

Css Grid

Espaciado Y Alineación

Css Grid

Tipografía Responsive

Diseño Responsive

Fundamentos Del Diseño Responsive

Diseño Responsive

Imágenes Responsive

Diseño Responsive

Funciones Matemáticas

Variables Y Funciones Css

Transformaciones 2d

Transformación, Transición, Animación

Transformaciones 3d

Transformación, Transición, Animación

Animaciones

Transformación, Transición, Animación

Transiciones

Transformación, Transición, Animación

Css Para Formularios

Css Avanzado

Accesibilidad Web Con Css

Css Avanzado

Container Queries

Css Avanzado

Selectores Avanzados

Css Avanzado

Animaciones Y Transiciones

Técnicas Modernas Y Metodologías

Variables En Css

Técnicas Modernas Y Metodologías

Diseño Responsive Con Media Queries

Técnicas Modernas Y Metodologías

Metodologías De Escritura En Css

Técnicas Modernas Y Metodologías

Ejercicios de programación de CSS

Evalúa tus conocimientos en CSS con ejercicios de programación CSS de tipo Test, Puzzle, Código y Proyecto con VSCode.