CSS

CSS

Tutorial CSS: Entorno para desarrollar CSS

Aprende a configurar VS Code para CSS, instalar extensiones esenciales y usar herramientas de inspección para optimizar tu desarrollo web.

Aprende CSS y certifícate

Instalar Visual Studio Code y crear archivos CSS

Visual Studio Code (VS Code) es un editor de código gratuito y de código abierto desarrollado por Microsoft que se ha convertido en una herramienta esencial para desarrolladores web. Su interfaz intuitiva y su amplia compatibilidad con lenguajes de programación lo hacen ideal para trabajar con CSS.

Instalación de Visual Studio Code

Para comenzar a trabajar con CSS, primero necesitamos instalar VS Code:

  1. Descarga el instalador desde la página oficial de Visual Studio Code.
  2. Selecciona la versión adecuada para tu sistema operativo (Windows, macOS o Linux).
  3. Ejecuta el instalador y sigue las instrucciones en pantalla.

Durante la instalación en Windows, es recomendable marcar estas opciones:

  • Crear un acceso directo en el escritorio
  • Añadir la opción "Abrir con Code" al menú contextual
  • Registrar Code como editor para tipos de archivo compatibles

Interfaz básica de VS Code

Una vez instalado, al abrir VS Code verás una interfaz similar a esta:

  • Barra lateral izquierda: Contiene iconos para acceder a diferentes vistas (explorador de archivos, búsqueda, control de versiones, etc.)
  • Editor principal: Área central donde editarás tus archivos CSS
  • Barra de estado: Parte inferior que muestra información útil como el tipo de archivo

Crear un proyecto para CSS

Para empezar a trabajar con CSS, es recomendable crear una estructura de carpetas organizada:

  1. En VS Code, selecciona File > Open Folder (o Archivo > Abrir Carpeta).
  2. Crea una nueva carpeta para tu proyecto (por ejemplo, "mi-proyecto-css").
  3. Dentro de esta carpeta, es buena práctica crear una subcarpeta llamada "css" para almacenar tus archivos de estilos.

Crear y editar archivos CSS

Existen varias formas de crear un nuevo archivo CSS en VS Code:

Método 1: Desde el explorador de archivos

  1. En la barra lateral, haz clic en el icono del explorador (primer icono).
  2. Navega hasta la carpeta donde quieres crear el archivo.
  3. Haz clic en el icono "Nuevo archivo" (junto al nombre de la carpeta).
  4. Escribe el nombre del archivo con la extensión .css (por ejemplo, styles.css).
/* Este es mi primer archivo CSS */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f5f5f5;
}

h1 {
  color: #333;
  text-align: center;
}

Método 2: Usando el menú contextual

  1. Haz clic derecho en la carpeta donde quieres crear el archivo.
  2. Selecciona "New File" (Nuevo archivo).
  3. Escribe el nombre con la extensión .css.

Vinculación de CSS con HTML

Para que nuestros estilos CSS se apliquen a una página web, necesitamos crear un archivo HTML básico y vincularlo con nuestro CSS:

  1. Crea un archivo index.html en la carpeta raíz de tu proyecto.
  2. Añade la siguiente estructura básica:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi proyecto CSS</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <h1>Bienvenido a mi proyecto CSS</h1>
  <p>Este es un párrafo de ejemplo para probar los estilos CSS.</p>
</body>
</html>

La línea <link rel="stylesheet" href="css/styles.css"> es la que conecta nuestro archivo HTML con el CSS.

Configuración recomendada para CSS en VS Code

Para mejorar tu experiencia al trabajar con CSS, puedes ajustar algunas configuraciones:

  1. Abre la configuración de VS Code (File > Preferences > Settings o con el atajo Ctrl+,).
  2. Busca "css" en el campo de búsqueda.
  3. Activa estas opciones útiles:
  • CSS > Validate: Asegura que VS Code valide tu código CSS
  • Editor: Format On Save: Formatea automáticamente tu código al guardar

Atajos de teclado útiles para editar CSS

