CSS Básico
Dominar los conceptos de CSS básico te dará el poder de transformar tus documentos HTML estáticos en páginas web visualmente atractivas y bien estructuradas. La clave es practicar, experimentar con los valores y entender cómo el modelo de caja afecta la disposición de los elementos.
¿De que trata?
El CSS (Cascading Style Sheets) es el lenguaje que utilizamos para dar estilo y presentación visual a nuestras páginas web. Si HTML es el esqueleto de tu sitio, CSS es la "piel", la "ropa" y el "maquillaje". Controla cómo se ven los elementos HTML en el navegador: sus colores, fuentes, tamaños, espaciados, disposición, y mucho más.
Sin CSS, las páginas web serían simplemente texto y enlaces sin formato, muy aburridas y difíciles de leer. CSS permite:
Separar contenido de presentación: Esto hace que el código HTML sea más limpio y que los estilos sean más fáciles de mantener y modificar.
Diseño responsivo: Adaptar la apariencia de la página a diferentes tamaños de pantalla (móviles, tabletas, ordenadores).
Mejorar la experiencia de usuario (UX): Crear interfaces atractivas y fáciles de usar.
¿Cómo se hace el CSS Básico?
Para aplicar CSS a tus documentos HTML, hay tres métodos principales, aunque el más recomendado para proyectos reales es el externo.
1. Formas de Incluir CSS
En línea (Inline CSS): Aplicar estilos directamente en la etiqueta HTML usando el atributo style. No recomendado para uso general, ya que mezcla el contenido con la presentación y es difícil de mantener.
Interno (Internal CSS): Colocar los estilos dentro de una etiqueta <style> en la sección <head> del documento HTML. Útil para estilos específicos de una sola página, pero no escalable para sitios grandes.
Externo (External CSS): Crear un archivo .css separado (ej. estilos.css) y enlazarlo al documento HTML usando la etiqueta <link> en la sección <head>. Esta es la práctica recomendada porque separa completamente el contenido de los estilos, facilita la reutilización y el mantenimiento.
HTML:
CSS:
2. Sintaxis Básica de CSS
Una regla CSS se compone de un selector, una propiedad y un valor:
Selector: Apunta a los elementos HTML a los que quieres aplicar estilos (ej. p, h1, .clase, #id).
Propiedad: La característica de estilo que quieres cambiar (ej. color, font-size, margin).
Valor: El ajuste específico para esa propiedad (ej. blue, 16px, 20px).
Declaración: La combinación de una propiedad y su valor.
Bloque de declaración: El conjunto de todas las declaraciones dentro de las llaves {}.
3. Selectores Básicos (Cómo apuntar a los elementos HTML)
Selector de Etiqueta (Tipo): Selecciona todos los elementos de un tipo HTML específico.
Selector de Clase (.): Selecciona todos los elementos que tienen un atributo class específico. Un elemento puede tener múltiples clases. Muy versátil para aplicar el mismo estilo a varios elementos.
HTML:
CSS:
Selector de ID (#): Selecciona un único elemento con un atributo id específico. El id debe ser único en todo el documento HTML.
HTML:
CSS:
4. Propiedades CSS Esenciales
a) Colores
color: Color del texto.
background-color: Color de fondo de un elemento.
b) Texto
font-family: Tipo de fuente (ej. Arial, Helvetica, serif).
font-size: Tamaño del texto (ej. 16px, 1.2em, 2rem).
font-weight: Grosor de la fuente (ej. normal, bold, 400, 700).
text-align: Alineación horizontal del texto (ej. left, center, right, justify).
text-decoration: Líneas decorativas (ej. none, underline, overline, line-through).
line-height: Espaciado entre líneas.
letter-spacing: Espaciado entre caracteres.
c) Modelo de Caja (Box Model)
Cada elemento HTML es tratado como una "caja". Comprender el modelo de caja es fundamental para el diseño con CSS. Se compone de:
content (contenido): El área real donde va el texto, imágenes, etc.
padding (relleno): Espacio transparente entre el contenido y el borde.
border (borde): Una línea alrededor del padding y el content.
margin (margen): Espacio transparente fuera del borde, separando un elemento de otros.
d) Fondos
background-color: (Ya visto)
background-image: Una imagen de fondo.
background-repeat: Cómo se repite la imagen de fondo (ej. no-repeat, repeat-x, repeat-y).
background-position: Posición inicial de la imagen de fondo (ej. center, top right, 50% 50%).
background-size: Tamaño de la imagen de fondo (ej. cover, contain, 100% auto).
