Antes de la existencia de CSS, las páginas web tenían un aspecto bastante básico y desagradable: distribución desproporcionada, contenidos en ocasiones desorganizados y una falta evidente de estructura visual que hiciera que el sitio tuviera una mejor presentación. En pocas palabras, veíamos HTML desnudo, desarreglado.  

Todo eso cambió cuando apareció el primer estándar de CSS, el único lenguaje que nos permite dotar de estilo, distribución visual y belleza a cualquier página de internet. La W3C nos dio la oportunidad de vestir nuestros documentos HTML y hoy te vamos a enseñar cómo funciona esta tecnología para que tú puedas hacer lo mismo.  

¿QUÉ ES CSS?  

CSS es un lenguaje de diseño utilizado para estilizar la presentación y distribuir el contenido de cualquier página o sitio web escrito y estructurado previamente con algún lenguaje de marcado como HTML. Sus siglas en inglés también definen la finalidad del mismo: Cascading Style Sheets (Hojas de estilos en cascada).  

Su lanzamiento inicial se produjo en 1996 y vino de la mano de la World Wide Web Consortium (W3C) como una solución a lo aparatoso que era hacer que las páginas en HTML se vieran mejor usando solo etiquetas.  

¿CÓMO FUNCIONA CSS?

Este lenguaje funciona mediante la declaración de reglas que definen cuál es el aspecto visual de determinados elementos en el documento HTML (si aún  no sabes qué son los elementos en HTML, puedes leer este artículo).  

Cada regla está compuesta por lo siguiente: 

body {
    color: black;
    background-color: white;
    font-size: 16px;
}

1. Selector: es la parte fundamental de cualquier regla. Su función es apuntar al elemento HTML del documento que estamos estilizando. Podemos hacer referencia a cualquier elemento usando clases, identificadores o nombres de etiquetas.

2. Llaves de apertura y de cierre {...}: delimitan el bloque de estilos que pertenece a cada selector.

3. Propiedades: son el bloque de código dentro de las llaves que le indican al navegador cómo luce el elemento seleccionado. Existen propiedades para definir colores, estados, fondos, tipografías, diseño de cajas, filtros, posicionamiento, distribución, alineación, etcétera.  

Adicionalmente, cada regla se escribe debajo de la anterior. El resultado es un documento extenso verticalmente:

body {
    color: black;
    background-color: white;
    font-size: 16px;
}
header {
    background-color: gray;
    height: 100vh;
}
main {
    background-image: url(../Pictures/Wallpaper.jpg);
    background-position: center;
    color: white;
}
section {
    height: 500px;
    width: 300px;
}
... (Más reglas CSS hacia abajo)

¿CÓMO SE CONECTAN HTML Y CSS?

Hay tres formas de conectar ambos lenguajes para poder crear una página web presentable.

1. La primera consiste en la declaración de un elemento style dentro del documento HTML:

<style>
    body {
        color: black;
        background-color: white;
        font-size: 16px;
    }
    header {
        background-color: gray;
        height: 100vh;
    }
</style>

En él podemos colocar todas las reglas de estilo que tendrá nuestra página. No es la manera más recomendada de hacerlo ya que provoca que el código sea ilegible y difícil de mantener cuando el proyecto crece.

2. La segunda implica la aplicación de estilos para cada elemento mediante el atributo style de cada etiqueta HTML:

<body style="display: grid;">
    <main style="background-color: black; color: white;">
        <section>
            <article style="border: 5px solid black;">
                <p>
                    Soy un párrafo
                </p>
            </article>
        </section>
    </main>
</body>

Estos estilos tienen mayor importancia que cualquier otro presente en la página. Esta forma es poco frecuente y generalmente se utiliza en los casos en los que queremos que el sitio o página web tengan la mayor compatibilidad posible con todos los navegadores que existen.  

3. La tercera forma consiste en enlazar dos archivos diferentes: el documento HTML (.html) y el archivo CSS (.css) a través del elemento vacío link en el código de la página:

<head>
    <link rel="stylesheet" href="../../estilos.css">
    <title>Document</title>
</head>

Esta es la mejor forma de hacerlo ya que permite mantener el proyecto con mayor facilidad al cambiar los estilos en el archivo CSS y no en el HTML.  

CSS puede parecer sencillo a primera vista, pero se trata de un lenguaje muy extenso con muchísimas propiedades, normativas y conceptos que debes conocer bien para hacer que tu página web luzca genial. Afortunadamente, en Academia Web somos conscientes de ello y por eso te hemos preparado un curso completo para que puedas convertirte en todo un profesional del diseño web con esta tecnología. ¡Anímate a estilizar tus proyectos web!