Las Hojas de Estilo en Cascada, o CSS, son un lenguaje que define la apariencia de una página web. CSS añade color, estilo y diseño a la estructura básica de un sitio web. Así como eliges tu ropa para sentirte bien y lucir impecable, CSS ayuda a que una página web luzca atractiva. En desarrollo web, usamos CSS para cambiar el color, el tamaño y la posición del texto y los cuadros en la página. Esta lección te presentará los fundamentos de CSS en un lenguaje sencillo. Aprenderemos qué es CSS, por qué es importante y cómo funciona con HTML.
CSS significa Hojas de Estilo en Cascada. Es un lenguaje especial que se utiliza para diseñar páginas web. Piensa en CSS como la pintura y la decoración de un edificio. El edificio está hecho de HTML, y CSS lo embellece. Con CSS, puedes cambiar el color de fondo, los estilos de fuente y el espacio entre los elementos de tu página web. CSS es una herramienta que ayuda a los diseñadores web a mejorar la apariencia y hacerla más atractiva.
Imagina que estás coloreando un dibujo. Las líneas del dibujo son como la estructura básica de un sitio web. El CSS es como los crayones y rotuladores que le dan vida al dibujo. Con unas sencillas reglas, ¡puedes transformar todo tu dibujo de simple a colorido!
CSS se utiliza para crear sitios web atractivos y fáciles de usar. Mantiene el estilo separado del contenido. Esto significa que las palabras e imágenes de la página (proporcionadas por HTML) permanecen iguales, mientras que CSS controla su apariencia. Al actualizar el estilo, no es necesario modificar el contenido. Esta separación ayuda a los desarrolladores web a trabajar más rápido y hace que los sitios web sean más agradables de visitar.
Piensa en CSS como la ropa que eliges. Si usas ropa diferente, te ves diferente, pero sigues siendo la misma persona. CSS cambia la apariencia de un sitio web sin cambiar la información que contiene. Esto facilita actualizar el diseño de todo un sitio web editando un solo archivo CSS.
CSS funciona en estrecha colaboración con HTML. HTML es la base que define el orden de los elementos en una página web. CSS interviene para añadir colores, fuentes y estilo. Cuando un navegador carga una página web, primero construye la estructura con HTML y luego aplica los estilos definidos en CSS.
CSS se escribe como un conjunto de reglas. Cada regla consta de dos partes: un selector y un bloque de declaración. El selector indica al navegador a qué elemento HTML aplicar estilo. El bloque de declaración contiene una o más declaraciones. Cada declaración tiene una propiedad y un valor. La propiedad indica lo que se desea cambiar y el valor indica cómo hacerlo.
Por ejemplo, para establecer el color de fondo de la página en azul claro, puedes escribir una regla que se vea así:
cuerpo {
color de fondo: azul claro;
}</código>Esta simple regla cambia el fondo de toda la página.
Una regla CSS básica sigue un patrón simple. Muestra el selector y un bloque de propiedades y valores. El patrón se ve así:
selector {
propiedad: valor;
}</código>Aquí, el selector elige el elemento HTML al que se dirigirá. La propiedad indica lo que desea cambiar y el valor indica cómo desea cambiarlo.
Por ejemplo, si quieres que todo el texto del párrafo sea azul, escribe:
p {
color: azul;
}</código>Esta regla le dice al navegador web que cada elemento <p> (párrafo) debe tener texto azul.
Los selectores CSS te permiten elegir qué elementos de tu página web se verán afectados por las reglas de estilo. Existen varios tipos de selectores, y cada uno funciona de forma ligeramente diferente.
Estos diferentes selectores te ofrecen un amplio margen para diseñar partes específicas de tu página web. Te permiten definir con precisión los elementos y decidir su aspecto.
CSS proporciona muchas propiedades diferentes que puedes usar para diseñar tu página web. Cada propiedad te permite cambiar un aspecto específico de la apariencia de un elemento. Algunas propiedades comunes son:
Cada propiedad CSS va seguida de un valor. Por ejemplo, para colorear el texto en rojo, puedes escribir:
p {
color: rojo;
}</código>Esta sencilla regla hace que todos los párrafos tengan texto en rojo. La propiedad "color" controla cómo se muestra el texto y el valor "red" le indica el color.
El término "cascada" en CSS significa que los estilos pueden fluir de una regla a otra. Si dos reglas se aplican al mismo elemento, el orden puede determinar cuál prevalece. Esto es similar a apilar bloques, donde un bloque a veces cubre parte de otro.
Una regla común es que los estilos escritos directamente dentro de un elemento HTML (llamados estilos en línea) anularán los estilos del archivo CSS. Otra regla es que, si se aplica estilo a un elemento padre, sus elementos hijos pueden heredar ese estilo a menos que se les indique lo contrario.
Por ejemplo, si configura el color del texto de un <div> en verde, el texto dentro de él también aparecerá en verde debido a la herencia. Esto ayuda a mantener un diseño consistente en una página web.
Con CSS, puedes cambiar los colores de muchas maneras. Puedes usar nombres de colores comunes como rojo , azul y verde . También puedes usar códigos hexadecimales como <code>#FF0000</code> para el rojo o valores RGB como <code>rgb(255, 0, 0)</code>.
Las fuentes son otra parte importante de CSS. Una fuente es como el estilo de escritura a mano que eliges en un cuaderno. En CSS, puedes cambiar la familia de fuentes, el tamaño, el grosor y el estilo. Por ejemplo, si quieres que tus párrafos aparezcan en Arial, puedes usar:
p {
familia de fuentes: Arial, sans-serif;
}</código>Esta regla le dice al navegador que muestre el texto en la fuente Arial si está disponible y que use otra fuente similar si no lo está.
Cambiar colores y fuentes con CSS hace que el texto sea más fácil de leer y que su página web sea más interesante de ver.
El modelo de caja CSS permite comprender cómo se organizan las diferentes partes de un elemento en una página. Cada elemento es como una caja. El modelo de caja consta de cuatro partes:
Imagina una fotografía. La fotografía en sí misma es el contenido. El paspartú que la rodea es como el relleno. El marco que lo une todo es el borde. Y el espacio alrededor del marco es el margen. Con este modelo, puedes asegurarte de que todas las partes de tu diseño tengan el espacio y el equilibrio adecuados.
CSS no se limita solo a colores y fuentes; también ayuda a organizar los elementos en una página web. Esto se conoce como diseño y posicionamiento. Con CSS, puedes decidir dónde aparece cada elemento en la página.
Hay varias formas de controlar el diseño de una página web, entre ellas:
Usar estas técnicas de diseño es como organizar los juguetes en un estante. Tú decides dónde va cada juguete para que todos tengan suficiente espacio y se vean ordenados. Esto hace que tu página web sea más organizada y atractiva.
Aquí tienes un ejemplo de cómo funcionan juntos HTML y CSS. Este código de ejemplo muestra una página web sencilla con algunos estilos:
<código><!DOCTYPE html>
<html>
<cabeza>
<estilo>
cuerpo {
color de fondo: azul claro;
}
h1 {
color: azul marino;
tamaño de fuente: 24px;
}
pag {
color: verde;
tamaño de fuente: 18px;
}
</estilo>
</cabeza>
<cuerpo>
Mi primera página web
<p>Esta es una página web sencilla diseñada con CSS.</p>
</cuerpo>
</html></código>Este código crea una página web con un fondo azul claro. El texto del encabezado es azul marino y el del párrafo es verde. El CSS dentro de la etiqueta <code><style></code> muestra cómo se escriben y aplican las reglas.
Puedes añadir CSS a tu HTML de tres maneras principales. Cada método tiene su propio uso según la situación:
El método externo es el más común en el desarrollo web profesional porque mantiene el HTML ordenado y permite actualizar estilos en muchas páginas a la vez.
CSS es muy útil en muchos sentidos. Aquí tienes algunos beneficios de usar CSS en el desarrollo web:
Usar CSS es como tener una caja de herramientas especial. Cada herramienta te ayuda a mejorar fácilmente la apariencia de tu página web. Con la práctica, verás lo poderoso que puede ser CSS para crear sitios web atractivos e intuitivos.
Todos los sitios web que visitas usan CSS de alguna manera. Desde tus páginas de dibujos animados favoritas hasta las páginas de proyectos escolares, CSS ayuda a crear un diseño divertido y fácil de leer. Cuando ves una página web colorida con un espaciado limpio y texto claro, es CSS en acción.
Considere el diseño de sitios web populares, como los de juegos, dibujos animados o historias en línea. El uso cuidadoso de colores, fuentes y diseños contribuye a que estos sitios web sean atractivos y atractivos. CSS también se utiliza en aplicaciones y sitios móviles, lo que garantiza que el contenido se vea bien tanto en pantallas grandes como en teléfonos pequeños.
En la vida cotidiana, CSS es similar a decorar una habitación. Puedes elegir un tema para tu habitación, colgar cuadros coloridos y organizar tus muebles de forma ordenada. CSS hace lo mismo con los sitios web. Aporta orden y belleza al espacio digital, haciéndolo agradable para los visitantes.
Estos son los puntos principales que aprendimos sobre CSS:
CSS es una parte vital del desarrollo web, ya que crea sitios web atractivos y fáciles de navegar. A medida que explores más e intentes crear tus propias páginas web, recuerda que CSS es tu herramienta para expresar tu creatividad. Diviértete experimentando con colores, fuentes y diseños, porque cada pequeño cambio añade magia a un sitio web bien diseñado.
Sigue practicando y observando tus sitios web favoritos. Observa cómo se usan los diferentes estilos para captar tu atención y crear una experiencia agradable. Con el tiempo, verás lo poderoso que puede ser el CSS para transformar estructuras HTML simples en páginas web visualmente atractivas.