Aprender CSS: Sintaxis básica para dar estilos a un elemento HTML
CSS es el lenguaje que se utiliza para dar estilos a tu página web. Aprender CSS servirá para hacer tu sitio (o el de tus clientes) más legible, mejorar su usabilidad y, en esencia, hacerlo más bonito.
Contenido
Formas de utilizar CSS
Hay 3 formas de utilizar CSS en tu documento HTML:
Estilos CSS internos
Puedes añadir CSS en tu HTML escribiendo la etiqueta <style></style> y declarando el CSS deseado en su interior. Esta etiqueta debería estar comprendida entre la etiqueta de apertura y cierre del elemento <head>.
Estilos CSS en línea
Otra forma de utilizar CSS es aplicarlo al elemento HTML en cuestión. Para hacerlo, sólo tendrás que escribir el atributo HTML style="" y añadir el código CSS entre las dos comillas.
Estilos CSS externos
Esta es la forma recomendada de usar CSS en tu sitio web. Para ello, tendrás que crear un archivo externo en la carpeta donde esté tu proyecto y con la etiqueta <link rel="stylesheet" src=""> llamar a ese archivo desde el HTML donde quieras que dichas reglas CSS tengan efecto. Quedaría tal que así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Hola</p>
</body>
</html>Estructura básica de una declaración CSS
Una vez llamada la hoja de estilos CSS, lo siguiente que haremos será dar estilos, siguiendo la estructura básica de una declaración CSS, que sería la siguiente:
selector {
propiedad: valor;
}Selector
Indica el elemento al que queremos darle estilos. Ahora mismo nos centraremos en 3 selectores básicos:
- Selector de etiqueta: Se escribe como la etiqueta de un documento HTML pero sin los símbolos de mayor y menor. Para dar estilos al párrafo del ejemplo anterior, escribiríamos simplemente una p.
p {
propiedad: valor;
}- Selector de clase: Para llamar a un elemento con una clase CSS específica, escribiríamos el nombre de la clase precedida por un punto (.). Para dar estilos a un párrafo con la clase «texto», escribiríamos .texto.
.texto {
propiedad: valor;
}- Selector de id: Para llamar a un elemento con un id específico, lo haríamos igual que con el selector de la clase pero cambiando el punto por una almohadilla (#).
#texto {
propiedad: valor;
}Propiedad y valor
Ambos forman lo que se conoce como un regla, que no es más que una indicación en lenguaje CSS para modificar un elemento HTML.
- Propiedad: En la propiedad indicaremos la característica que queremos modificar del elemento HTML. Hay multitud de ellas, pero en futuros post os enseñaré las más básicas para poder jugar con el 90% de los estilos de vuestro proyecto. ????
- Valor: Una vez declarada la propiedad CSS, necesitaremos indicar qué cambios queremos realizar. Es ahí donde entra el valor. Este varía según la propiedad y podemos encontrar desde números (para declarar por ejemplo un tamaño de fuente) hasta códigos de colores o palabras (para cambiar el color de texto o fondo de un elemento).
NOTA: Después de declarar la propiedad debes escribir dos puntos (:) y después de escribir el valor, debes terminar con punto y coma (;).
Ejemplo final: Dando nuestro primer paso
Antes puse el ejemplo de la estructura básica sin hablar de CSS propiamente dicho, pero aquí va un pequeño spoiler:
La propiedad color sirve para cambiar el color de texto de un elemento HTML. Su atributo se puede declarar de tres formas: Usando el nombre predefinido del color (podéis encontrar listas con nombres de colores CSS), usando un código hexadecimal o utilizando su código rgb. Entonces, para poner el párrafo del ejemplo anterior de color rojo, podríamos usar una de las 3 opciones siguientes:
p {
color: red;
}
p {
color: #ff0000;
}
p {
color: rgb(255,0,0);
}¡Y eso sería todo! Si logras quedarte con todo lo que has leído en este artículo, ya tienes casi la mitad del trabajo hecho a la hora de usar CSS ????
Si quieres seguir aprendiendo, échale un vistazo a la etiqueta CSS de nuestro blog y suscríbete a nuestra newsletter.
¡Nos vemos en la siguiente entrada!
¡Suscríbete a nuestra newsletter y recibe nuestras ofertas, novedades y descuentos directamente en tu email!
