Introducción a CSS

CSS es una de las herramientas más importantes para diseñar y embellecer la apariencia de un sitio web. Te enseñaremos los conceptos básicos y cómo usar CSS

CSS puede cambiar el estilo de belleza HTML

CSS es el lenguaje que usamos para diseñar una página web.

¿Qué es CSS?

CSS significa hojas de estilo en cascada
CSS describe cómo se deben mostrar los elementos HTML en la pantalla, el papel o en otros medios
CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez
Las hojas de estilo externas se almacenan en archivos CSS

Demostración de CSS - ¡Una página HTML - Varios estilos!

Aquí mostraremos una página HTML con cuatro hojas de estilo diferentes. Haga clic en los enlaces "Hoja de estilo 1", "Hoja de estilo 2", "Hoja de estilo 3", "Hoja de estilo 4" a continuación para ver los diferentes estilos:

¿Por qué usar CSS?

CSS se usa para definir estilos para sus páginas web, incluido el diseño, el diseño y las variaciones en la visualización para diferentes dispositivos y tamaños de pantalla.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS resolvió un gran problema

HTML NUNCA tuvo la intención de contener etiquetas para formatear una página web.

HTML fue creado para describir el contenido de una página web, como:

<h1>Este es un encabezado</h1>

<p>Esto es un párrafo.</p>

Cuando se agregaron etiquetas como <font> y atributos de color a la especificación HTML 3.2, comenzó una pesadilla para los desarrolladores web. El desarrollo de grandes sitios web, donde se añadía información de fuentes y colores a cada página, se convirtió en un proceso largo y costoso.

Para resolver este problema, el World Wide Web Consortium (W3C) creó CSS.

¡CSS eliminó el formato de estilo de la página HTML!

¡CSS ahorra mucho trabajo!

Las definiciones de estilo normalmente se guardan en archivos .css externos.

¡Con un archivo de hoja de estilo externo, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo!

Sintaxis CSS

Una regla CSS consta de un selector y un bloque de declaración.
Introducción a CSS

El selector apunta al elemento HTML que desea diseñar.

El bloque de declaración contiene una o más declaraciones separadas por punto y coma.

Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.

Varias declaraciones CSS se separan con punto y coma, y los bloques de declaración están rodeados por llaves.

p {
  color: red;
  text-align: center;
}

Ejemplo explicado

p es un selector en CSS (apunta al elemento HTML que desea diseñar: <p>).
color es una propiedad, y red es el valor de la propiedad
text-align es una propiedad, y center es el valor de la propiedad