¿Qué es CSS?
¿Alguna vez te preguntaste que es lo que hace que una aplicación o página web sea atractiva? ¿O bien como se realizan los aspectos estéticos de estas? En este artículo vamos a explicar que es y cómo usar CSS mediante ejemplos prácticos para que puedas tener una base de conocimiento sobre este lenguaje.
Prerrequisitos: Conocimientos básicos en HTML ()
En primer lugar, vamos a comenzar explicando brevemente que es CSS. Este es un lenguaje que permite definir de manera visual un documento que ya fue estructurado y creado en HTML. Es decir, mientras HTML se encarga de armar el contenido y la estructura de la pagina/aplicación web, CSS es quien se encarga de darle estilos como por ejemplo definir colores de textos, el tamaño de la fuente, la alineación de los elementos, entre muchas otras cosas más.
Veámoslo de esta forma, imaginemos que construir una página web es como construir una casa. HTML es como el esqueleto de la casa: define la estructura básica, como las paredes, el techo y el suelo. Especifica dónde van las habitaciones, las puertas y las ventanas, proporcionando la base sobre la que se edifica todo lo demás. Sin este esqueleto, no tendrías más que un espacio vacío sin forma ni función.
CSS, en cambio, es como la decoración y el diseño interior de la casa. Una vez que el esqueleto está en su lugar, el CSS se encarga de pintar las paredes, elegir los muebles, colgar las cortinas y colocar los cuadros. En otras palabras, CSS hace que la casa (tu página web) sea visualmente atractiva y agradable, definiendo colores, fuentes, tamaños y estilos para cada elemento. Sin CSS, tendrías una estructura funcional pero visualmente simple y sin personalidad.
¿Cómo comenzar a usar CSS?
Si bien para que el código CSS tenga validez y funcione dentro del documento HTML basta con ingresar la etiqueta <style> y el código CSS dentro, esta no es la forma recomendada de usarlo. Para comenzar a usar CSS lo ideal es crear un nuevo archivo, que por convención se suele nombrar style.css y escribir todo el código CSS en ese archivo. Y te preguntaras ¿cómo puedo luego ver impactado el resultado del CSS en mi documento HTML? Simple, para eso dentro del documento HTML hacemos un llamado al documento del CSS, en este caso de nombre “style.css”. El documento HTML quedaría algo así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hola mundo!</h1>
<p>Este es un párrafo de ejemplo</p>
</body>
</html>
En el ejemplo anterior podemos ver esta línea de código: “<link rel="stylesheet" href="style.css">”, esta es la línea que se encarga de llamar al CSS. Donde la etiqueta <link> se usa para enlazar recursos externos al documento HTML. “rel=”stylesheet” indica que el archivo vinculado es una hoja de estilos CSS, y por ultimo “href=”style.css” es el atributo que especifica la ubicación del recurso a enlazar.
Sintaxis de CSS
CSS tiene un conjunto de normas que hay que seguir para poder usarlo de la manera adecuada. Cada estilo está formado en primer lugar por el elemento HTML (selector) al cual se le va a aplicar un estilo, luego de eso se utiliza una propiedad (la cual viene predefinida por el lenguaje) y por ultimo un valor para esa propiedad. Por ejemplo, si quisiéramos cambiar el color de un texto a rojo, utilizaríamos la propiedad “color” y el valor “red”. Pongámoslo en práctica para que se pueda entender mejor.
Acá tenemos nuestro documento HTML, con su respectivo enlace que llama al archivo CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hola mundo!</h1>
<p>Este es un párrafo de ejemplo</p>
</body>
</html>
Ahora supongamos que queremos cambiar el color del título y tamaño del párrafo, tendríamos que hacer algo como esto en nuestro archivo CSS:
h1{
color: red;
}
p{
Font-size: 25px;
}
Y de esta manera tendríamos nuestro documento HTML con los estilos que queremos.
Selectores Básicos CSS
Un selector es el patrón que se utiliza para identificar y seleccionar el elemento HTML al cual se le va a aplicar un estilo.
Existen diversos tipos de selectores en CSS. En los ejemplos anteriores únicamente vimos el selector de tipo, el cual selecciona todos los elementos de un tipo especio, como por ejemplo fue h1 y p. Los selectores más comunes son:
Selector de tipo: Selecciona todos los elementos de un tipo específico. Por ejemplo, si queremos dar estilo a todos los párrafos de un documento sería algo así:
p {
color: blue;
}
Selector de clase: Selecciona todos los elementos con una clase especifica. Se define utilizando un punto (‘.’) seguido del nombre de la clase:
.miClase{
font-size: 20px;
}
Selector de ID: Selecciona un único elemento con un ID especifico. Se define con un signo de almohadilla (‘#’) seguido por el nombre del ID:
#miID{
Background-color: red;
}
Selector universal: Selecciona todos los elementos del documento. Se define usando un asterisco (*):
*{
margin: 0;
padding: 0;
}
Esta fue una pequeña introducción hacia lo que es CSS y su importancia para el desarrollo estético de una pagina/aplicación web, obviamente existen muchos otros elementos y técnicas que iremos conociendo a lo largo de estos artículos. Espero que esta pequeña introducción te haya ayudado a comprender el funcionamiento de CSS.