Introducción a CSS | Combimauri

¡Dale Estilo a tu Web con CSS! Una Introducción a este Lenguaje Esencial

¿Qué es CSS?

CSS (Cascading Style Sheets) es un lenguaje de marcado que complementa al HTML y se encarga de darle estilo y presentación a las páginas web. Define cómo se visualizan los elementos HTML, como su tamaño, color, tipografía, posición y disposición en la pantalla.

Estructura básica de una regla CSS:

Una regla CSS se compone de dos partes principales:

Selector: Define el elemento HTML al que se le aplicará el estilo. Puede ser un tipo de etiqueta HTML específica (como p para párrafos o h1 para encabezados), una clase o un identificador.
Declaraciones de estilo: Conjunto de propiedades CSS y sus valores que se aplicarán al elemento seleccionado. Las propiedades se escriben en pares propiedad: valor; separadas por punto y coma.

Ejemplo de una regla CSS:

p {
  font-family: Arial, sans-serif;
  color: #333;
  text-align: center;
}

En este ejemplo:

El selector p selecciona todos los párrafos HTML (<p>) de la página.
Las declaraciones de estilo definen:
- font-family: La tipografía para los párrafos (Arial o una sans-serif si no está disponible Arial).
- color: El color del texto de los párrafos (#333, gris oscuro).
- text-align: La alineación del texto dentro de los párrafos (centrada).

Selectores por clase:

Los selectores por clase permiten aplicar estilos a un grupo de elementos HTML que comparten una clase común. Se utilizan de la siguiente manera:

.clase-selector {
  propiedad1: valor1;
  propiedad2: valor2;
  ...
}

Ejemplo:

Supongamos que tenemos varios párrafos en nuestra página HTML y queremos aplicarles un estilo de letra gris y negrita. Para ello, podemos crear una clase llamada “parrafo-gris” y asignarla a cada párrafo que queremos modificar. Luego, definimos la regla CSS correspondiente:

<p class="parrafo-gris">Este párrafo tiene estilo de clase.</p>
<p class="parrafo-gris">Otro párrafo con estilo de clase.</p>

.parrafo-gris {
  font-weight: bold;
  color: gray;
}

En este ejemplo, todos los párrafos con la clase “parrafo-gris” tendrán el estilo definido en la regla CSS.

Selectores por identificador:

Los selectores por identificador permiten aplicar estilos a un único elemento HTML que tenga un identificador único. Se utilizan de la siguiente manera:

#identificador {
  propiedad1: valor1;
  propiedad2: valor2;
  ...
}

Ejemplo:

Supongamos que tenemos un encabezado de primer nivel (<h1>) en nuestra página HTML y queremos que se muestre en color rojo y con un tamaño de fuente más grande. Para ello, podemos asignarle un identificador único al encabezado y luego definir la regla CSS correspondiente:

<h1 id="encabezado-principal">Este encabezado tiene estilo de identificador.</h1>

#encabezado-principal {
  color: red;
  font-size: 32px;
}

En este ejemplo, solo el encabezado con el identificador “encabezado-principal” tendrá el estilo definido en la regla CSS.

Combinando selectores:

Los selectores de etiqueta, clase e identificador se pueden combinar para crear reglas CSS más específicas. Por ejemplo, podemos seleccionar todos los párrafos dentro de un contenedor con la clase “seccion” y aplicarles un estilo de margen:

.seccion p {
  margin: 10px;
}

¿Cómo se aplica CSS a una página HTML?

Existen tres formas principales para aplicar CSS a una página HTML:

Estilo en línea: Se escribe directamente en la etiqueta HTML utilizando el atributo style. Este método se usa para estilos específicos de un solo elemento.
```
<p style="font-family: Arial, sans-serif; color: #333; text-align: center;">¡Este párrafo tiene estilo en línea!</p>
```
Hoja de estilo embebida: Se escribe dentro de la etiqueta <style> en la sección <head> del documento HTML. Este método es útil para definir estilos que se aplicarán a varios elementos de la página.
```
<head>
  <style>
    p {
      font-family: Arial, sans-serif;
      color: #333;
      text-align: center;
    }
  </style>
</head>
```
Hoja de estilo externa: Se escribe en un archivo CSS independiente (.css) y se vincula a la página HTML mediante la etiqueta <link> en la sección <head>. Este método es ideal para aplicar estilos a múltiples páginas de un sitio web.
```
<head>
  <link rel="stylesheet" href="estilo.css">
</head>
```

Recursos adicionales:

Introducción al Diseño en CSS - Aprende desarrollo web | MDN: https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Introduction
CSS en español - W3Schools: https://www.w3schools.com/css/default.asp

Conclusión:

CSS es una herramienta fundamental para crear páginas web atractivas y visualmente consistentes. Con CSS, puedes controlar la apariencia de todo, desde los encabezados y párrafos hasta los botones y formularios. Aprender CSS te abrirá las puertas a un mundo de posibilidades en el diseño y desarrollo web.