MenúSiguiente ➡

Lección 01. Introducción a CSS.

CSS significa Cascading Style Sheets, o en español, Hojas de Estilo en Cascada.

CSS es el lenguaje encargado del diseño visual de una página web. Define cómo se ven los elementos creados con HTML.

Gracias a CSS, el navegador puede mostrar colores, tamaños, márgenes, posiciones, animaciones y layouts modernos.

CSS trabaja junto a HTML y JavaScript dentro del Front-end.

Dentro del desarrollo web existen dos áreas principales:

CSS pertenece al front-end.

Archivos básicos del Front-End._

CSS se escribe en archivos .css que contienen reglas de estilo.

Creación de archivo CSS._

Crea un archivo llamado, por ejemplo:

Copiar código
style.css

Nota: el nombre style es el nombre comun utilizado para un archivo principal css, aunque aprenderemos que se recomienda modular nuestros estilos si nuestra pagina o sistema es demasiado grande.

Este archivo se enlaza desde el HTML usando la etiqueta <link>.

Copiar código
<link rel="stylesheet" href="style.css">

Nota: Puedes nombrarlo de otra manera, pero no olvides que debe tener una extensión .css.

Sintaxis básica de CSS._

CSS se escribe mediante reglas formadas por un selector y un bloque de propiedades.

Copiar código
selector {
  propiedad: valor;
}

Por ejemplo:

Copiar código
p {
  color: red;
  font-size: 18px;
}

Nota: En el ejemplo anterior, se establece una regla en la cual, todas las etiquetas <p> tendran un color rojo y tamaño de fuente de 18 pixeles.

¿Qué es un selector?_

Un selector indica qué elemento HTML será estilizado.

Conclusión._

Para comenzar a usar CSS debes:

  1. - Crear un archivo .css.

  2. - Enlazarlo al HTML.

  3. - Escribir reglas de estilo.

  4. - Ver los cambios en el navegador.

Nota: Recordemos, CSS solo se utiliza para dar diseño a elementos y estructuras HTML, por lo que siempre debe enlazarse a un archivo .html sobre el cual deseamos aplicar las reglas.

MenúSiguiente ➡