CSS - Introducción

Mateo G. -

¿Qué es CSS?

CSS significa Hojas de Estilo en Cascada. Es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en un lenguaje de marcado, como HTML o XML. CSS te permite dar estilo y diseñar páginas web especificando cómo deben mostrarse los elementos en la pantalla, papel u otros medios.

CSS funciona con HTML. Mientras que HTML es responsable de la estructura y el contenido de una página web, CSS se centra en la presentación visual y el diseño. Te permite controlar varios aspectos de la apariencia de la página web, como colores, fuentes, espaciado y posicionamiento.

Con CSS, puedes aplicar estilos a elementos HTML específicos o grupos de elementos.

Consejo: Estilos CSS para Elementos HTML

h1 {
    font-family: Arial;
    font-size: 24px;
    color: blue;
}

div {
    background-color: lightgray;
    padding: 10px;
}

Al usar CSS:

  • Puedes separar la lógica de presentación del contenido estructural de tus páginas web.
  • Esta separación mejora la mantenibilidad y la reutilización.
  • Puedes definir estilos en un archivo CSS externo y vincularlo a múltiples páginas HTML.

Consejo: Vinculación de un Archivo CSS Externo

<link rel="stylesheet" type="text/css" href="styles.css">

CSS también te permite crear diseños responsivos que se adaptan a diferentes tamaños de pantalla y dispositivos.

Consejo: Consultas de Medios CSS

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

En general, CSS es una herramienta importante para desarrolladores y diseñadores web. Te da control sobre cómo se ven tus páginas web en diferentes dispositivos y pantallas.

Por qué usar CSS?

CSS es una herramienta para el desarrollo web. Hay varias razones por las que deberías usar CSS en tus proyectos web:

CSS separa la presentación de una página web de su estructura y contenido. Esto significa que puedes definir los estilos visuales de tu página web de forma independiente del marcado HTML. Al mantener la lógica de presentación en un archivo CSS separado, tu código HTML se vuelve más limpio y se centra más en la estructura y el contenido de la página. Esta separación facilita la actualización de tu código en el futuro.

El uso de CSS te permite tener más control sobre el aspecto de tus páginas web. Con CSS, puedes especificar varias propiedades visuales para los elementos HTML, como colores, fuentes, espaciado, bordes y fondos. Puedes aplicar diferentes estilos a elementos específicos o grupos de elementos, lo que te da un control preciso sobre el aspecto de tu página web.

CSS reduce la complejidad y la repetición en el contenido estructural de tus páginas web. Sin CSS, tendrías que aplicar los mismos estilos a cada elemento HTML por separado, lo que puede llevar a mucha repetición y código inflado. Con CSS, puedes definir estilos una vez y aplicarlos a múltiples elementos usando selectores. Esto reduce la duplicación de código y hace que tu HTML sea más conciso.

Una característica poderosa de CSS es compartir el formato entre múltiples páginas web. Al definir estilos en un archivo CSS externo, puedes vincular ese archivo a múltiples páginas HTML. Esto significa que puedes hacer cambios globales modificando un solo archivo CSS en lugar de actualizar los estilos de cada página individual.

¿Cómo funciona CSS?

CSS funciona aplicando estilos a los elementos HTML en una página web. Los estilos se definen utilizando reglas CSS, que consisten en selectores y bloques de declaración.

Las reglas CSS se pueden definir en un archivo separado con extensión .css, o se pueden incrustar dentro del documento HTML usando la etiqueta <style>. Cuando se utiliza un archivo CSS externo, es necesario vincularlo al documento HTML usando la etiqueta <link> en la sección <head>.

Vinculación de un archivo CSS externo

Consejo: Vinculación de un archivo CSS externo

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Cada regla CSS consiste en un selector y un bloque de declaración. El selector señala el elemento o elementos HTML que se desean estilizar. Puede ser un selector de elemento (por ejemplo, p para párrafos), un selector de clase (por ejemplo, .highlight para elementos con la clase "highlight"), o un selector de ID (por ejemplo, #header para el elemento con el ID "header").

Sintaxis de la regla CSS

Consejo: Sintaxis de la regla CSS

selector {
    propiedad1: valor1;
    propiedad2: valor2;
}

El bloque de declaración se encierra entre llaves {} y contiene una o más declaraciones. Cada declaración especifica una propiedad CSS y su valor correspondiente, separados por dos puntos :. Las múltiples declaraciones dentro de un bloque se separan por punto y coma ;.

Bloque de declaración CSS

Consejo: Bloque de declaración CSS

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Cuando un navegador web carga una página web, lee tanto los archivos HTML como CSS. Luego, el navegador aplica estas reglas a los elementos HTML correspondientes según las propiedades y valores declarados. Este proceso se llama renderización.

CSS también permite la cascada y la herencia. Si varias reglas se aplican a un elemento, la regla con mayor especificidad tiene prioridad. Algunas propiedades son heredadas por los elementos hijos de sus elementos padres.

En general, CSS define reglas que se dirigen a elementos HTML y especifican sus propiedades visuales para que puedas controlar cómo se ven tus páginas web.