Fundamentos de CSS: Estilizando la Web

Aprende qué es y cómo funciona este lenguaje de hojas de estilo para transformar la apariencia de tus páginas web. Con esta guía básica, dominarás los conceptos esenciales para empezar a estilizar tu contenido HTML.

Autor: José Alvarado

Publicado: hace 10 meses

CSS, o Cascading Style Sheets, es el lenguaje que se utiliza para describir la presentación de un documento HTML. Mientras que HTML estructura el contenido, CSS se encarga de su apariencia, permitiendo a los desarrolladores web crear páginas visualmente atractivas y coherentes. En este artículo, exploraremos los fundamentos de CSS y cómo puedes usarlo para mejorar el diseño de tus páginas web.

¿Qué es CSS?

CSS es un lenguaje de hojas de estilo que se utiliza para definir cómo se deben mostrar los elementos HTML en la pantalla. Mediante CSS, puedes controlar colores, fuentes, márgenes, bordes, alturas, anchos, y mucho más. Esto te permite separar la estructura del contenido (HTML) de su presentación (CSS).

Cómo Funciona CSS

CSS funciona mediante la aplicación de reglas de estilo a los elementos HTML. Cada regla está compuesta por un selector y una declaración. El selector apunta al elemento HTML que deseas estilizar, y la declaración contiene las propiedades y valores que deseas aplicar.

Estructura de una Regla CSS

Una regla CSS básica tiene la siguiente estructura:

selector {
    propiedad: valor;
}

Ejemplo:

p {
    color: blue;
    font-size: 16px;
}

En este ejemplo, el selector p apunta a todos los elementos <p> (párrafos) en la página, y la declaración aplica el color azul y un tamaño de fuente de 16 píxeles a esos párrafos.

Selectores comunes en CSS

Selectores de tipo: apuntan a todos los elementos de un tipo específico.
```
h1 {
    color: red;
}
```
Selectores de clase: apuntan a elementos HTML con una clase específica, usando el punto (.) antes del nombre de la clase.
```
.mi-clase {
    background-color: yellow;
}
```
Selectores de ID: apuntan a un elemento HTML con un ID específico, usando el signo de almohadilla (#) antes del ID.
```
#mi-id {
    border: 1px solid black;
}
```

Selectores universales: apuntan a todos los elementos.

* {
    margin: 0;
    padding: 0;
}

Cómo incluir CSS en un documento HTML

Existen tres formas principales de incluir CSS en un documento HTML:

CCS Inline: añade estilos directamente a los elementos HTML usando el atributo style
```
<p style="color: blue; font-size: 16px;">Este es un párrafo estilizado.</p>
```

CSS Interno: incluye una hoja de estilo en el documento HTML dentro del elemento <style> en la sección <head>

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

CSS Externo: enlaza a una hoja de estilo externa desde el documento HTML usando el elemento <link> en la sección <head>
```
<head>
    <link rel="stylesheet" href="styles.css">
</head>
```

Beneficios de usar CSS

Separación de contenido y presentación: actualmente se considera buena práctica mantener tu código CSS separado del HTML, esto facilita el mantenimiento y la actualización del diseño sin alterar el contenido HTML.
Consistencia: Permite aplicar estilos coherentes en múltiples páginas de un sitio web.
Reutilización: Una sola hoja de estilo puede ser utilizada por múltiples documentos HTML, ahorrando tiempo y esfuerzo.

Uso de clases CSS

Las clases son selectores que permiten definir estilos que se pueden aplicar a varios elementos HTML, independientemente de su tipo o ubicación en el documento. A diferencia de los selectores de ID, que son únicos, las clases pueden reutilizarse en múltiples elementos, lo que hace que tu CSS sea más flexible y organizado.

Definir una clase CSS

Para empezar, necesitas definir la clase en tu archivo CSS. Aquí te dejo un ejemplo simple:

.text-color {
  color: #007BFF;
  font-weight: bold;
}

En este ejemplo, hemos creado una clase llamada text-color que cambia el color del texto a azul y lo hace negrita. Puedes cambiar cualquier propiedad CSS dentro de la clase para ajustarla a tus necesidades.

Aplicar la clase en HTML

Ahora, puedes aplicar esta clase a cualquier elemento HTML usando el atributo class de la siguiente manera. Recuerda incluir en tu archivo HTML tu hoja de estilos con la etiqueta <link>.

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

<p class="text-color">Este texto utiliza estilos de una clase CSS.</p>
<p>Este texto no contiene una clase CSS.</p>

En este ejemplo, solo el primer párrafo (<p>) tendrá el estilo de la clase text-color, mientras que el segundo párrafo mantendrá su estilo predeterminado.

Como puedes observar, utilizar clases CSS es bastante sencillo. Actualmente por medio del atributo class en los elementos HTML es la forma más utilizada en el desarrollo web para estilizar las paginas web.

Conclusión:

CSS es esencial para crear páginas web atractivas y profesionales. Con una comprensión básica de cómo funcionan las reglas y selectores de CSS, puedes comenzar a estilizar tus páginas web y llevarlas al siguiente nivel. ¡Empieza a experimentar con CSS y observa cómo mejora la apariencia de tu contenido web!

Nos vemos en un próximo blog. 🧑‍💻