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

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

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

Modelo De Caja

Modelo Caja Y Posicionamiento

Propiedades De Posicionamiento

Modelo Caja Y Posicionamiento

Propiedad 'Display'

Modelo Caja Y Posicionamiento

Elementos 'Float' Y 'Clear'

Modelo Caja Y Posicionamiento

Flexbox Para Crear Layouts Y Estructuras

Flexbox Y Grid

Css Grid Para Crear Layouts Y Estructuras

Flexbox Y Grid

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.

Tipo de tecnología

Lenguaje

Categoría laboral

Frontend

Año de lanzamiento

1994

Developers

W3C

Todos los módulos de CSS

CSS

Introducción y entorno

CSS

Sintaxis de selectores y propiedades

CSS

Estilización de texto y fondo

CSS

Modelo caja y posicionamiento

CSS

Flexbox y Grid

CSS

Técnicas modernas y metodologías

CSS

Evaluación CSS

Ver todos los módulos de CSS

Otras tecnologías

Vuejs

Frontend

Framework de JS progresivo para construir interfaces de usuario reactivas y modulares.

Selenium

Testing / QA (Quality Assurance)

Suite de herramientas open-source para automatizar navegadores web y pruebas de software de interfaz de usuario.

¿Qué es CSS?

Sintaxis básica de CSS

Cómo incluir CSS en HTML

Estilos en línea

Estilos internos

Estilos externos

Selectores en CSS

Selectores de tipo

Selectores de clase

Selectores de ID

Selectores combinados

Especificidad y cascada

Modelo de caja (Box Model)

Propiedades relacionadas

Tipografía y fuentes

Propiedades comunes

Colores y fondos

Especificación de colores

Fondos

Diseño y posicionamiento

Display

Posicionamiento

Flexbox

Grid Layout

Pseudoclases y pseudoelementos

Pseudoclases

Pseudoelementos

Medios y consultas (@media queries)

Animaciones y transiciones

Transiciones

Animaciones

Preprocesadores CSS

Buenas prácticas en CSS

Herramientas y recursos adicionales

Tutoriales de CSS

Introducción Y Entorno

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Modelo Caja Y Posicionamiento

Modelo Caja Y Posicionamiento

Modelo Caja Y Posicionamiento

Modelo Caja Y Posicionamiento

Flexbox Y Grid

Flexbox Y Grid

Técnicas Modernas Y Metodologías

Técnicas Modernas Y Metodologías

Técnicas Modernas Y Metodologías

Técnicas Modernas Y Metodologías

Ejercicios de programación de CSS

Todos los módulos de CSS

Otras tecnologías

Vuejs

Frontend

Selenium

Testing / QA (Quality Assurance)

TypeScript

Full Stack

Java

Backend

Seaborn

Ciencia de Datos e Inteligencia artificial

CSharp

Backend

SpringBoot