1

Cómo empezar con CSS: Guía básica para principiantes

Introducción

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.

1. ¿Qué es CSS y para qué se usa?

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.

2. Cómo incluir CSS en un documento HTML

Existen tres formas de aplicar CSS a un documento HTML:

a) CSS en línea (Inline CSS)

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.

b) CSS interno (Internal CSS)

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>

c) CSS externo (External CSS)

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; }

3. Selectores básicos en CSS

Los selectores permiten aplicar estilos a elementos específicos en la página.

a) Selector de elemento

Aplica estilos a todas las etiquetas de un tipo.

p { color: blue; }

b) Selector de clase

Se aplica a elementos con una clase específica, usando . antes del nombre de la clase.

Texto resaltado

.destacado { font-weight: bold; color: orange; }

c) Selector de ID

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; }

Conclusión

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!

Escribe tu comentario
+ 2