Introducción Básica a Css

 



CSS (Cascading Style Sheets) es el lenguaje que se utiliza para dar estilo y diseño a las páginas web. Mientras que HTML define la estructura y el contenido, CSS controla la apariencia: colores, tipografías, márgenes, posiciones y efectos visuales.


    Definición básica

  • CSS significa “Hojas de Estilo en Cascada”.

  • Permite separar el contenido (HTML) de la presentación (diseño).

  • Los navegadores (Chrome, Firefox, Edge, etc.) interpretan el código CSS para mostrar la web con el estilo definido.

 ¿Para qué sirve?

  • Colores y fondos: definir paletas, degradados, imágenes de fondo.

  • Tipografía: elegir fuentes, tamaños, estilos (negrita, cursiva).

  • Distribución: controlar márgenes, rellenos (padding), alineaciones y posiciones.

  • Animaciones y transiciones: crear efectos dinámicos al interactuar con elementos.

  • Diseño adaptable (responsive): ajustar la apariencia según el dispositivo (PC, tablet, móvil).

Ventajas principales

  • Ahorro de tiempo: un solo archivo CSS puede aplicarse a múltiples páginas.

  • Carga más rápida: menos código repetido en HTML.

  • Flexibilidad: cambios globales en segundos (ejemplo: cambiar color de botones en todo el sitio).

  • Compatibilidad: funciona en distintos dispositivos y formatos (pantalla, impresión, lectores de voz).

Relación con HTML

  • HTML: estructura y contenido (texto, imágenes, enlaces).

  • CSS: estilo y presentación (cómo se ve ese contenido).

  • Ejemplo sencillo:HTML

  • <p class="mensaje">Hola mundo</p>

AHORA EN EL CSS

.mensaje { color: blue; font-size: 20px; text-align: center; }

Cómo puedes ver el color de la fuente cambia de color de negro a azul. Mas abajo veremos como cambiar el fondo.


En el css:

Hay que avisar algo, debemos conectar el CSS con el HTML y me preguntaras ¿Cómo los Conecto?

Debemos agregar un link el cual es:
<link rel="stylesheet" href="Introduccion_css.CSS">


Deben ir dentro del head, debe tener el mismo nombre del CSS el cual en mi caso se llama "Introduccion_css.CSS".






AGREGAR EL FONDO

debemos acceder al body y colocar un background
Para recalcar donde sale ". mensaje" es una clase la clase se llama con un punto ".".







y el resultado es el siguiente.
Puedes interactuar tú mismo con los colores en Visual Code.


Comentarios

Publicar un comentario