CSS (Cascading Style Sheets) es el lenguaje que permite dar estilo a las páginas web. Con CSS, puedes cambiar colores, fuentes, distribución de elementos y mucho más. En este tutorial aprenderás los conceptos básicos de CSS y cómo aplicarlo en tu página web.
CSS es un lenguaje de estilos utilizado para mejorar la apariencia de un sitio web. Se usa para:
Cambiar colores de texto y fondo.
Modificar el tamaño y estilo de fuentes.
Controlar el espacio entre elementos.
Crear diseños responsivos.
Existen tres formas de aplicar CSS a un documento HTML:
Se usa el atributo style
dentro de la etiqueta HTML. Es útil para cambios rápidos pero no recomendado para proyectos grandes.
Este es un párrafo azul con tamaño de 20px.
Se coloca dentro de una etiqueta <style>
en el <head>
del documento HTML. Es ideal para estilos específicos de una página.
<head> <style> p { color: green; font-size: 18px; } </style> </head>
Se vincula un archivo.css
externo usando <link>
. Es la mejor práctica para proyectos grandes y estructurados.
<link rel="stylesheet" href="styles.css">
Contenido del archivo styles.css:
p { color: red; font-size: 16px; }
Los selectores permiten aplicar estilos a elementos específicos en la página.
Aplica estilos a todas las etiquetas de un tipo.
p { color: blue; }
Se aplica a elementos con una clase específica, usando . antes del nombre de la clase.
Texto resaltado
.destacado { font-weight: bold; color: orange; }
Se aplica a un solo elemento con un ID específico, usando # antes del nombre del ID.
Texto con estilo especial
#unico { font-size: 24px; color: purple; }
CSS es una herramienta poderosa para darle estilo a los sitios web. En este tutorial aprendiste qué es CSS, cómo aplicarlo en HTML y los selectores básicos. ¡Ahora pruébalo y sigue explorando más estilos!