Dominar algunos atajos de teclado te ayudará a ser más eficiente:

  • Ctrl+S: Guardar archivo
  • Ctrl+Space: Activar autocompletado
  • Alt+Up/Down: Mover línea arriba/abajo
  • Ctrl+/: Comentar/descomentar línea
  • Ctrl+F: Buscar en el archivo actual

Emmet: Acelerador de escritura para CSS

VS Code incluye Emmet, una herramienta que permite escribir CSS más rápidamente mediante abreviaturas. Por ejemplo, puedes escribir:

m10

Y al presionar Tab, se expandirá automáticamente a:

margin: 10px;

O escribir:

p20-10-5-30

Y se expandirá a:

padding: 20px 10px 5px 30px;

Esta funcionalidad está integrada por defecto en VS Code y funciona automáticamente en archivos CSS.

Previsualización de colores

Una característica útil de VS Code es la previsualización de colores en CSS. Cuando escribes un valor de color (como #ff5500 o rgb(255, 85, 0)), VS Code muestra un pequeño cuadrado con ese color, permitiéndote visualizar el color sin necesidad de ejecutar tu código.

También puedes hacer clic en ese cuadrado para abrir un selector de color que te permite ajustar el valor visualmente.

Con VS Code correctamente configurado, estás listo para comenzar a crear y editar archivos CSS de manera eficiente, aprovechando las herramientas que este potente editor ofrece para facilitar tu trabajo con estilos web.

Extensiones esenciales para CSS (Live Server, HTML CSS Support, CSS Peek)

Visual Studio Code se vuelve aún más potente cuando lo complementamos con extensiones específicas para CSS. Estas herramientas adicionales mejoran significativamente el flujo de trabajo, permitiéndonos desarrollar y depurar estilos de manera más eficiente.

¿Cómo instalar extensiones en VS Code?

Antes de explorar las extensiones específicas, veamos cómo instalarlas:

  1. Haz clic en el icono de extensiones en la barra lateral izquierda (o usa el atajo Ctrl+Shift+X).
  2. Utiliza el cuadro de búsqueda para encontrar la extensión deseada.
  3. Haz clic en el botón "Install" junto a la extensión que quieras añadir.

Live Server: Desarrollo con recarga automática

Live Server es una extensión fundamental que crea un servidor de desarrollo local con capacidad de recarga automática. Esto significa que cada vez que guardas cambios en tus archivos CSS, la página se actualiza instantáneamente en el navegador.

Características principales:

  • Recarga automática del navegador al guardar cambios
  • Servidor local para visualizar tu proyecto
  • Soporte para múltiples navegadores simultáneamente

Instalación y uso:

  1. Busca "Live Server" en el panel de extensiones (desarrollada por Ritwick Dey).
  2. Una vez instalada, aparecerá un botón "Go Live" en la barra de estado inferior.
  3. Para iniciar el servidor, haz clic en "Go Live" o abre un archivo HTML y haz clic derecho > "Open with Live Server".
<!-- Al modificar este HTML o su CSS vinculado... -->
<div class="container">
  <h1>Mi proyecto CSS</h1>
</div>

/* ...y guardar los cambios, Live Server actualizará automáticamente el navegador */
.container {
  background-color: #e0f7fa;
  border-radius: 8px;
  padding: 20px;
}

HTML CSS Support: Autocompletado inteligente

Esta extensión mejora significativamente el autocompletado de clases CSS cuando trabajas en archivos HTML, lo que reduce errores tipográficos y acelera el desarrollo.

Características principales:

  • Autocompletado de clases CSS definidas en tus hojas de estilo
  • Sugerencias basadas en tus propios archivos CSS
  • Compatibilidad con archivos CSS externos vinculados

Instalación y uso:

  1. Busca "HTML CSS Support" en el panel de extensiones (desarrollada por ecmel).
  2. Después de instalarla, funciona automáticamente.
  3. Al escribir class=" en un archivo HTML, comenzarás a ver sugerencias de las clases definidas en tus archivos CSS.

Por ejemplo, si tienes estas clases en tu CSS:

.header {
  background-color: #333;
}

.container {
  max-width: 1200px;
}

.btn-primary {
  background-color: #0078d7;
}

Al escribir en tu HTML, la extensión te sugerirá estas clases automáticamente:

<!-- Al escribir class="", verás sugerencias de tus clases CSS -->
<div class="container">
  <header class="header">
    <button class="btn-primary">Enviar</button>
  </header>
</div>

CSS Peek: Navegación rápida entre HTML y CSS

CSS Peek permite navegar instantáneamente desde un selector en HTML hasta su definición en CSS, lo que facilita enormemente la edición y comprensión de los estilos aplicados.

Características principales:

  • Ir directamente a la definición CSS desde una clase en HTML
  • Previsualizar definiciones CSS sin cambiar de archivo
  • Funciona con clases, IDs y otros selectores

Instalación y uso:

  1. Busca "CSS Peek" en el panel de extensiones (desarrollada por Pranay Prakash).
  2. Una vez instalada, mantén presionada la tecla Ctrl (o Cmd en Mac) y haz clic en cualquier clase o ID en tu HTML.
  3. También puedes hacer clic derecho > "Peek" o "Go to Definition".

Por ejemplo, con estos archivos:

<!-- En tu archivo HTML -->
<nav class="navigation">
  <ul class="menu">
    <li class="menu-item">Inicio</li>
  </ul>
</nav>

/* En tu archivo CSS */
.navigation {
  background-color: #2c3e50;
  padding: 15px 0;
}

.menu {
  display: flex;
  list-style: none;
}

.menu-item {
  margin-right: 20px;
  color: white;
}

Al hacer Ctrl+clic en class="menu-item" en el HTML, serás llevado directamente a la definición .menu-item en tu archivo CSS.

Otras extensiones útiles para CSS

Además de las tres extensiones principales, considera estas opciones complementarias:

  • Color Highlight: Resalta los colores utilizados en tu CSS directamente en el editor.
  • Autoprefixer: Añade automáticamente prefijos de navegador a tus propiedades CSS.
  • IntelliSense for CSS class names: Proporciona autocompletado basado en clases definidas en todo tu proyecto.
  • Prettier: Formateador de código que mantiene tu CSS ordenado y consistente.

Configuración recomendada para las extensiones

Para aprovechar al máximo estas extensiones, considera estas configuraciones:

  1. Para Live Server, puedes personalizar el puerto y el navegador predeterminado:
  • Abre la configuración (Ctrl+,)
  • Busca "Live Server"
  • Ajusta liveServer.settings.port (por defecto 5500)
  • Configura liveServer.settings.CustomBrowser a "chrome", "firefox", etc.
  1. Para CSS Peek, puedes habilitar la previsualización en hover:
  • En configuración, busca "CSS Peek"
  • Activa cssPeek.peekFromLanguages para añadir soporte a otros lenguajes además de HTML

Flujo de trabajo optimizado con extensiones

Con estas extensiones instaladas, un flujo de trabajo típico sería:

  1. Crear/editar archivos HTML y CSS
  2. Iniciar Live Server para ver los cambios en tiempo real
  3. Usar HTML CSS Support para añadir clases correctamente
  4. Utilizar CSS Peek para navegar rápidamente entre HTML y CSS cuando necesites modificar estilos

Este enfoque integrado te permite mantener la concentración en el diseño sin perder tiempo en cambios de contexto o recargas manuales del navegador.

Inspección de CSS desde consola de navegadores

Las herramientas para desarrolladores integradas en los navegadores modernos son recursos invaluables para trabajar con CSS. Estas herramientas permiten inspeccionar, modificar y depurar estilos en tiempo real, lo que facilita enormemente el proceso de desarrollo.

Acceso a las herramientas de desarrollo

Existen varias formas de abrir las herramientas de desarrollo en los navegadores más populares:

  • Chrome/Edge/Brave:

  • Presiona F12 o Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)

  • Haz clic derecho en cualquier elemento y selecciona "Inspeccionar"

  • Desde el menú: Más herramientas > Herramientas para desarrolladores

  • Firefox:

  • Presiona F12 o Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)

  • Haz clic derecho > Inspeccionar elemento

  • Safari:

  • Primero debes habilitar el menú de desarrollo: Preferencias > Avanzado > "Mostrar menú Desarrollo"

  • Luego presiona Cmd+Option+I o usa Desarrollo > Mostrar Inspector web

