Fundamentos de estilo con CSS

Requisitos previos

Antes de empezar este módulo, deberías tener configurado un entorno de trabajo básico (como se explica en Instalar software básico) y saber cómo crear y gestionar archivos (como se explica en Manejo de archivos). También deberías conocer HTML (si no es así, completa nuestro módulo Estructurar el contenido con HTML).

Tutoriales y desafíos

¿Qué es CSS?

CSS te permite crear páginas web con un aspecto estupendo, pero ¿cómo funciona por dentro? Este artículo explica qué es CSS, cómo es su sintaxis básica y cómo aplica tu navegador el CSS al HTML para darle estilo.

Primeros pasos con CSS

En este artículo tomaremos un documento HTML sencillo y le aplicaremos CSS, aprendiendo por el camino algunos detalles prácticos del lenguaje. También repasaremos las características de la sintaxis de CSS que todavía no has visto.

Dar estilo a una página de biografía ^Desafío

En este desafío darás estilo a una página de biografía sencilla, poniendo a prueba algunas de las habilidades que aprendiste en las últimas lecciones, como escribir selectores, colorear fondos y dar estilo al texto. También te invitaremos a buscar algunas características básicas de CSS que no hemos tratado, para poner a prueba tus habilidades de investigación.

Selectores CSS básicos

En este artículo repasaremos algunos fundamentos de los selectores, incluidos los selectores básicos de tipo, de clase y de ID.

Selectores de atributo

Como sabes por tu estudio de HTML, los elementos pueden tener atributos que dan más detalles sobre el elemento marcado. En CSS puedes usar selectores de atributo para seleccionar elementos con determinados atributos. Esta lección te mostrará cómo usar estos selectores tan útiles.

Pseudoclases y pseudoelementos

El siguiente grupo de selectores que veremos se conoce como pseudoclases y pseudoelementos. Hay muchísimos, y a menudo tienen propósitos bastante concretos. Una vez que sepas usarlos, podrás revisar los distintos tipos para ver si hay alguno que sirva para la tarea que intentas resolver.

Combinadores

Los últimos selectores que veremos se llaman combinadores. Los combinadores se usan para combinar otros selectores de forma que podamos seleccionar elementos según su posición en el DOM respecto a otros elementos (por ejemplo, hijo o hermano).

El modelo de caja

Todo en CSS tiene una caja alrededor, y entender estas cajas es clave para poder crear diseños más complejos con CSS o para alinear elementos con otros elementos. En esta lección veremos el modelo de caja de CSS. Entenderás cómo funciona y la terminología relacionada.

Gestionar los conflictos

El objetivo de esta lección es que desarrolles tu comprensión de algunos de los conceptos más fundamentales de CSS (la cascada, la especificidad y la herencia), que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos entre declaraciones de estilo.

Corregir los estilos de una página de blog ^Desafío

En este desafío te damos un ejemplo básico de página de blog con estilos parciales. Necesitamos que corrijas algunos problemas del CSS existente y añadas algunos estilos para terminarla. Por el camino, pondremos a prueba tus conocimientos sobre selectores, el modelo de caja y los conflictos y la cascada.

Valores y unidades

Las reglas CSS contienen declaraciones, que a su vez se componen de propiedades y valores. Cada propiedad que se usa en CSS tiene un tipo de valor que describe qué tipo de valores puede tener. En esta lección veremos algunos de los tipos de valor más usados, qué son y cómo funcionan.

Dimensionar elementos en CSS

Es importante entender qué tamaño tendrán los distintos elementos de tu diseño. En esta lección resumiremos las distintas formas en que los elementos obtienen un tamaño mediante CSS y definiremos algunos términos sobre el dimensionamiento que te serán útiles en el futuro.

Fondos y bordes

En esta lección veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Desde añadir degradados e imágenes de fondo hasta esquinas redondeadas, los fondos y los bordes son la respuesta a muchas preguntas de estilo en CSS.