Panel de Elementos/Inspector

El panel de Elementos (Chrome) o Inspector (Firefox) es donde pasarás la mayor parte del tiempo trabajando con CSS:

Panel de elementos

Este panel muestra:

  1. La estructura HTML del documento en el lado izquierdo
  2. Los estilos CSS aplicados al elemento seleccionado en el lado derecho

Inspección de elementos y sus estilos

Para inspeccionar los estilos de un elemento específico:

  1. Haz clic en el icono de selección (flecha) en la esquina superior izquierda de las herramientas de desarrollo
  2. Haz clic en cualquier elemento de la página que quieras inspeccionar
/* Ejemplo de estilos que podrías ver al inspeccionar un botón */
.button {
  background-color: #4285f4;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

Comprendiendo el panel de estilos

El panel de estilos muestra información crucial sobre los estilos aplicados:

  • Estilos calculados: Muestra todos los estilos que se aplican actualmente al elemento
  • Cascada de estilos: Organiza los estilos según su origen (inline, hojas de estilo internas, externas)
  • Estilos tachados: Indica propiedades que han sido sobrescritas por otras reglas con mayor especificidad

Modificación de estilos en tiempo real

Una de las características más útiles es la capacidad de modificar estilos directamente en el navegador:

  1. Haz clic en cualquier valor de propiedad para editarlo
  2. Añade nuevas propiedades haciendo clic en un espacio vacío dentro de un bloque de reglas
  3. Desactiva temporalmente propiedades haciendo clic en la casilla de verificación junto a ellas

Por ejemplo, puedes experimentar con diferentes valores de border-radius para un botón:

.button {
  border-radius: 4px;  /* Prueba cambiando a 8px, 12px o 50% */
}

Uso del modelo de caja

Los navegadores muestran una representación visual del modelo de caja del elemento seleccionado:

  • En Chrome/Edge: Aparece en la pestaña "Computed" (Calculado)
  • En Firefox: Se muestra directamente en el panel de estilos

Esta visualización muestra claramente:

  • Dimensiones del contenido (width/height)
  • Padding (relleno interno)
  • Border (borde)
  • Margin (margen externo)

Identificación de problemas comunes

Las herramientas de desarrollo ayudan a identificar problemas frecuentes:

  • Propiedades sobrescritas: Aparecen tachadas, indicando que otra regla con mayor especificidad las está anulando
  • Herencia inesperada: Puedes ver qué propiedades se heredan de elementos padres
  • Especificidad: Puedes entender por qué ciertos estilos tienen prioridad sobre otros

Filtrado y búsqueda de estilos

Para encontrar rápidamente propiedades específicas:

  • Usa el campo de filtro en la parte superior del panel de estilos
  • Escribe el nombre de la propiedad que buscas (por ejemplo, "color" o "margin")
/* Si filtras por "color", verás todas las propiedades relacionadas */
.element {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

Visualización de pseudoclases

Para ver cómo se comporta un elemento con diferentes pseudoclases:

  1. Selecciona el elemento
  2. Haz clic en :hov (Chrome) o :hover (Firefox)
  3. Marca las pseudoclases que quieras simular (hover, active, focus, etc.)

Esto te permite ver los estilos de :hover sin necesidad de mantener el cursor sobre el elemento.

Emulación de dispositivos

Para probar diseños responsivos:

  1. Haz clic en el icono de dispositivo móvil (o presiona Ctrl+Shift+M en Firefox)
  2. Selecciona un dispositivo predefinido o establece dimensiones personalizadas
  3. Observa cómo se aplican tus media queries en diferentes tamaños de pantalla
/* Puedes ver cómo se aplican estas reglas al cambiar el tamaño */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Copiando estilos modificados

Después de realizar cambios en el navegador:

  1. Haz clic derecho en el bloque de reglas modificado
  2. Selecciona "Copy rule" o "Copy declaration"
  3. Pega los cambios en tu archivo CSS real en VS Code

Depuración de animaciones y transiciones

Para analizar animaciones CSS:

  1. Ve a la pestaña "Animations" (Chrome) o "Animations" (Firefox, dentro de la pestaña Inspector)
  2. Reproduce, pausa y ralentiza animaciones para examinar cada fotograma
/* Puedes depurar esta animación en las herramientas de desarrollo */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in-out;
}

Visualización de fuentes aplicadas

Para inspeccionar fuentes:

  • En Chrome: Ve a la pestaña "Computed" y busca la propiedad "font-family"
  • En Firefox: Ve a la pestaña "Fonts" para ver información detallada sobre las fuentes cargadas

Consejos avanzados

  • Capturas de pantalla: En Chrome, presiona Ctrl+Shift+P y busca "screenshot" para capturar toda la página o un nodo específico
  • Cambios persistentes: En Chrome, ve a la pestaña "Sources", crea un snippet y guarda tus modificaciones CSS para usarlas en futuras sesiones
  • Edición de HTML: Haz doble clic en cualquier elemento HTML para modificar su estructura y ver cómo afecta a los estilos

Flujo de trabajo recomendado

Un flujo de trabajo eficiente combinando VS Code y las herramientas de desarrollo:

  1. Escribe tu CSS inicial en VS Code
  2. Visualiza la página con Live Server
  3. Usa las herramientas de desarrollo para experimentar y ajustar estilos
  4. Una vez satisfecho con los cambios, cópialos de vuelta a tu archivo CSS en VS Code
  5. Guarda los cambios y verifica que todo funcione correctamente

Este ciclo de desarrollo iterativo te permite experimentar libremente sin miedo a romper tu código, ya que los cambios en las herramientas de desarrollo son temporales hasta que los guardes en tus archivos.

CONSTRUYE TU CARRERA EN IA Y PROGRAMACIÓN SOFTWARE

Accede a +1000 lecciones y cursos con certificado. Mejora tu portfolio con certificados de superación para tu CV.

Plan mensual

19.00 € /mes

Precio normal mensual: 19 €
47 % DE DESCUENTO

Plan anual

10.00 € /mes

Ahorras 108 € al año
Precio normal anual: 120 €
Aprende CSS online

Ejercicios de esta lección Entorno para desarrollar CSS

Evalúa tus conocimientos de esta lección Entorno para desarrollar CSS con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Reto modelo caja CSS

CSS
Código

Propiedades de posicionamiento

CSS
Puzzle

Modelo de caja

CSS
Código

Sombras en texto y cajas

CSS
Test

Reto implementación de fuentes web

CSS
Código

Sintaxis básica

CSS
Test

Estilos de fuente

CSS
Test

Diseño responsive con media queries

CSS
Test

Animaciones y transiciones

CSS
Test

Proyecto CSS Landing page simple

CSS
Proyecto

Reto unidades de medida

CSS
Código

Propiedades de texto

CSS
Puzzle

Metodologías BEM, SMACSS, OOCSS

CSS
Puzzle

Herencia y cascada

CSS
Test

Sintaxis avanzada

CSS
Puzzle

Reto fondos background CSS

CSS
Código

Reto sintaxis CSS

CSS
Código

Flexbox en diseños modernos

CSS
Puzzle

Elementos 'float' y 'clear'

CSS
Test

Pseudo-clases y pseudo-elementos

CSS
Puzzle

Reto grid de columnas en CSS

CSS
Código

Selectores avanzados

CSS
Puzzle

Reto componente responsive

CSS
Código

Reto formulario estilizado

CSS
Código

Proyecto CSS crear una navbar

CSS
Proyecto

Proyecto CSS Dashboard Responsive

CSS
Proyecto

Reto Flexbox Hero

CSS
Código

Propiedades de fondo

CSS
Puzzle

Introducción a CSS

CSS
Test

Reto selectores básicos CSS

CSS
Código

Reto Flexbox Card

CSS
Código

Reto propiedades texto

CSS
Código

Modelo de caja

CSS
Test

Propiedad 'display'

CSS
Test

Variables en CSS

CSS
Puzzle

Grid en diseños de cuadrícula

CSS
Test

Selectores básicos

CSS
Test

Reto tema claro/oscuro con variables

CSS
Código

Reto especificidad y cascada

CSS
Código

Todas las lecciones de CSS

Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Css

CSS

Introducción Y Entorno

Entorno Para Desarrollar Css

CSS

Introducción Y Entorno

Sintaxis

CSS

Sintaxis De Selectores Y Propiedades

Selectores Básicos

CSS

Sintaxis De Selectores Y Propiedades

Herencia Y Cascada

CSS

Sintaxis De Selectores Y Propiedades

Pseudo-clases Y Pseudo-elementos

CSS

Sintaxis De Selectores Y Propiedades

Colores En Css

CSS

Sintaxis De Selectores Y Propiedades

Unidades De Medida

CSS

Sintaxis De Selectores Y Propiedades

Especificidad

CSS

Sintaxis De Selectores Y Propiedades

Estilos De Fuente

CSS

Estilización De Texto Y Fondo

Propiedades De Texto

CSS

Estilización De Texto Y Fondo

Sombras En Texto Y Cajas

CSS

Estilización De Texto Y Fondo

Propiedades De Fondo

CSS

Estilización De Texto Y Fondo

Fuentes Web

CSS

Estilización De Texto Y Fondo

Efectos De Texto: Gradientes, Recortes

CSS

Estilización De Texto Y Fondo

Tipografía Avanzada

CSS

Estilización De Texto Y Fondo

Modelo De Caja

CSS

Modelo Caja

Propiedades De Posicionamiento

CSS

Modelo Caja

Propiedad 'Display'

CSS

Modelo Caja

Elementos 'Float' Y 'Clear'

CSS

Modelo Caja

Rellenos Y Márgenes

CSS

Modelo Caja

Bordes Y Contornos

CSS

Modelo Caja

Absolute, Fixed, Sticky Y Z-index

CSS

Posicionamiento

Flexbox Para Crear Layouts Y Estructuras

CSS

Flexbox

Css Grid Para Crear Layouts Y Estructuras

CSS

Flexbox

Propiedades Del Contenedor Flex

CSS

Flexbox

Propiedades De Los Items Flex

CSS

Flexbox

Columnas Y Filas En Grid

CSS

Css Grid

Espaciado Y Alineación

CSS

Css Grid

Tipografía Responsive

CSS

Diseño Responsive

Fundamentos Del Diseño Responsive

CSS

Diseño Responsive

Imágenes Responsive

CSS

Diseño Responsive

Funciones Matemáticas

CSS

Variables Y Funciones Css

Transformaciones 2d

CSS

Transformación, Transición, Animación

Transformaciones 3d

CSS

Transformación, Transición, Animación

Animaciones

CSS

Transformación, Transición, Animación

Transiciones

CSS

Transformación, Transición, Animación

Css Para Formularios

CSS

Css Avanzado

Accesibilidad Web Con Css

CSS

Css Avanzado

Container Queries

CSS

Css Avanzado

Selectores Avanzados

CSS

Css Avanzado

Animaciones Y Transiciones

CSS

Técnicas Modernas Y Metodologías

Variables En Css

CSS

Técnicas Modernas Y Metodologías

Diseño Responsive Con Media Queries

CSS

Técnicas Modernas Y Metodologías

Metodologías De Escritura En Css

CSS

Técnicas Modernas Y Metodologías

Accede GRATIS a CSS y certifícate

En esta lección

Objetivos de aprendizaje de esta lección

  • Instalar y configurar Visual Studio Code para trabajar con archivos CSS.
  • Crear y organizar proyectos y archivos CSS dentro de VS Code.
  • Utilizar extensiones clave como Live Server, HTML CSS Support y CSS Peek para optimizar el desarrollo.
  • Inspeccionar y modificar estilos CSS en tiempo real mediante las herramientas de desarrollo de navegadores.
  • Aplicar buenas prácticas para un flujo de trabajo eficiente entre editor y navegador.