Desafío: dimensionar y decorar un panel de contenido ^Desafío

En este desafío te damos la estructura de una página con pocos estilos que muestra un panel de contenido, con un encabezado arriba y una barra de botones abajo. Queremos que sigas las instrucciones para dimensionarlo y decorarlo, y obtener como resultado un diseño interesante. Por el camino, pondremos a prueba tus conocimientos sobre los valores y las unidades de CSS, el dimensionamiento, y los fondos y los bordes.

Contenido desbordado

El desbordamiento es lo que ocurre cuando hay demasiado contenido para caber dentro de la caja de un elemento. En esta lección aprenderás a gestionar el desbordamiento con CSS.

Imágenes, multimedia y elementos de formulario

En esta lección veremos cómo se tratan en CSS ciertos elementos especiales. Las imágenes, otros elementos multimedia y los elementos de formulario se comportan de forma un poco distinta a las cajas normales en cuanto a la posibilidad de darles estilo con CSS. Entender qué es posible y qué no puede ahorrarte frustraciones, y esta lección destacará algunas de las cosas principales que necesitas saber.

Dar estilo a las tablas

Dar estilo a una tabla HTML no es el trabajo más glamuroso del mundo, pero a veces a todos nos toca hacerlo. Este artículo explica cómo hacer que las tablas HTML se vean bien, destacando algunas técnicas específicas para dar estilo a las tablas.

Depurar CSS

Este artículo te orienta sobre cómo depurar un problema de CSS y te muestra cómo las herramientas para desarrolladores incluidas en todos los navegadores modernos pueden ayudarte a averiguar qué está pasando.

Pon a prueba tus habilidades

Entre los artículos del tutorial encontrarás artículos de tipo «Pon a prueba tus habilidades» para comprobar si has retenido la información más importante antes de seguir adelante. Si quieres verlos todos juntos, los tienes listados en Pon a prueba tus habilidades: fundamentos de estilo con CSS.

Tutoriales adicionales

Estos tutoriales no forman parte del itinerario de aprendizaje, pero resultan interesantes de todos modos; considéralos objetivos opcionales, para estudiarlos cuando hayas terminado los artículos principales de Core.

Efectos de estilo avanzados

Este artículo funciona como una caja de trucos y ofrece una introducción a algunas características de estilo avanzadas e interesantes, como las sombras de caja, los modos de fusión y los filtros.

Capas en cascada

Esta lección pretende presentarte las capas en cascada, una característica más avanzada que se basa en los conceptos fundamentales de la cascada de CSS y la especificidad de CSS.

Gestionar distintas direcciones del texto

En los últimos años, CSS ha evolucionado para admitir mejor las distintas direcciones del contenido, incluido el contenido de derecha a izquierda, pero también de arriba abajo (como el japonés); estas distintas direcciones se llaman modos de escritura. A medida que avances en tu estudio y empieces a trabajar con el diseño, entender los modos de escritura te será muy útil, así que los presentaremos en este artículo.

Organizar el CSS

Cuando empieces a trabajar con hojas de estilo más grandes y proyectos de mayor tamaño, descubrirás que mantener un archivo CSS enorme puede ser complicado. En este artículo veremos brevemente algunas buenas prácticas para escribir CSS de forma que sea fácil de mantener, y algunas de las soluciones que usan otras personas para mejorar la mantenibilidad.

Véase también

Learn HTML and CSS, Scrimba ^{socio de aprendizaje de MDN}

El curso Learn HTML and CSS de Scrimba te enseña HTML y CSS construyendo y desplegando cinco proyectos geniales, con lecciones y desafíos interactivos divertidos impartidos por profesores expertos.

Write your first lines of CSS!, Scrimba ^{socio de aprendizaje de MDN}

Esta lección interactiva ofrece una introducción útil a la sintaxis de CSS.

• Overview: Módulos centrales de aprendizaje
• Siguiente